A tour of the Framer Classic interface

Using Framer Classic is straightforward: you create your screens in the Design tab, and then bring them to life in the Code tab.

Or you import an existing design from Sketch, Figma or Photoshop and jump straight into Code.

The Design tab

Type ⌘1 to go to Design, where ? creativity happens. Read more about Design in the next chapter.

The Code tab

Type ⌘2 to go to Code, where the ✨ magic happens.

Autocomplete

Framer’s editor has Autocomplete: type the first letters of the thing you’re looking for and select it from the list. It’s context-aware, so will show you the property or function you probably need.

Note that there’s often a short description of the selected suggestion at the bottom (“Create a color object.”). The button next to it will open a broader explanation in the docs.

When there’s something wrong with the code, an error will appear at the bottom.

Click on the error message to jump to the typo and have Autocomplete show possible options.

(The correct name of the layer I was looking for was camel-cased: blueSquare, with a capital ‘S’.)

Important: You can’t leave an error be and think “I’ll deal with that later.” Always get rid of it right away, because everything written below the line with the error will be ignored. (An error halts the execution of code. For this reason, there will always appear only one error: the first one the editor encountered.)

Auto-Code menu

In the top left are the Auto-Code buttons for adding an ‘Animation,’ ‘State’ or ‘Event’ to your layers.

Check out the fourth button, ‘Snippet’ has example code for all the Components, but also code for creating a Text Layer, changing the screen color, and much more. And it lets you add interface sounds to your prototype.

You can add your own bits of code to this menu.

Import button

Bring your existing design into Framer. More details are in the Importing from Sketch, Figma, or Photoshop chapter.

Docs button

This one opens the Framer documentation in a new window. The same docs are also on the Framer Classic website.

Inspector button

Will open the Web Inspector. (The Preview Window is a WebKit browser window).

Note: Just like in Safari, you can right-click a layer in the Preview Window and select ‘Inspect Element’ to see its details in the Web Inspector.

Preview button

In the popover, you’ll find the link for viewing your prototype in a browser, and it contains the access code for viewing it on other devices. More in Previewing your prototype.

Cloud button

Framer Cloud lets you keep many projects in one central place, and each project can have different versions. Check Framer’s Collaborate Guide for more info.

Tips:

• Click the top right menu with your name to go straight to your Dashboard (without having to log in with the Magic Link).
• Uploading a project to Cloud will automatically save it first.
• Don’t worry about older versions of the Framer Library still residing in your project folder; they will not be uploaded.

Support button

Here you’ll find an Intercom chat window (as you might also see on some websites) to talk to the support people at Framer.

The Preview Window

You can select the desired device from the menu at the top of this window. Several device frames are included: phones, tablets, smartwatches, even a TV. Handheld devices can be ⇧⌘R rotated.

There’s a Canvas mode for when you don’t need a device frame (when prototyping a website, for instance). It has a white background instead of the default black, and layers will always appear at their actual pixel size.

Pro Tip: Select Toggle Device (in the hamburger menu, or ⇧⌘D) to see the device frame. In this mode, you can also pick the color of the device, toggle between different hands, and zoom in or out.

More device options

• Don’t see the device you need? You can bake your own, check the ‘Device > Customize’ snippet.
• Framer used to have a Mac desktop with browser window as one of the options. There’s a better solution now: Jonas Treub’s WindowComponent lets you create different (Mac) windows, which also makes it a great tool for prototyping desktop software.

Undocking the window

Do you have multiple screens? You can detach the Preview Window and drag it to a different screen. Undocking the window also makes it possible to work in Design and instantly see the result of your changes. (Updates to the preview will happen when you ⌘S save.)

It’s also a way to get rid of the Preview Window when you’re previewing on a connected device or browser anyway.

