The right 🛠s for the job — Framer

In this companion post to the 360iDev talk, I put Framer to test in the Octo Challenge. Find out how this design tool stacks up.

There are a lot less artboards in this file. You dont need several artboards to show different states, you can make one artboard and modify it’s state in code!

That first time you step off the plane in Tokyo it feels like a cleaner, more orderly, near future…Framer has that vibe about it.

If you are coming from Sketch, right off the bat Framer feels pretty familiar, with the exception of the vector toolbar at the top being replaced with a little segmented control to switch between design and code. The navigation shortcuts are the same, the alignment menu is where you would expect, however there are a few key differences.

Grouping? Where we are going you don’t need groups! Framer is pretty darn smart, and will automatically nest elements for you, neat! The closest thing you can do to grouping is select a few elements and add a parent. Unlike sketch which lists all of the artboards and their underlying layers in the panel on the right, Framer will only list the layers for the currently selected artboard. As someone who has been lost in the layer panel in Sketch while working on large projects, it gives another interesting look at how to manage that information.

The autolayout defaults are very good, and will get you there right out of the box most of the time.

Framer has autolayout built right in, and in most cases, it made good default decisions about how to pin and stretch the components on the screen to fill the additional space.

Framer doesn’t have all of the fancy vector editing tools that Sketch and Figma has. It is really solid at making rectangles and ovals, and letting you tweak the bits that you would want to: rounded corners, opacity, fills, and clipping. Vectors do play nice when you drag and drop them in, so as long as you can get them somewhere else, you are good to go.

So, about that code tab. It’s awesome! To be able to access one of your UI elements in code, all you have to do is mouse over it and click the circle on the right side of the list. This will add a new target that you can reference in code tab.

In this example, I have a target to this artboard so I can navigate to it by tapping on a button. I also wire up actions for the favorite and order buttons.

Switching over, you have your list of UI elements on the left, with your targets highlighted in white. On the right you have your editor. CoffeeScript is the language of choice, and it comes with the added benefit of exposing your designers to code. The autocomplete is solid, and so are their docs, I was able to wire things up after just a few minutes.

The targets are highlighted on the left. The code for the favorite and order buttons is center, and a live preview that you can interact with is on the right.

Between the animations, states, and transitions you get a feel for what your design would feel like as a real app. With the built-in Framer Cloud you get a link that you can share. If you like, you can check out Octo for yourself. All of the actions that you have coded will work right from the browser. With the Framer Mirror app you can load you can view and download the prototypes form Framer Cloud and tap around.

The problems that you are going to solve with Framer are different than what you would solve with Sketch. With Sketch you can create pixel perfect screens and assets that you can put into your apps; but unless you pull in another app, you can’t see them in action. With Framer, you can really see how that design is going to feel in your hands, and you can handle the pixel level details in some other tool.

Debugging

All of the fancy interactions that you can make with Framer also means that sometimes you will have to do a bit of debugging, here are a few of the bumps I hit, and how I got around them.

Uh oh…

When I was switching over to work on wiring up the prototype in the code view, I noticed that something was afoot. The preview window was black, and in the footer bar it said “SyntaxError Unexpected EOF.” Uh oh. There is a Safari inspector in the app that can be accessed by hitting the target icon in the bottom left of the window. After not spotting the issue there, I ran my CoffeeScript by a linter to see if there was anything out of place, weird indenting or line endings that could be messing things up. Nothing there. So I removed the code, but that wasn’t the fix.

I Googled a bit but didn’t find anything that looked like what I was running into. I reinstalled Framer, but the error was still there. So I created a new Framer file and started copying over elements, switching to the code tab after every paste to see if it was something in one of the artboards that was causing the error. Sure enough, when I got to the grilled octopus recipe screen I hit a snag. I was not able to pinpoint the exact character that was causing the issue, but I started deleting the recipe directions that I had copied from the web, and after one of them was gone, so was the error. I simply retyped that sentence and all was well. (Update: the new version, v100 has a fix for this issue)

In another case, a few of the fonts were not displaying in the Framer Mirror app. If you open up the framer folder in your favorite editor, copy the fonts in, and add some CSS so that the when the page is running on your phone it knows where to grab the font.

In the preview and in the mirror app the last element in the list would overlap, but everything looked fine in the design view. Let’s see if the folks on the Facebook group have seen this before.

When running the prototype on my phone, there was a display error that I was unable to sort out. Everything looked fine on the desktop app, but one list items was overlapping the line above it. I bumped them around a bit, but I was unable to get them to display properly on the phone.

I had joined the Framer Facebook group, and since community was something I was wanting to evaluate for my talk, I figured I would put my question on there and see what happens.

I got a reply back in 14 minutes, at 1am, on a school night.

I was amazed. It was late when I posted the question, and just a few minutes later I received a notification that someone had answered me. Sure enough, I had an autolayout constraint out of place, and that was causing my issue.

Overall I was very impressed with Framer. I am looking forward to giving it a more thorough run through the paces on a future project.

Links

Framer has a free 14 day trial, check it out. They have a lot of great tutorials on their website to help you get started, as well as a UI Kit and downloadable iOS/Android patterns.

List of Framer Facebook groups and meetups.

Video tutorials: Framer Crash Course and Framercasts.

Framerco.de lots of sweet examples of what you can do with Framer.

Another post with some really neat examples, some of which I used in my prototype.

Download the Octo Framer file here.

Check out Octo in Framer Cloud.

Other posts in this series

Intro
Sketch
InVision
Figma
Keynote
Framer — you are here
Which tool(s) should I use?