Sketch Framer

A plugin to export Sketch.app documents into FramerJS to make interactive prototypes.

Common questions

• Only works with Sketch Beta right now because the App Store version is sandboxed. Download Sketch Beta here.
• Make sure you copy both files as specified below.

Sketch 3 Support

We're hard at work updating the plugin for Sketch 3! You can use the plugin with a few caveats:

• Artboards aren't supported yet. Please ungroup your artboard and have elements directly on the canvas. We suggest you group everything at top level, and move the parent group to 0,0 position.
• Symbols aren't supported. We suggest making a copy of your file, going to Manage Symbols and deleting the symbols, which will effectively detach all the symbol layers from the symbol (but keep them on the canvas).

Installation

1. Download the repository using this link
2. Grab these two files from the ZIP: Export to Framer.sketchplugin and sketch-framer-config.js
3. In Sketch 3, select Plugins > Reveal Plugins Folder... from the menu bar, and put the two files in this folder.

This is what your plugins folder should look like after you copy them:

Then you'll see the plugin in the plugins menu:

Usage

1. Create your layered Sketch file, and save it somewhere
2. Run the plugin from the plugins menu
3. The framer prototype will be generated in a folder right next to where the Sketch file is saved

Tips

• Don't use artboards (Known bug, trying to fix it)
• Group everything in your document in a main "Phone" group, and align it to (0,0)
• Use unique names for each group in your document to avoid conflicts
• Every group in your document will become a Framer view

Special operations

• Flatten To have a group flattened so its child groups don't export individually, append * to its name. Example: Card*. Flattening complex groups will improve performance.
• Shape/text layers To export a shape or a text layer as a view, put it in a group, or append + to its name. Otherwise they will export as a background image.
• Ignore To ignore a layer, append - to its name. Example: Ignored-
• Hidden layers Hidden layers in Sketch will be exported as hidden layers in Framer. To show the layer in framer, try view.visible = true
• Masks Native masks now work! You can also use Scroll in the name of a group that includes a mask to make that group scrollable.

Configuration

You can customize the exported files (index.html, app.js) by tweaking sketch-framer-config.js. The most common thing you might want to do is import a library file and include it in all your projects.

Known bugs

• Very complicated files may cause the plugin to crash, or result in a sluggish Framer mockup. Flatten groups (by appending * to their names or using Sketch 3's Layer > Flatten Selection to Bitmap command) where you don't need to access the contents individually.
• Only rectangular masks work. If you're masking with an odd shape, try flattening the group (by appending * to its name)
• Effects that expand beyond the boundaries of a layer (eg. drop shadows, outside borders) cause minor positioning bugs. Try flattening these layers to bitmaps.
• Avoid background blur, it causes bugs in positioning.

Help us improve Sketch Framer

To propose changes, fork the repository and submit a pull request!

Questions?

Reach out to @bomberstudios or @gem_ray on Twitter!