Prototyping with Framer: our take on the v90 update
Kjelle UX Designer
3 Jun 2017 · 3 min read
It’s not a secret that we like Framer for rapid prototyping! We’ve written about the tool before, and we’re quite intrigued by its latest big update…
Framer, a designer’s match made in heaven, has just updated to version 90 . Over the past two years, updates have been flooding the gates, all leading up to this Big One. Framer is stepping up its game and becoming a one-stop-shop for rapid prototyping.
So what’s new?
As we've written before , Framer always has been a tool to make your designs come to life. With v90, you can now start your design in Framer, and not necessarily in Sketch or Figma.
The new Design window actually reminds us of what Xcode tries to accomplish. It’s the default window where you can start drawing artboards (!) and UI elements. Later in your process, you can add targets to specific elements, to add code to them. This quick and visual way to start your interactions, instead of having to work directly in code, makes it much easier to understand from a designer point of view.
The new Framer finally feels less like a front-ender’s tool, and more of an actual design tool.
No doubt this will attract a whole new audience of designers who want to start high-fidelity prototyping.
So in short: the design view makes it much faster to start prototyping short ideas. You can quickly draw rudimentary blocks of content and let them interact with each other. The new size simulation preview quickly shows you what the block’s resizing behaviour will look like. This is a major improvement if you want to make a device-independent prototype!
And yes, you can still import your Sketch/Figma designs or even copy paste them onto your artboards.
Design. Code. Collaborate.
Framer started out as a code app to create interactive designs. This in contrast to other tools out there that focussed entirely on the design aspect. In our opinion, none of those tools really feel like a flexible prototyping app, but rather like a slimmed-down version of Sketch that allows basic interactions.
By focusing on code first, Framer quickly became the most solid tool to create realistic and high-fidelity prototypes. In previous updates, Framer Cloud was introduced to make collaborations much easier. And by finally adding the current (expanded) design view, they’ve come full circle and are basically in another league… Time for others to make their move?
We could argue about whether this could actually fully replace a major design tool, but I don’t think that’s the point. This tool wasn’t made to draw paths and icons, or do bitmap manipulations. It was made to dramatically speed up your prototyping process – and now, if you’re so inclined, you can do so without even leaving the app.
Oh, and there are some other improvements!
- Design is now handled in Points instead of Pixels (!!!)
- FlowComponent now auto-guesses your header and footer.
- Event coordinates can now be provided within the current context
- Border per side and Corner radius per corner.
- You can use inset and drop shadows with layer.shadowType.
- PageComponent.addPage now places the page at a sensible location by default.
- There’s a new automatic hierarchy (really handy).
It’s even more awesome than previous versions, eliminating the Sketch/Figma dependency. You really should try it, if you haven’t already. We’ll be researching how best to apply the tool in our design workflows!