Sketch Import

Bring your designs to life using your favorite graphics tools. Import graphics from Sketch with a single click. Go back-and-forth and start exploring interactions, while refining your visuals.
Get Started

Launch Framer and open a saved .sketch (or .psd) file. Then, click the Import icon in the sidebar. You’ll be presented with a sheet. It tells you if there’s a file open and ready to be imported. You can only import saved files. You can also choose at which scale to import your designs here.

Select Layers

Every layer group, with a single layer or more, becomes a Framer layer when imported. They can be selected by their name in Sketch. Ungrouped layers aren’t included.

After you’ve successfully imported a file, the following line of code gets inserted at the very top of your Framer prototype:

# Import file "design" 
sketch = Framer.Importer.load("imported/design@1x")

This loads and contains all of the importer layers. We can give it any name, and use that to select layers. By default, it’s named after the app you’ve used to import. Now, to select a layer group that you’ve named layerA, write:

# Import file "design" 
sketch = Framer.Importer.load("imported/design@1x")
 
# Set the opacity of layerA 
sketch.layerA.opacity = 0.5

Layer groups placed within other groups are called children. In the example below, group has two children. They can also be selected directly. There’s no need for you to take the layer hierarchy into account.

If the children don’t have to be selectable in Framer, you can flatten the group. Add * to the end of a group name and it will become a single layer without children. To exclude a group entirely, add a - to its name.

Select Multiple Layers

You can also select multiple layers. Perhaps you’d like to animate a couple of layers, or hide one of your layer groups.

This can be done with a for-loop. You can choose to select all of your imported layers, or just the layers of a specific group.

FAQ

How are my layers positioned?

The x and y position of your layers are turned into x and y properties. If you’re not working with Artboards, make sure all of your layers are part of a single layer group, positioned at 0,0.

Layers positioned at 0,0 will appear at the top-left corner of the canvas in Framer. Layers with negative coordinates are positioned outside the canvas.

Can I design in Artboards?

Yes, your Artboards also get imported. The position of the most left artboard on your canvas will be set to 0,0. All other Artboards are positioned relative to the most left one. This makes it easier to prototype multi-screen flows.

What happens to hidden layers?

Layers that you’ve hidden are also imported, but with visibility set to false by default.