1 minute read: Framer X for indie developers

June 2019

tl;dr If you already know how to code React, and you already have a system for making mock-ups / wireframes, then don't get caught-up in the hype; stick with what you know.

👍 Cool features of Framer X

Framer X is a useful tool for building high-fidelity, working mock-ups. Probably the most comprehensive mock-ups of any available tool. You can:

  • Install NPM packages and use them in your Framer X project - hats off, that is pretty incredible 🎩
  • Export the React components from your Framer project.
  • Use live data in your mock-ups (e.g. pull in images from Unsplash)
  • Change component props using their UI (e.g. change a element's color using a color picker)
  • Import your existing React components and use them in your Framer X project

I imagine that this last point is invaluable at a big company. Especially when changes are frequently made to the UI.

👎 Why I won't be using Framer X

There are a lot of concepts to learn before you can get started with Framer X. Personally, I had to watch about 60mins of tutorials before feeling confident to create something very, very basic. This isn't unique to Framer, most tools in this category require a lot of initial effort before you can be productive (so if you've got something that works for you already - just stick with it).

  • Many of the packages in the store have not been updated in a long time and are marked as 'possibly' having compatibility issues with the current version of Framer.
  • Framer X's UI doesn't feel as polished as other tools.
  • Steep learning curve
  • The preview tools are sub-par compared to what developers are used to - especially when you want to view something on your physical phone.
  • I feel like I'd spend a lot of time editing the source code for a component, at which stage it's kinda pointless doing this within the confines of Framer X, I'd rather be doing it within my app.

For indie developers, it's important to be nimble and get MVPs out quickly. I think it's more efficient to use a lightweight solution for mock-ups and then move to code. Projects like Create React App / Expo give you hot module reloading on your devices so you can see your UI changes immediately.

Personally, I'm going to continue mocking-up with pen + paper (or Balsamiq for larger projects and Affinity designer for a few high-res screens), then going straight to code from there.

I can see myself trying out Framer X again in the future but it doesn't offer enough at the moment for me to learn yet another tool.

Please enable JavaScript to view the comments powered by Disqus.