A step closer to the screen-design of the future.
In the last week of August I went to the Framer headquarters to test their new product, Framer X. They have a beautiful office, which is situated alongside one of the famous canals in the citycentre of Amsterdam.
So, after walking five stairs (😅), I came in a room where they held the usertest together with a designer, researcher and growth manager from Framer.
My first reaction, “Wooohw..”
I’m used to working in Sketch and are familiar with tools as Figma and InVision Studio, but seeing Framer X for the first time blew my mind. I was really amazed by the endless list of nice things you can do with the tool. It has a big advantage over its competitors and I think it’s going to be the next big thing in screen design, here is why:
Design + Code = 🔥
Framer X has it’s own built-in store.
I know that you’re thinking; Why does a screen-design tool needs a store? So, in the store of Framer X you can download components. There are components based on code and design. You can download them and use them in your project. These components are at the moment one of my favourite:
So, when I design the interaction of the interfaces I’m working on or just need animations, I always like to use Adobe After Effects. Lottie is a tool by AirBnB which let’s you use svg animations in code. With the Lottie component in the Framer X store I can preview my animations directly inside my screen-design tool, which is crazy.
Another cool code-component is Translate, built by Zach Johnston. When designing your screens you can live automatically translate your text.
One of my favorite components are the mockups. Simply link your design frame with the component and it will preview it live on to say a browser or device. When changing something in the frame, it will automatically update it into the linked component. Very very nice.
De built-in store has a lot of design systems. You can find all sorts of things from Android, iOS & Wireframing kits to the design-systems from Dropbox, Google or Snap. You can install them and have in seconds access to a whole library complete with all the parts you can use in your own projects.
So, the user interface is super simple and has a ton of useful tools. These things are going further than other screen-design tools. Take a look at Stacks:
One of the most helpful tools inside Framer X is Stacks. The Stacks-tool lets you make a list and inside this list sub-elements. For example, let’s say you’re designing a iOS or Android app and you need to make a navigationbar. Stacks ensures that all the distances are equal.
If you know html, this would sound familiar to you. It’s actually just flex-box, but then inside a screen-design tool. It is possible to change the values as ‘space-between’ and ‘space-evenly’.
Another great thing about the application is the way it handles different screen-widths. When you’re resizing a frame, all the elements inside it will stick to the sides of the screen. Everything stays exactly on the place you’d like it to be.
It’s not even everything.
Today Framer X officially launched and the features are already powerful, but I think more is coming. On the teaser video, which is on Framer X’s site they are hinting at some other interesting things for the future. It looks like there is a grid-version of the stack-tool and interactive features like flow and paging coming.
What am I missing coming from Sketch?
For so far, I haven’t stumbled on any big disadvantages compared with Sketch. The only thing that I’m missing is the way how plugins work. I’m used to working with plugins as Paddy or Craft, where plugins directly affect multiple elements in the document instead of on one item with Framer X.
Differences in usage
Framer X has a simple user-interface and has a lot of similarities with the current big design-tools. If you are already familiar with these tools you could quickly learn how to use the interface, but there are differences in usage.
At the usertest I was asked to create a new page. In Sketch you would make an Artboard, but in Framer it is a little bit different. In Framer X you work with ‘Frames’. I see it as a sort of div-block in code. So, with the frame-tool you would make a new page, but use it also for other things like buttons or navigation-menus. Benefits of this is that they are responsive, the elements in the frame will stay in the right position when resizing the frame. The original Framer application was already using frames, but there is a challenge for Framer to educate the user coming from Sketch the right way.
Framer X is by all means my new favorite design-tool. I think that Framer X can really stand out against the competition by making the connection with code, which has not been achieved by other design-tools at this point. Because it’s build on React everyone can submit their own components to the store, which results in incredible powerful components. So another thing I’ve noticed is that it saves me time when designing interfaces. This is due to features as Stacks, where you don’t lose time on the small things like aligning objects after moving them.
The pace of shipping new updates is incredible. I don’t know how they do it but I have written this article in a week and began with Beta version 3 and have the Beta 5 at the moment. (Update: It is officially out now!) The future for screen-design tools is looking bright.