A few thoughts on Framer X
I’ve tested Framer X when I had some spare time over the past few weeks (not so much), and I find it to be an interesting new proposition.
There is some real innovation in there, with a component store; a way to have elements in your design that are much more interactive than in previous design apps; and on top of that, very interesting methods to set up your screens using a combination of scroll views, flexbox-like automatic alignment with their Stacks feature and more.
If you’re curious about the basics, check out the Youtube video I recorded.
When I see Framer it’s like I’m seeing a combination of the innovations from all previous design apps. I can point to parts of the interface and see a direct link to the same user interface in Sketch or Figma. The overrides panel in Framer X is like overrides in Sketch. The look of instances is almost the exact purple as in Figma.
The shortcuts are very similar — that is a great thing. As a user I appreciate that I can jump between apps quickly, and that by now design apps seem to have learned that “R” is a good shortcut for a rectangle (I am looking at you, Illustrator).
What I am also seeing is a truly beautiful, native-looking interface, that is crafted with love and care. You can change the global UI from black to white. There are a lot of UI details that I can tell are just lovingly crafted and made. I can’t really call it out as a “ripoff”; I would say it’s merging good parts of Sketch and Figma and throwing its own layer of innovation on top of it.
First of all let me tell you what Framer X is not (at this point in time).
Framer X is not a good tool to create a large design system. There is no way to save text styles. There is no feature to save color sets.
Basically you will not be creating your next design system documentation with Framer X, unless you are willing to do lots of manual work.
Framer X will not support a design with hundreds of pages (in fact there is no pages features at all).
Framer X is not good at collaboration at the document level. They have their own file format; you have to pass around files if you want to collaborate. In this way it’s like Sketch without Abstract.
In Figma every file lives in the cloud, and collaboration is an automatic given (one reason I love it so much).
Framer X is not stable. It is a beta. It will crash and there will be errors. This is the nature of software development.
Now, let me talk about what Framer is.
I said there is no collaboration in Framer, but this is at the document level.
At the community level there is a new kind of collaboration with a component store.
It allows you to download community made components. A simple example is a random avatar component.
A more extensive example is a kit with iOS components.
When you use these elements in “preview” mode, they are much more interactive than what you would be used to in other applications.
For example, in a status bar component, you can set the “battery” to “17” in the overrides panel. As you can see below the component emulates iOS’s behavior with the battery turning yellow.

A component in Sketch and Figma are basically just a combination of layers that get rendered as a static image.
But in Framer X, components can be driven by code, more specifically React code. A Framer component is essentially a React component rendered through Framer. This means you can write code like this (forgive me for my crappy React):
And it’s going to render as a component in the app.
Personally, I thought the previous versions of Framer (Framer Studio and the original Framer) were a waste of time.
Framer because it only allowed you to make micro interactions with no reusable code whatsoever.
You would have to spend hours on a micro interaction that would then have to be replicated with either real CSS/Javascript or native code if you decided to implement it in your actual app.
On the flipside, I know people who have invested in learning how to code within Framer and used it for testing specific micro interactions and loved it. It was almost like a DSL for creating micro interactions.
Here is a Facebook conversation about this specifically in the Framer X group.
(You have to be a member to see it. I hate the fact that the discussion around Framer X is on Facebook. If you are reading this Framer team, pleaaase put it on a more neutral platform. I don’t like having to keep a Facebook account around for these exceptions.)
I didn’t like Framer Studio because it felt like when Adobe released XD 1.0: a design tool without the features that I needed (i.e. symbols, reusability), with the same underlying problems as Framer.
But Framer X solves a problem I have with OG framer: because it uses React under the hood, it will allow you to reuse code if the end result of what you are designing is a React App.
I have a theory that depending on what you did and how you coded it, you might be able to use your code with small tweaks in a React Native context as well.
This sounds very appealing to me, because for me, component reuse is what it’s all about.
Framer also partly solves my problem I had with Framer Studio. It’s well on its way to just being a more featured design tool in general. The design component/instance system is pretty dope (pretty much straight out of Figma). The stacks feature is innovative and reminds me a lot of what the guys from Subformapp were doing.
At Mono, over the years we have built up a ton of components that we use and reuse across projects. These components have improved over time, but there is no link to our design tools.
Most of the components are composed of static HTML, CSS and a little sprinkle of Javascript.
We’ve used our HTML prototyping method successfully the last few years to deliver front-end templates to our clients.
We’ve avoided using specific Javascript frameworks like React and Vue in our deliverables. But it’s also obvious that the world is moving these web component-inspired solutions.
We feel the need for a deeper deliverable in our ongoing mission to bridge design and development. I have a feeling Framer X might help us.
