Giter Club home page Giter Club logo

framer-inventory-for-sketch's Introduction

Framer Inventory

Version

Semantic Export from Sketch into Framer

Watch Promo and Learn More

1. Import States

Import States Import layers from Sketch to Framer with states. Revolutionary way of semantic import makes iterations with Framer easy & productive. Read More

How to use

  • Choose layers & run to import Framer Layers with selected States (or all States).
  • Paste generated code from clipboard.

Features:

  • Support points for code & auto-exporting images with required pixel density
  • Relative layers: get coordinates to parent Artboard or parent Group
  • Devices support: ready for Desktop/iOS/Android prototyping

2. Export Prototype

Export Prototypes Have you used a Keynote for prototyping? It’s quite the same but like you organize scene of slides in Sketch and create motion in Framer with a any logic you need. Read More

How to use

  • Include layers in Scene by marking them exportable
  • Generate scene for entire page or selected artboards
  • Paste code into Framer and save project

Features:

  • Custom code: expand generated prototypes with your own logic
  • Reimport: your Custom code will be saved on reimport

Prepare project

  • Create Framer project, choose device type and save it.
  • Open plugin’s panel via Plugins/Framer Inventory/Show Panel
  • Select the same device type on panel and you are ready!

Contact

You are welcome to suggest ideas and report bugs (ideally with sketch files included). For better communication I suggest using Github issues but you can ping @framerinventory on Twitter as well.

framer-inventory-for-sketch's People

Contributors

timurnurutdinov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

framer-inventory-for-sketch's Issues

Stopped working in Sketch v49

As mentioned, when pressing Export Layer, expect image to be exported to image folder in Framer. But in Sketch v49, its broken and only code being exported to clipboard.

Many bugs please fix

Hi, great work
i really love this plugin u made,
but it seems like many bugs also

i really want to buy this plugin to support u ❗️❗️❗️

but i cant because too many bugs at now
hope u can fix that as soon as possible


  • OS X EI Capitan v10.11.1
  • Sketch v43.2
  • Framer Inventory v3.0.1

I follow your video tutorial,
i also download the files which related to that tutorial

i.e.

  • Uber with Framer Inventory.framer
  • framer-inventory-3-uber-example.sketch

but i have no idea why i cant do the same things which u do in that video

u can see the details in my video ❗️❗️❗️

e.g. bug1

I copy the layer - card_content in Artboard - uber/map,
and i paste that code in Framer, but the y position of card_content is wrong !!

e.g. bug2

i copy the layer - card bg of Artboard - uber/map & uber/ride
after i paste the code in Framer, i get the below . . .

card_content = new Layer
	width: 1312
	height: 1200
	x: 64
	y: 2292
	image: "images/card content.png"
	style: {"-webkit-filter": "drop-shadow(0px 0px 80px rgba(0,0,0,0.3))"}

card_bg = new Layer
	width: 1440
	height: 1920
	x: 0
	y: 0
	backgroundColor: "rgba(1,0,204,0.5)"

e.g. . . .

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Causing Sketch app to lag

I am not sure someone can replicate this. Having the plugin active will cause lag to interactions on Sketch (a delay on selections for example). Can anyone confirm this?

Custom value in Settings

If you put a custom value in a dropdown, it will not be written to userDefaults and cause Sketch to crash. Can be fixed via correct behavior of input field or/and with a special logic between UI & UserDafaults.

Transition missing for shadow

Two artboards, one rectangle. If you assign a drop-shadow property to the second one and export it with states, you will find that the base state of the rectangle has no shadow property in it, causing the transition to look quite quirky. To fix the problem, you have to either add a drop-shadow property to the rectangle in the first artboard, or add the property yourself in the output code.

I think that is a general problem, and the plugin should first collect all the properties that are used across different artboards. When exporting, it should automatically add missing properties with default values (eg. in this case, it should add "zero shadow" to the base state so that Framer knows there should be a transition).

BTW, 1. Is there a way to export gradient as also, or to force an oval with gradient to be exported as an image? And is there a way to export text and images? 2. The plugin should also check for invalid names of layers or rename them automatically (eg. "-" is not a valid character in Javascript variables, maybe it can change such punctuations into an underscore).

Anyway, I really love this plugin. It shows Framer & Sketch 's real potential in prototyping.

Edit: Uh, found a workaround! Seems that I have to group an object to make the plugin able to detect it as an asset. And that seems to be the only way to export text. ("Replicate Selected" will tell you the text layer has been exported, whereas it only adds a "}" add the end of the code... I guess it's a bug here. :) )

Can't export masks, text and images

I love this plugin but it looks like I can't pull masks, images, or text into Framer Studio :(

Masks appear as regular shapes but text or images won't show up in the previewer!

It would so awesome if this plugin would allow that. Unless this is a bug or functionality to be added later on?

Thank you so much for creating this!

png opacity error

When you change the opacity of an image from 1 to 0, it also changed the size of that object.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.