FramerX First Impressions

I finally found time at the weekend to test out a new design / prototyping tool called FramerX. This quick blog post will cover my FramerX first impressions.

What’s Framer?

Framer is an interactive design tool that let’s you design UI & UX flows with typical design tools but also with code. While I’m not a very strong coder, having the ability to add an extra layer of detail could be a game changer. Imagine taking your designs and then wrapping all kinds of animations and interactions without hacking at it. I’m talking scrolling areas, side swiping, overlays, modals etc… It has huge potential not only to the industry but to my workflow.

My Workflow

My workflow at the moment starts with a pen and paper, moves to Sketch for the design and InVision for the prototyping. Let me just say, I’m really happy with my workflow. It’s served me well for a number of years but sometimes a new product comes along that makes you question how you work. What if I become obsolete and out of date, how will I work then? Learning something new is just as important as winning the next client.

Frames

 The first thing I had to adapt to was the concept of Frames. Everything needed to be created within a frame, which when you think about it is very practical for a UI designer. You can put frames inside frames and so on. These frames then can take on multiple personality’s, they have a scroll frame where you can insert a feed inside your main view without having to design one long page. You can add in a ‘Stack’ frame which allows you to easily distribute, position, and rearrange elements evenly on your canvas. Add images with a framed coloured overlay, add text on top of the frame. Throw in a button, Link it up… you get the idea.

From what I understand Framer used to be an app that used code first and foremost but it seems that they have now hidden the code side of things and focused on the design side. I guess they must of seen apps like Sketch, InVision Studio and Adobe XD doing really well and wanted to join in. Framer have made this look beautiful. It’s the nicest UI tool I’ve used, the light skin especially just ticks a ton of boxes for me, it’s simple yet complex and has a world of depth that I may never discover.

Store

Another thing that stood out to me was their Store. This is a marketplace of packs and elements that you can use to add to your design, you can download packs from amazing teams like Dropbox or Unsplash. Each of the elements has been specially designed to be interactive within your design. Take a on/off switch. In Sketch this would be two screens linked together (one for one, one for off) in Framer it’s a working-actual-button. It’s amazing. It just works beautifully.

The Store did have issues for me, for example you add multiple packs and there’s no search or filter to find the elements you want. The previews are small and hard to see and you have no idea of what you’re getting in each pack other than a small graphic the team produces for their store front. But I’m sure this will improve and as more teams join in, the more high quality content will appear. From what I can see right now though is that Framer may need to take a Slack approach and slow down submissions as the recent downloadable items section is BUSY. I have no idea on the quality of the pack other than how many users have downloaded it.

Previewing

A further negative for me was the previewing of your designs. It gives you a QR code and a web link to check things out. The QR opens the app if you have it installed and that is a much nicer experience than the web link. The web link didn’t seem to have any presentation or device border. It’s live which means as you click around the preview changes which sucks when you want to send it to a client to preview. I’m sure this issue has been solved and I just simply haven’t discovered it yet but I can already hear the confusing client calls coming my way.

I also found if you used certain packs from their store it would throw up a error and render a blank page. Now to coders this wouldn’t be an issue as you probably understand what the error means but for someone like me, this was tough to figure out. Framer makes everything so easy to do so probably need to work on error codes for thick people like me.

Cost

FramerX is $12 a month if billed annually, $15 if billed monthly. Compare that to Sketch at $99 a year I think it’s a good deal. The big question I have is whether I’d make the full switch or just use it to flesh out some of the more complicated UI projects I get tasked with. As it stands I’m not sure. I may wait 6 months to see what updates they release.

I know this is a very vague first impressions and probably glossed over a ton of stuff I’ve yet to discover, but to summarise. I’m VERY impressed with FramerX I just don’t know how it fits in with my workload and client list just yet.

—

Don’t forget to check out my latest Blog. Reflecting on 10 years as a freelance designer.