Sketch tips for Framer.js

How to smoothly import Sketch files into Framer.

I have been using Framer.js for the past few months. As I climb the admittedly steep learning curve, I want to help people who are a step behind.

Note: the framer.js community is very active and has been great in answering questions.

Benefits of Importing a Sketch file

There are a couple of ways to bring your designs into Framer:

drag them into the Framer workspace

place your images in the “/images” folder

These aren’t hard to do, but by importing a sketch file, you have the added benefit of:

No ‘hardcoding’ the location of your images

Scale your designs with 1x, 2x, 3x, etc. options

Artboard positioning (new)

Artboards

The new changes are amazing in my opinion because of the following reasons:

No more stacking of artboard

All artboards are visible by default

Personally, this will save me time. I won’t have to go through the hassle of ‘hardcoding’ the locations and visibility of the screens.

Keep In Mind:

from framerjs site

Sketch group = Framer layer & Sketch subgroups = Framer subLayer

Group Naming Tips

group name * — adding the * will flatten the group into a single image

hide group — will be a hidden layer in framer.js (visible = false)

unique names — give each group a unique name, it will be easier to access in your Framer project

note: if you have groups with the same name you can use the Rename It plugin to quickly fix that

When naming your groups: don’t use spaces or numbers

Accessing Layers

When you do an import, this line will appear in your Framer project:

To access any of the layers you will have to do the following:

sketch.layername

This can become tedious when you want to access sublayers because you have to explicitly call each sublayer. However, it’s not as easy as sketch.layername.sublayername What you have to do is: sketch.layername.sublayername[x]

However if you add in Utils.globalLayers(sketch) then you will be able to call each layer directly.

Hope this helps! I’d love to hear from you. This was my first post :) If I missed anything, let me know. Also, I am planning on putting together some tutorials. If there are any topics you’d like for me to tackle next, contact me via twitter or email.