Tips for Sketch
In this page:
- Top left stays top left
- Hidden becomes invisible
- Excluding groups or artboards
- Layer flattening
- Overriding default image formats
- 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.
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
.png to a group’s name to set the desired image format.
You can also add
(Unfortunately, it’s not yet possible to import SVG layers, you’ll still have to export them manually and drag them into Framer.)
- (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
height to take advantage of the resolution independence. Changing
scale will just quickly resize a layer without adjusting its resolution.
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.
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
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
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.
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
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.