Alternatively, you can keep the Preview Window in the background and use ⌘` (that’s a backtick) to toggle between code (or design) and preview.

Multi-Touch simulation

When working with pinchable layers, you can hold down ⌥ to have a second cursor appear. This way you can pinch and rotate like you would on a touch device.

To drag a layer while simultaneously ‘pinching’ it: hold down ⌘.

(These also work when viewing a prototype in a web browser.)

Auto Refresh

The Preview Window will update while you type, several times a second. Take a look at ‘View > Auto Refresh’ to change this interval.

You can even switch Auto Refresh off and then simply ⌘S save your project every time you want to see the result of your changes (or type ⌘R to reload).

The Auto Refresh setting you picked will be saved together with your project.

Present mode

Click the green dot at the top of the Preview Window (or type ⇧⌘F) to switch to fullscreen mode. This presentation mode is also handy for recording a screencast or animated gif. Press esc to exit.

The Layer Panel

The Layer Panel on the left is like the layers list in Sketch or the layer panel in Photoshop.

All the layers will appear here, arranged by their stacking order. More recently created layers will appear at the top of the list. Layers that are higher up can cover lower-placed ones in the Preview Window.

The layer hierarchy is also visible: child layers are shown underneath their parent layer.

Hover over a layer name to see its details (size and position) appear in the Preview Window.

You can also hold down ⌘ when hovering over layers in the Preview Window to see these details.

Auto-Code

When you create a ⇧⌘N new layer you’ll see the Layer Panel be replaced by the Properties Panel.

Newly (in Code) created layers are in this edit mode by default, and you can edit existing Code layers by clicking their handle.

In edit mode, you can set a layer’s most common properties by entering values in the Properties Panel. You can also drag the layer to change its position, or use the handles to change its dimensions (see Direct manipulation below). Click anywhere in the Editor to leave edit mode.

Note that Auto-Code works for one layer at a time: the layer that’s in edit mode. And it only works for changing the properties of layers created in Code.

Auto-Code generates the code for you (hence the name), but you can just as well change the generated code, correct it, or simply delete the added properties to get back to default values.

Also for animations and states

Auto-Code not only works with new Layer code but can also be used to set the properties of animations or states. (These bits of code will have a handle as well.) And this does work with all layers, including layers made in Design or those imported from Sketch, Figma or Photoshop.

When putting a layer.animate block in edit mode, you’ll see an extra tab appear in the Properties Panel. Click it to set animation options like time, curve, etc. When this tab is active, you’ll see buttons appear in the Preview Window to replay the animation, have it play continuously, or see it slowed down.

Animation Objects don’t have handles, but you can create a standard Layer Animation, tweak it until it looks good, and then make it an Animation Object.

Pro tip: Type ⌘E when your cursor is somewhere in the layer’s code block to switch to edit mode. Naturally, this also works with layer.animate or layer.states blocks.

Direct manipulation

A layer in edit mode can be moved and resized, but you can also make other changes by using a few modifier keys.

Instead of dragging you can also move a layer more precisely (point by point) with the arrow keys. Hold down ⇧ to move in 10 point increments.

Drag the small handle in the top left corner to change a layer’s border radius.

To rotate, hold the cursor near a handle until you see the rotate cursor.

Code folding

When your Framer projects get bigger and more complicated (probably soon) you’ll want to organize your code to have a better overview.

You can put code that belongs together in a fold. You can, for instance, create your layers in one fold, put animations or states in a second one, and reserve a third for your events.

Or you can organize different parts of your interface in their respective folds. You’ll find a way that works best for you. Code folds can be as big or as small as you want.

To create a fold, select some code and choose ‘Fold’ in the right-click menu, or use the shortcut: ⌘↩.

When right-clicking a fold, you’ll see that you can also ⌘⎋ to ‘Unfold’ it.

Entering a fold works as you would expect: just double-click it.

These two are actually the only shortcuts you need to remember:

• ⌘↩ creates a code fold, but also lets you enter one
• ⌘⎋ lets you leave a code fold, but also unfolds an existing one

By selecting a block of code and then typing ⌘↩ twice, you’ll create a code fold… and directly jump into it.

Conversely, typing ⌘⎋ twice inside a fold will have you leave it… and unfold its contents back into the main code.

When working with many folds, it’s good to know that you can cycle through them with ⇧⌘] and ⇧⌘[. (When not yet inside a fold they’ll open the first or last one.)

Snippets

You know you can add bits of example code to your project by selecting them from the Snippet menu.

What you might not have noticed is that you can add your personal snippets to the same menu. Something to remember when you find yourself opening the same projects, again and again, to copy/paste tidbits of code.

We now have Text Layers, but now and then I still use common layers for text. (Because I can use inline CSS styling with those.).

I call them HTML layers, and made this snippet that gives me a base to start from:

htmlLayer = new Layer
    width: 400
    height: 100
    x: 100
    y: 100
#   backgroundColor: null
    color: "Black"
    html: "The quick brown fox jumps over the lazy dog."
    style:
        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
#       fontFamily: "Menlo, Monaco, Courier, monospace"
#       fontFamily: "TimesNewRoman, 'Times New Roman', Times, serif"
#       fontWeight: 300
#       fontSize: "40px"
#       lineHeight: "40px"
#       fontStyle: "italic"
#       textAlign: "center"
#       textDecoration: "underline"
#       textTransform: "uppercase"
#       letterSpacing: "1px"
#       paddingLeft: "10px"
#       paddingTop: "10px"

Most of the style properties are commented out, so I can uncomment the ones I need and delete the others.

And when the layer has the right size and position, I make it transparent by uncommenting the backgroundColor line.

How to add your own snippets

1. Prepare and test the code you want to turn into a snippet.
2. Select ‘Show Snippets Folder…’ from the menu. It’ll open a folder in the Finder that contains Example.coffee with the (Hello World) example snippet.
3. Duplicate Example.coffee and give it the name you would like for your snippet, e.g., HTML Layer.coffee.
4. Open the new file in a text editor. (TextEdit works, but you’ll have to drag the file on top of it.)

The .coffee file will contain these lines:

plugin.run = (contents, options) ->
    """
#{contents}
# Hello world!
    """

1. Select the code for your snippet in Framer. Copy.
2. Paste the code in the place of # Hello world! in the .coffee file (between #{contents} and """).
3. Save the .coffee file.
4. That’s it. Your newly minted snippet will instantly appear in the menu.

Pro tip: Add folders to the ‘Snippets’ folder to create submenus.

Facebook Sound Kit

A bit hidden in the same ‘Snippet’ menu is a collection of interface sounds provided by Facebook: Facebook Sound Kit

When you select one of the sounds you’ll get this kind of snippet:

sound = new Audio("sounds/Button1.m4a")
sound.play()

The first line loads the sound file (which is now copied to your project folder) into an Audio object named sound. The second line plays the sound.

You can play a sound, for instance, when the user taps a button:

button.onTap ->
    sound = new Audio("sounds/Button1.m4a")
    sound.play()

… or when an animation starts:

layer.onAnimationStart ->
    sound = new Audio("sounds/Alert3.m4a")
    sound.play()

What is used in the background is an HTML5 audio element, so you can e.g. change the playback volume to 50%:

sound = new Audio("sounds/Alert3.m4a")
sound.volume = 0.5
sound.play()

(The default being 1: 100%)

… or make a sound repeat indefinitely:

sound = new Audio("sounds/Alert3.m4a")
sound.loop = yes
sound.play()

… after which you might want to stop the playback:

Utils.delay 5, ->
    sound.pause()

Keep in mind that when you load a bunch of sounds at the beginning of your prototype (to use them in different places, or more than once), that you should change their default name (sound) to something different.

sound_1 = new Audio("sounds/Alert3.m4a")
sound_2 = new Audio("sounds/Alert4.m4a")

button_A.onTap ->
    sound_1.play()
button_B.onTap ->
    sound_1.play()
button_C.onTap ->
    sound_2.play()

Using other sound files

You can play other audio files as well. Just dragging an audio file to the editor will create similar code, and will also copy the file to your project folder.

In the Hyperlapse prototype, for instance, I dragged in a WAV file.

music_1 = new Audio("sounds/music_1.wav")
music_1.play()

(All audio files are copied to the same sounds folder inside your project folder.)