Dynamic prototypes with Sketch and Framer

5 min readJul 8, 2017

I’ve made a few desktop prototypes this half that have slightly complex and dynamic interactions. At first I struggled to figure out how to make these prototypes and still use the Sketch 👉 Framer workflow. Over time, I’ve developed some tips, techniques, and best practices. Hopefully, you’ll find this helpful!

Clean up your layer names

I’m probably like most people when it comes to organizing my Sketch files…I don’t really do it, at least not while I’m focused on iterating through my design. Although when it comes time to import your Sketch file into Framer, it pays to be well organized. Framer turns all your Sketch layers into Framer layers, which have certain limits when it comes to naming:

Framer layers must have unique names
Framer layer names cannot have spaces
Minus or Asterisks at the end of the layer name have special significance for Framer (more on this later)

I generally make a new page in my Sketch file, name it “Framer” which I’ll import into Framer. If I were to import my working layers, accessing the resulting Framer layers would suck:

Some time spent on organization makes all the difference:

You’ll notice that I use “camelcase” for my Framer layer names. This is generally because the Javascript community uses this format convention for naming things. So, I’ll rename a layer called “Group 42” with a more descriptive name, formatted in camelcase:saveFileModal

Framer will automatically rename some of your layers when layer names are not unique or contain spaces. In the case of the former, Framer will append the layer name with a number. For the latter, spaces will be replaced by underscores.

For quickly renaming a bunch of layers at a time (even giving them unique names), check out the Rename It plugin.

Rename the Sketch object

When you import a Sketch file into Framer, your layers all become properties of an object. You’ve noticed that on import, a line is added to the top of your Framer file:

sketch = Framer.Importer.load("imported/17_0515 mocks@1x")

When you want access one of your Sketch layers in Framer, you’ll type something like sketch.saveFileModal. I like to rename the sketch object to just s. It saves you from typing 5 additional letters over and over in your prototype.

s.saveFileModal.opacity = 0
s.saveFileModal.state.show = 
    opacity: 1
  
s.saveFileButton.onClick ->
    s.saveFileModal.animate 'show'

Your fingers will thank you.

Artboard management

The left- and top-most artboard or object will become the origin for your Sketch import. I like to make this be the “main” artboard; since I’m usually designing for desktop, this artboard represents the browser window. I’ll call this something unambiguous like main.

Keeping organized with the FlowComponent

Framer doesn’t really care if you have additional artboards and objects to the right and below that main artboard. This can be really useful when paired with the FlowComponent. For instance, each modal in your prototype could be its own artboard (with a descriptive, camelcased name) which you can swap in and out.

s.saveFileButton.onClick ->
  flow.showOverlayCenter s.saveFileModal

Keep it minimal

Artboards and elements in your Framer import should have the least amount of conditional UI elements as possible. As mentioned above, don’t have a ton of modals all stacked up on your main artboard…keep them off to the side on their own artboards, one for each modal. I find that this saves me time when I invariably need to go back to Sketch to tweak then reimport the file.

Flatten everything you can

Appending a layer or artboard name in Sketch with a * will flatten all child groups into the parent when imported. This can really help de-clutter your Sketch object in Framer, making the left-hand layer tree easier to read, and code autocomplete more useful. Just be sure you’d don’t flatten down a layer you’ll later need to access, like a button.

Artboards in dynamic prototypes

As your prototype gets more and more interactive and dynamic, sometimes it seems impossible to use static Sketch imports to full represent the range of states your UI elements might have. For example, this prototype is simulates the experience of dragging a data layer pill into a table:

Each of those pills is an imported Sketch layer. The column of pills is randomly generated (and thus different) every time the prototype is loaded. The order of pills in the table is determined by the order the prototype tester dragged them in. What’s going on here?

Artboards as background images

Just like a * at the end of a layer name will flatten it when imported into Framer, a — will tell Framer to skip the layer altogether. When I first learned about this, it seemed pretty useless (especially given that I make that separate page for Framer in my Sketch file). Then I realized that the skipped layers could be exported from Sketch as images, then used in my prototype as a layer background image…

pill.image = 'images/pills/pill#{type}-.png'

Classes and background images: a dynamic duo

For the example above to work, I have a bunch of Sketch artboards called pillBoolean-, pillString-, etc. (don’t forget about that minus). Framer skips these artboards on import, but I export them from Sketch as PNGs: pillBoolean-.png, pillString-.png, and so on.

In the case of this prototype, I made a class called Pill, that would use the proper background image based on the user defined type. For the initial render, the randomChoice utility shuffled the pill list:

for pill in [0..20]
    @pill = new Pill
        type: Utils.RandomChoice([
          'String'
          'Number'
          'Boolean'
          'DateTime'
        ])
        ...

When the pill was dragged into the table, I used the same technique to add a Layer with a background image of the column, complete with pill in the header and data:

@pill.onDragStop ->
    @column = new PillColumn
        type: @type // This is the same as @pill.type
        ...

Couple more things

Code folding

Staying organized in the Framer Studio environment can be a little difficult since you’re required to write your entire prototype in a single file. To deal with this, Framer Studio has a neat little code folding feature. To create a code fold, highlight a section of code and press ⌘ + enter. The highlighted code will collapse into the first line of the block. If you double-click or press ⌘ + enter, you’ll jump into the folded code.

Quickly re-import from Sketch

Last but not least, I frequently have to go back to Sketch and edit the import layers, usually because I’ve been over-zealous in my layer flattening. In this case, Sketch files can be quickly re-imported by pressing ⌘ + shift + i. The re-import seems to be significantly faster that the initial import, and the hotkey combo makes it even quicker!

Wrap up

There’s probably more, but we’re probably at the 80/20 with this article. Do you have any other great tips, techniques, or best practices? Comment below or send me a message!

For the pills example, here’s the Sketch file, and the Framer prototype.