Import States with Framer Inventory plugin for Sketch
Learn how to semantically import your design into Framer
Choose layers you’d like to import into Framer and get the code & assets done for you. You can keep complex prototypes up-to-date with semantically imported not just layers but layer states.
In Framer layer states manage and organize different combinations of layer properties and animations can use them as a target.
How to start
Download Framer Inventory plugin for Sketch and choose Show Toolbar from plugin’s menu. You’ll be asked to select a Framer folder to let plugin know the place for assets. Match device type in both plugin & Framer and you are ready to go.
Import Layers
Select layers and choose “Layers” on a Toolbar to get code. Paste code into Framer and save project – assets are already exported for you!
Import Layer States
We design in Sketch with a set of artboards to represent the states of screen in a certain period of time. If you select at least two layers with the same name on separate artboards, you‘ll import layer states.
You can select a layer and a bunch of additional artboards too. If these artboards have a same-named layer — state will be generated. States are inherited from artboards’ names.
Native & Image layers
Framer Inventory analyses layers in Sketch and imports native layers if it’s possible. If not, plugin creates image layers and puts required assets into Framer project automatically.
Animatable properties for image layers: x, y, width, height, opacity and static shadow. Native layers additionally support background color, border radius, inner borders and drop shadows.
How to import native layer
Create a Rectangle or Oval in Sketch and apply styling with the following rules:
- up to 1 fill with solid color
- up to 1 inner border with solid color
- up to 1 drop shadow with solid color
- no inner shadows and no blurs.
As soon as anything new is available in Framer, it will be added to Framer Inventory.
Features
Pixels & Points
Mobile screens forces us design with points and with Framer Inventory you can use points in prototypes too.
Relative to Artboard or Group
By default coordinates are calculated relative to parent artboard. But you can change anchor point to parent group to compose views with child-to-parent relationship.
Text Layers soon
Recently introduced Text Layers will be supported with Framer Inventory soon. Stay tuned!
Change your everyday Framer workflow
Framer Inventory helps you separate views from additionally written logic to make it easier to support long live prototypes. If you use layer states, you’ll definitely like them being generated for you.
And if you look for a quick way to test ideas, prototype transition or even do not write a single line of code, check Export Prototype feature of Framer Inventory plugin for Sketch.
Follow Framer Inventory for updates & tutorials or get unlimited PRO version to boost your everyday Framer workflow.
