Published on | Prototyping: From UX to Front End — Medium AM Imogie

Framer released an unexpected update yesterday, and it was the highlight of my day. True story.

First things first, rest in peace app switching, for real. This I believe was the the core of the update, Design & Code (prototype) in one interface. Already familiar with the code interface, I had to check out the new design interface first, afterall I’m a designer.

Coming from using Sketch, my expectations were high, very high. The interface layout was not a surprise; content manager on the left, design preview (artboards) in the middle and property manager on the right. Framer Design let’s you do the usual stuff, add artboards, shapes and text and manipulate them however you want.

Design Interface

Zooming

The artboarding zooming however still needs some work. I found it difficult placing that single artboard to fill the vertical space. Mundane tasks like zooming and panning around should not be this tedious 😞.

Zooming

The Icon Manager

The icon manager is pretty cool, Framer is trying to keep you in that interface for as long as possible. Can’t believe I may no longer be needing Icon Jar 😒. The icon manager is filled with Material Design Icons so one thing’s still missing, being able to add and use icons from other icon sets.

Icon Manager

Now to the fun stuff, Design + Code

Before I begin, let me state that my expectations here were met, eventually. The terminology is quite different and I had forgotten that Framer was coming from a coding background. I expected to see stuff like ‘Group/Ungroup’ instead I saw ‘Add Parent/Delete Parent’.

Framer understands that not everything in your interface may require interaction that you’ll protoype with code and that’s a great thing. You have to select an element and ‘Create Target’ to make it available for manipulation in the code section. The reference name is also highlighted 👍🏾.

After creating targets for the necessary elements, adding states and animations is quite easy and you can always check out the documentation available in the app if you get stuck.

The Final Product

Final Thoughts

I’m super excited about what’s to come, I don’t think I want to use Framer Design all the way for a client project just yet. A few vital things are still missing, like exporting assets (very important), reusable elements and UI Kits for iOS/Material design.

I can’t wait to see what comes in the next update and I’m not done exploring it’s capabilities. The Responsive Layout design looks like fun and I’ll be playing around with that next. Well done to the Framer Team though,was definitely worth the money.

In the mean time, I’m going back home to my baby (Sketch) 💐🏃🏾.

A night with the new Framer (Design + Code + Collaborate) was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

A night with the new Framer (Design + Code + Collaborate)

Cool stuff, every week

More Articles