jenbennings / sketch-framer

A Sketch plugin to easily export your mockups to FramerJS

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.

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. Copy them to ~/Library/Application Support/sketch/Plugins (if you're using the App Store version of Sketch, you need to copy them to ~/Library/Containers/com.bohemiancoding.sketch/Data/Library/Application Support/sketch/Plugins)

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

• Use only one artboard, or no artboards.
• Make sure the top left of all your contents align to (0,0)
• Use unique names for each group in your document to avoid conflicts.
• Grouping everything in your document in a main "phone" group might help.
• 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 don't work. Instead of making a native mask, keep the mask rectangle as a regular object, and add "maskframe" to its name. Sketch-Framer will define a mask for a group, if it has a direct child whose name includes "maskframe".

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

• Masks currently don't work. Workaround: flatten the group that includes a mask (by appending * to its name), or use the mask solution described above.

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!