Unicorn Express: Two Ways of Getting Started with Framer Studio

Becoming the fabled designer+developer combo, the Unicorn, with the help of the Framer Team

So prototyping is all the rage these days. I think for the most part the developer community is well acquainted with rapid prototyping. But like any train, you have to pass through all the stations en route to your destination. When in Rome kids. When in Rome.

Please note: This is a tutorial so it may feel length if this is all stuff you’re familiar with.

Getting Started

I’m going to start at the very beginning. The very beginning from a Framer perspective. I do hope you have some Sketch experience (if not I’ll do a post on that at some point and link to it from here).

  • A Mac (with OS X obviously)
  • Sketch (the free trial is 30 days)
  • Framer* (the free trial is 8 hours, 8 hours of usage. It last a lot longer than you think.)
  • Having access to some interwebs will also help.

Yeah I know. I know. None of those are free. I’m a big fan of free and open source too. Hopefully someday I’ll get round to building or finding an open source alternative. But for now, you’ve got 8 hours.

*When ever I refer to Framer I actually mean Framer Studio.

The First Way

The first way is the Sketch way. Framer allows importing from Sketch, Figma and Photoshop. I love Figma and it deserves it’s own post. We’ll focus on the Sketch way today.

Step 1: The Interface

Put together a basic interface in sketch. We’ll be prototyping for iPhone7. Sketch has a predefined artboard for that. Hit A and select it in the side panel on the right.

Once you have your artboard up and ready start putting your interface together. Just to make things a tad easier and faster for you, I’ve uploaded the one I used. It’s my UnicornExpress folder on dropbox (two-roads-diverged-in-a-wood.sketch).

Once your interface is built we need to group our layers. Framer will only allow us to select/animate/manipulate groups. The groups in sketch will become layers in Framer Studio. So let’s do that quick (⌘ + G to group the layers). The grouping should correspond to layers that you’d want to animate.

Also, name your groups intelligently. Or don’t. It’s not like I’ll have to debug your code.

Step 2: Importing le Sketch file

Let’s open Framer quick. You’re welcome to take a break and read the Get Started guide and various tutorials. You’re good? I thought so. We soldier on.

It wasn’t very obvious to me at first but hitting that tiny plus in the bottom right hand corner will open a new Framer project.

Let’s get our Framer on

Once you have a new project open the next step is to import you Sketch file. For this two work both Sketch and Framer need be open. Import is in the top left-hand side of the Framer toolbar. After you click import you’ll get a popup like the pic below (Figma we’ll be back for you!). Apple has this thing about Retina displays and what not, so select @2x. After the import, select your device (in top right-hand side of the toolbar). iPhone 7 + Rose Gold.

And there you go. Look at that static beauty! In the middle pane you can see the name of the artboard you created and the groups you so lovingly named.

In the next step we’re gonna write a wee bit of code (if CoffeeScript can be called that). If coding is not your forte grab a cup’o tea and coaster (we’re not barbarians), and take a short break.

Step 3: I like to move it, move it

Now the great peeps at Framer have made add interaction as easy as I think humanly possible. Click on the baby small plus in the top left-hand side of the toolbar also know as the “insert button”. You should get a list of various things that you can insert. Let’s insert a click event; a click event on the massive continue button.

This will insert some code. Specifically only line 2 in the code snippet or gist below. Have give the code snippet a quick read and I’ll catch you on the other side and walk you through it. That said, I really recommend you read up on CoffeeScript at some point. I’ll just leave this here: Get Started with Programming by Framer.

Hopefully, you immediately noticed that all the lines except 1&2 were indented. I’m not entirely sure how to put this but here goes. Every indented line is “inside” the closest line above it with a smaller indent indent. So in our gist (code snippet) above:

  • lines 3, 5, and 12 are “inside” line 2;
  • lines 6,7, and 8 are “inside” line 5;
  • lines 9 and 10 are “inside” line 8;
  • line 13 is NOT “inside” line 5 because line 12 is closer to line 13 than line 5 is;
  • lines 9 and 10 are indirectly “inside” line 2, because they are inside line 8 which in turn is “inside” line 5, which is “inside” line 2.

Next, delete the line that was inserted in Framer. Now copy the gist above and paste it in Framer where the inserted line was. Done? Sweet. Save your Framer project. Click on

Step 4: Bada bing, bada boom, bada ba!

Much wow. But not too much. Like just enough wow.

The Second Way

The second way is steeped in the humble art of programming. So for you designers, I’m just going to rip the band-aid off.

Step 1: Complete the Sketch Way

We’re going to build on the Sketch way so make sure you’ve saved you progress from the Sketch Way.

Step 2: Code injection

Examine the gist below. After giving it a read let’s copy and paste the code into Framer, directly after your work from the Sketch Way.

Step 3: Aces Charles. Aces.

Save your project and click on the continue button in the prototype. You should see something like the image below.

Much wow. Perhaps even too much wow.

It’s probably pretty clear that the second way requires a lot more coding (not to be confused with alot). So why bother with it?

The primary reason is control. When we import from Sketch it converts the groups into images. We can only transform and manipulate the images to limited degree. However, if we build the elements purely using code in, we can change many more parameters using animations or other coding techniques. Another big plus is that we can also change the text on the fly (but that is left as an exercise for the reader, haha).

One significant draw back of the Second Way is that laying elements can get quite tedious (as you can see from the gist above).

I would urge you to play around with the code and see how the prototype reacts as you change things. You can learn an awful lot by tinkering with code so give it a bash.

So which way do I choose?

Hmmm. Great question.

“Two roads diverged in a wood, and I — 
I took the one less traveled by,
And that has made all the difference.” — Robert Frost

That’s all there is. There isn’t anymore.

Wait! One more thing. Give this a read: The Most Misread Poem in America, if you like to analyze poetry or broaden your mind, that is. Otherwise, as you were.

Shout Outs