Tips for Sketch

In this page:

• Top left stays top left
• Hidden becomes invisible
• Excluding groups or artboards
• Layer flattening
• Overriding default image formats
• Artboards
• Scale control
• Wrapping masked content

Top left stays top left

The x and y positions in Sketch become x and y properties in Framer. If when your design is mispositioned, check the rulers in Sketch (View > Canvas > Show Rulers), set their zero point to the top left of your design, and ⇧⌘I import again.

Hidden becomes invisible

Hidden groups are also imported, but their visible property will be set to no so that they’re hidden in Framer as well.

Excluding groups or artboards

Do you have groups in your Sketch design that you don’t want to import? Just append a minus sign - to their names for Framer to ignore them. This also works for complete artboards.

Layer flattening

A large Sketch file with many nested groups will turn into… a large Framer project with many nested layers.

Appending an asterisk (*) to the name of a group or artboard will flatten it into a single layer.

Overriding default image formats

Each group in your Sketch file will be imported as a PNG image. If the group does not contain any transparency, it’ll be pulled in as a JPG (which are usually smaller in file size).

But you can override this. Add .jpg or .png to a group’s name to set the desired image format.

PDF layers

You can also add .pdf to a group’s name to import it as a PDF file. PDFs are vector-based so by adding this extension the layer becomes infinitely scalable.

(Unfortunately, it’s not yet possible to import SVG layers, you’ll still have to export them manually and drag them into Framer.)

The minus - (exclude layer) and asterisk * (flatten layer) can be combined with the image format extensions by placing them at the end. Note that all extensions are trimmed from the layer names after import.

In the project on the next page, I let the user zoom in on the iOS app icons.

layer.states.zoomedin =
    width: layer.width * 4.5
    height: layer.height * 4.5

(The project is imported from this Sketch file, for which you might need to install Apple’s SF fonts.)

In the Sketch file, you’ll see that the icons are exported as PDFs, the ‘Status Bar’ group is flattened, and the ‘Page Indicators’ group is hidden.

Remember that you’ll have to set a vector layer’s width and height to take advantage of the resolution independence. Changing scale will just quickly resize a layer without adjusting its resolution.

Setting width and height can be slower, though (notice the small redraw delay in the example). So sometimes it’s good to set a layer to the biggest size you plan to use it onscreen and give it a smaller initial scale. This way it will animate fast and look crisp.

Artboards

When a Sketch file has different artboards, they will all be imported with their relative positions preserved. (E.g. if you placed the second artboard 100 points from the first artboard then that spacing will remain after importing.)

Every artboard also becomes a parent layer, with all the groups in it as children.

Adding artboards to a ScrollComponent

As I mentioned, the spacing between artboards will be preserved, so you might have to correct some x or y properties.

Take the import from this Sketch file as an example:

# Wrapping ‘App_Icons_1’ in a ScrollComponent
scrollComp = ScrollComponent.wrap sketch.App_Icons_1
# Adding the second artboard
sketch.Home_2.parent = scrollComp.content
# (which places it 100 points too much to the right)

There’s a 100-point gap between the artboards in Sketch, which translates to 100 points of space between the layers in Framer.

Correcting the second artboard’s x position solves this.

# Correcting the second artboard’s position
sketch.Home_2.x = Screen.width
# Adding the second artboard
sketch.Home_2.parent = scrollComp.content

(Another solution would be to reposition the artboard in Sketch.)

Adding artboards to a PageComponent

You don’t need to worry about positioning when using a PageComponent, though.

The moment you use addPage() to add an artboard (or any other layer), the x and y positions will be corrected.

(This example uses the same Sketch file.)

# Wrapping ‘App_Icons_1’ in a PageComponent
pageComp = PageComponent.wrap sketch.App_Icons_1
# Adding the second artboard as a page
pageComp.addPage sketch.Home_2

Note that I made positioning easier by adding an almost invisible rectangle (very thin border with 1% opacity) to both groups of icons. Without this background, the layers with the app icons would not have been conveniently placed at x = 0, y = 0.

Scale control

When designing for different devices, with different high-density resolutions, it can be a good idea to design everything at @1x resolution. When importing, you can then select the correct retina resolution for the device.

Here’s an example: this Sketch file is created at 1x resolution. The home screen in it is 375 by 667 points.

Importing at @2x will give it the correct resolution for an iPhone 8.

But the same Sketch file can be used for the iPhone 8 plus with @3x retina resolution.

Aside from having 3x resolution, the iPhone 8 plus’ screen is also larger (in points), so I reordered the app icons and resized the background. See the Framer project for more details.

Thanks to Meng To for his vector-based iOS UI kit.

Wrapping masked content

You can add several screens of content to a ScrollComponent by masking the content in Sketch. Take this Sketch file, for example:

After importing (at @1.5x) we can wrap() the Feed group into a ScrollComponent.

# Wrapping the Feed layer
feed = ScrollComponent.wrap sketch.Feed
# Limiting scrolling to only vertically
feed.scrollHorizontal = no

The ScrollComponent inherited the size and position of the Feed layer, and all that layer’s children became content, including the parts that were obscured by masking.

Thanks to Thanasis Rig for his Material Dribbble Client UI.