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:
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.
