Framer for Dummies

Jumping into Framer without much development experience? I’ve been there, here’s my step-by-step guide.

You’re no dummy. But, the point of this article is to lay out some tips that may seem obvious to the pros but aren’t obvious for those just getting started with Framer. As part of my design apprenticeship, I have been tasked with learning Framer, a tool used for designing interactive prototypes. I am loving Framer for now, but at first it was seriously intimidating. I’m still challenged by Framer and have so much to learn.

My background in coding, when beginning to learn Framer, was basically taking a single course in JavaScript. I am far from a developer and many of the nuances of Framer that may seem obvious to developers, are not so obvious for those of us with little development experience. Framer is awesome for bridging the gap between design and development, so designers and developers alike feel free to comment away with your own tips or experiences you encountered when learning Framer.

Before you start

Get the Framer 14 day free trial here. If you’re a student, email Framer with proof of enrollment for the 50% off student discount before you purchase.

If you’re already serious about learning Framer Studio, it is a good idea to get a copy of the Framer Book. Worth the investment.

Also, take a look at the Framer Docs and Getting Started Guide, this will give you a feel for Framer’s capabilities and the CoffeeScript language Framer uses.

Watch Framer’s Intro Tutorial on Youtube.

Sketch Import

What’s awesome about Framer is that you can import designs directly from Sketch, Figma, or Photoshop. I for one, only ever import from Sketch.

1. Group all of your Sketch layers! Command G away! Each object must be in a group in order for it to show up in your Sketch import.
2. Name all of the layers you just grouped. Give each layer a name that reflects what the object is or does in the design. Don’t include spaces, they will just be converted to underscores later. Also, it is a good idea to use camel case, or stick to some uniformity (like all lowercase) when naming your layers. This will make for faster coding.
3. Oftentimes, I run into a problem where I change something with the Sketch file and want to quickly sync the update with Framer. When this happens, do not re-click the “Import” button, simply use the keystroke Command + Shift + I to seamlessly re-import the Sketch file. This will save you so much time.
4. Keep in mind the structure of the Sketch import within Framer. The Sketch import is contained in a large group, which holds the same name as whatever your artboard was named in Sketch. If you add additional layers in Framer that aren’t part of the Sketch file, they will be in their own separate group, this means that your newly added Framer layers will not be called sketch.layerName they will just be called layerName! (This may be obvious, but to me it wasn’t at first, lol)
5. When possible, use Sketch’s standard device dimensions for designing. It will make for a more smooth transition to Framer. (But there are ways to work around, like number #1 of the next section) You can also take advantage of the 2x import setting and fit retina displayed designs onto your devices in Framer.

More tips!

1. Screen.width and Screen.height are super helpful! Set layerName.height = Screen.height to fit your layer’s height to the screen’s height, and the same for width.
2. Read the errors. Seems simple enough but sometimes, some stubborn instinct inside of you will ignore the meaning behind any errors that pop up and it will end up taking longer to fix than necessary.
3. Use the Cloud feature to upload your designs and share them with others. You can also add the Framer Preview app to your phone so that you can view your prototypes on mobile.
4. Join the Framer Facebook group, where you can ask questions, find local meetups, and search for topics you want to learn more about.
5. For inspiration, check out http://framerco.de/ to see amazing projects!
6. Stick with it. CoffeeScript is a language just like any other, and needs to be practiced. I recommend challenging yourself daily with DailyFramer.
7. Don’t be intimidated. You are making a prototype, not a fully functioning app. My mistake at the beginning was trying to make sure every element of my design was fully functional. I wanted my text fields to actually be able to be typed in and so forth. I got way too caught up in the details and overwhelmed myself. Remind yourself that working with Framer is more about prototyping the interactions and feel of the design.

Happy prototyping!

Comment below your tips or challenges in learning Framer.