Skip to content

patrickkeenan/sketch-framer

 
 

Repository files navigation

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:

Directory structure

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

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

Exported files

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!

About

A Sketch plugin to easily export your mockups to FramerJS

Resources

License

Stars

Watchers

Forks

Packages

No packages published