Framer X first impressions
The beta invitation is finally in… Does the product really meet the high expectations and praise from industry influencers?
New product or a new version of an old product?
So Framer X came out… But it is not a completely new tool popping out of nowhere. Framer has actually been on the market for a long time but the version X is introducing significant changes and can be considered a separate product.
The way the app works has been changed dramatically and now it’s possible to create a complete interactive prototype without writing any line of code. If you know how to write code, you can use real ReactJS components and include them in your prototype. But if you were wondering if there is backward compatibility with old Framer projects, unfortunately, there isn’t.
I’m sure most of you have heard of this new product but possibly didn’t have a chance or opportunity to try it yet. So let’s jump right into the first impressions this product gives!
Things that are great 👍
Onboarding
The first pleasant surprise is how smooth the product registration is. The product asks the user for e-mail and by clicking on the link sent the user becomes part of the beta program, without any other friction.
Onboarding for new users is done without flaws, too. Even though most of the users will be able to use the app immediately because of it’s similarity to competitor products, the users are still given an option to see video tutorials and to download project examples.
The product works extremely fast and it’s very bug-free, considering it’s still in beta. I haven’t noticed a single glitch using it for a few days.
The user interface
The UI is very familiar and basically, to be honest, it’s just a copy of a well-tested and usable Sketch interface. Not much innovation here, but nothing bad about it, as this approach has shown to be very popular with software product designers, which are the target audience for Framer X.
The right sidebar is the place where you can define your properties and this part is dynamic, based on the selected component. One novelty here is that this sidebar can be adapted by using custom components. Custom components can have unique properties and can change the interface by adding additional properties and settings. This is something which we don’t see in competitive tools like Sketch and Figma but can easily show to positively improve the designer’s workflow in the future.
The application flow
The app is very easy to understand. In the left sidebar, we have 4 main tabs: Tools, Layers, Components, and Store.
Tools tab opens a panel similar to Sketch’s “Insert” drop-down, allowing us to add rectangles, ovals, text, frames, etc.
Layers shows a tree-view list of all of the layers in the document (again frames, text, rectangles, components, etc.). Here you can create master components and each one of them can have its instances which inherit the master component look and behaviour.
Components tab opens up a panel providing a list of elements which are similar to Sketch’s symbols, but by using the component naming Framer provides a more meaningful parallel to the React components which are happening in the background. The main selling point here is that you can actually import a real ReactJS coded component and it will work in both the design interface and in the preview mode. So you can use third-party components from the web but you can also sync up with your development team and directly plug in your own components from your current application development stack.
Finally, we have Store and this is the part through which you can include other components from the web. With one click install, your components are ready to be drag-and-dropped to your project.
Having learned that the biggest selling point of Sketch currently is all of the plugins that it supports, it was logical that the team at Framer introduced its own component store with the goal of trying to match Sketch’s app ecosystem as soon as possible. This is one of the more important parts of Framer X, which will show when the ecosystem of its components gets built up in the near future.
In the old days of Framer, you would need to dig into GitHub repositories to find examples of the code to be able to build your own interactions. But not anymore, in a matter of a click you can pull into your designs a working dynamic component based on React code. And any designer/developer can easily publish their own component.
Stacks
Often designers spend countless hours playing with elements and carefully aligning and realigning them, and that leads to frustrations. For a designer perfectionist, it definitely takes a lot of time to refine your designs pixel by pixel.
Enter stacks. Ability to use stacks is a really interesting innovation that Framer X introduced. With them, you can effortlessly arrange elements on your canvas without worrying so much about even distribution and alignment. Changing the position of elements on the canvas takes just seconds as by dragging elements around within a stack all spacing will remain intact. By dropping a new layer to within the appropriate stack all the other elements will adapt accordingly. This feature also helps with creating responsive designs.
Prototyping
Basic prototyping features only recently entered the world of design tools through InVision Craft plugin for Sketch, but in the meantime, all of the competitive tools (Sketch, Figma, InVision Studio) already provide this. The same is the case here.
With Link feature, you can easily connect different screens for your prototype. Using Scroll will let you create feels-like-a-real-thing scrollable areas.
Framer X prototyping features are quite decent but still cannot compete with tools like Axure, for designers who cannot write code. For designers who know front-end programming the components by using ReactJS provide the limitless prototyping opportunities.
Windows support
Framer X should be available on Windows soon too, and that will potentially be a big advantage to the current most popular product design tool, Sketch, as their team only plans to develop for the OS X platform.
Things that are not so good 👎
Now to the things that are bad…
I will keep this list short as I am pretty sure that many of these things will get fixed very soon, judging from the fast release cycle that the Framer team has.
- Zooming the designs is a bit laggy and sluggish compared to Sketch. Hopefully, this will be improved in the near-future versions.
- Adding components is easy and fun, but when you want to edit them it just opens up a third-party code editor which might deter non-coding designers.
- The preview mode for prototypes seems cool at the first glance but there is currently no way to share a prototype. There is no way to provide a public share link any of the designs/prototypes made with Framer X.
- The designs cannot be shared to Zeplin, InVision or other third-party handoff tools, either.
- Currently, Framer X does not have the ability to generate code from the designs, but insteadm it only allows to use the code that is part of the components.
- There is no document versioning support.
- There is no multi-user support and there no collaboration features.
- Even though you can copy/paste designs from Sketch you cannot import from Photoshop.
Conclusion 👏
Framer X is a well-thought-out product and very well marketed — its features are a great fit for a typical software product designer.
At the stage when ReactJS became the most popular front-end development framework and popularised component-based coding style, at the same time a similar trend happened on the design side of things. In the last few years, and especially in 2018, the idea of using design systems exploded in popularity. As basic elements of a design system are components, this is where Framer X tries to connect the design and development by building the product on the same core foundations.
Framer X might just be the first product which will successfully bridge the gap and meet the needs of both designers and front-end developers. And who knows, maybe we finally see more designers learning how to code, which I think is the right way to go!
Still, it’s worth mentioning that the tool is still in beta version. It must be said that unfortunately at this stage, Framer X is still not ready for production. But it will be a matter of weeks when it is, and it definitely has potential that many designers will switch to it from Sketch and Figma. I have started using it for smaller projects and have a slight preference compared to both InVision Studio and Figma.
If you are as impressed with what Framer offers at this very early stage, I suggest you learn more about ReactJS which is powering Framer components and to also read from some other online resources too.
