Import States with Framer Inventory plugin for Sketch Learn how to semantically import your design i…


Spread the love

medium bookmark / Raindrop.io |

1*kxqOZpR1aakq4EMpiyZUPg@2x.png

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.

1*u5QKU5S_MbLpq0ra7KnQlQ@2x.png

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!

1*_lE55diCItPOhG7X-0RmWw@2x.png

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.

1*yhJpurcdD2nRcHBGo-E28A@2x.png

Use states to easily create animations

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.

1*QBuCf8lIa4_ILFM5AKibJw@2x.png

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.

1*RrJtJSdxzAM3UMuLZhyDVw@2x.png

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.

1*SteWFowi51kLsYZPFnblHw@2x.png

Text Layers soon

Recently introduced Text Layers will be supported with Framer Inventory soon. Stay tuned!


Change your everyday Framer workflow

1*DKZoYv7Hf56FxqVMCYEtOg@2x.png

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.

Be the first to write a response…

prototypr.io

✌Join us for more

1000s have recommended us, sign up today for free.

  • Stay up to date with prototyping tools and design news.
  • Comment and give feedback.
  • Become an author and share your expertise.
Sign Up

Leave a Reply