Sketch Tips for Framer.js

0

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 Layers & Framer Groups

Sketch Layers & Framer Groups

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:

Importing Layers

Importing Layers

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!

Share.

About Author

UX Designer. Curious Mind. Maker of prototypes. UX Designer @Autodesk. Trying to help spread the word about good #ux design. Follow me @msNaema

Leave A Reply