Framer X Preview
Design will never be the same
DISCLAIMER: This is not a sponsored review, just an article about my own beliefs and feelings about Framer X. And for the record, I’m not trying to make generalized assumptions about “Should designers code?”.
I’ve been waiting for this for a very long time… but Framer X is finally here! I’m so excited about this new design tool 🙏🏻
Yet another tool?!
We’re not talking about a new tool that is just popping out out of nowhere with huge promises. Framer has been on the market for years and very active in our community. They’re also well known for shipping new features quickly while keeping their performance.
I’m sure most of you have heard about all the new tools in Framer X, and are here to learn more about them. So let’s jump right into it!
My first attempt at Framer X
To give you a little background, I’ve been using Sketch for 5 years, and I’ve just made the switch to Figma recently for my production workflow. Framer has always been the tool I placed my bets on.
Until now, the learning curve and friction have been a real blocker for me, and I’ve been using it to complement my current workflow, and to refine my interactions with specific components.
My first reaction was just “Woaaa…”. I was speechless. There are so many things to say about it. I’ll try my best to explain all of that to you.
First, forget about that big learning curve we had before. Playing with essential features is just like working with any other tools. This is definitely an advantage if you’re coming from Figma because you already know the difference between Frames and Groups. This is the only slight difference that can bother you the first time.
Framer X Beta 1 is synonymous with being fast, clean and easy to use. And it’s just the beginning! I’ve used a lot of beta software, and this one is definitely my favorite.
The above screencast is a recording of 3 hours of work with zero crashes, almost no bugs and it shows enough to make you feel impressed for the first time 😍
Stacks
One of the first new feature introduced by the team is Stack. It reminds me of the countless hours I’ve been playing with my elements to switch them, realigning everything, then doing it again until I find the right balance in my design. If you love precision, it takes a lot of time to refine your composition pixel by pixel.
It looks good on the paper, and it’s incredible in reality!
I wish to be part of the team that introduced this feature. It’s so much more efficient and will save you a lot of time. Design will never be the same again, and I can assure you everybody will want it!
Modular Interface
Another thing you’ll love to see is way Framer gives you the possibility to adapt their UI. The right panel where you can define your properties adjusts itself based on the component you select.
I believe this is the beginning of a tremendous opportunity to collaborate more closely than before between designers and developers. The possibilities are endless, it’s like having a blank canvas. Define your needs, and with a few lines of code, the magic happens ✨
This is a time where I wish for working for a company where I can have a big set of components to play and adjust everything we need to create new experiences. (But I’m a freelancer and happy to keep it that way).
Framer Store
The Framer community has always been very close to the development one. People are very active and share their projects from the beginning. I can’t count the number of times where I wanted to create an effect, and I downloaded projects from other users to learn how they did it. I believe this is a huge move forward for everyone, and I just can’t wait to discover all the excellent packages coming! 😍
Big news for everyone, you don’t need to search into the vast base of Github repos to find something that can help you. Everything has been thought for you to be as easy as a simple button click, and voilà 🤷♂.
The same way you need to import framework/library/whatever into your development environment, each package you install is related to your current project. Don’t be surprised if you need to reinstall something that helped you in your previous .framerx file.
This is still in progress, but I hope we’ll be able to “favorite” packages to avoid searching over and over the same thing. If you take a look at the below image, it seems already planned with the star counter under each package.
Components
I believe most of us, designers, started working in a component-way in our project. Sketch, Figma and other tools or articles have been advocating for a better process and workflow during the latest years.
At first sight, you can remark the similarities with what already exists in Figma Today. But since every component is a bunch of code lines, everything can be edited and improved quickly. You can even “fork” a component from the store. Once installed, go to your component panel, and right-click “Edit/Copy Code.” Once opened in your favorite IDE, you can tweak what you want to be as you like.
I think we can even go a bit further with that panel by allowing people to detach it. By doing that, you let your users using the full potential of their workstation. One screen with Framer X, the other with all our component lib. You can even think about using both side-by-side in the fullscreen.
Q&A
Is it already production ready?
No, it’s not, at least not yet. But with the new update of Beta 2, we’ll have a better vision of how we will be able to set up our processes.
Is it stable?
Yes! There are some rare issues from time to time, but the team made tremendous efforts in delivering a robust Beta version.
What’s missing from Beta 2?
From their own words: “[Beta 2] Focus on supporting the previous Framer workflow with code functions, state management, using design components from code, code exporting and a more complete Framer.js library.”
I’m coming from Sketch/Figma, can I use it easily?
Yes! It is very similar to what you already know but even better in the end :)
Is it generating production-ready code?
“Framer X does not generate code for you from your designs, but instead it uses code that you wrote to compose interfaces. This is better because:
- You can share code with production. Your design component can be the exact same version that runs on your production website, so there is a single source of truth.
- Auto generated code ultimately almost never ends up in production, developers want to have full control over every aspect and will typically always (re)write it by hand according to internal standards and processes.”
Can we plug Zeplin, InVision or another third-party to manage the handoff?
Not yet, but since everything is built on React, I believe it opens a lot of opportunity for everyone here.
What about Framer vs Framer X?
Eventually, Framer X will replace their current tool.
Is it coming to Windows?
Yes! Framer X is coming to your platform! Sign up to their special Windows list to get a message as soon as it is ready.
👉 https://framer.com/forms/windows/
Can I use without development knowledge?
Yes, it is still possible, while I keep some reservation in favor of the Beta 2. To use the tool at its full potential, I believe knowing some code and specially React know is a must have to go further than what you can do visually.
Ok, so where can I learn React?
You can start exploring the basics with Meng To in Design+Code : React then continue more in-depth with the ES6 and React for Beginners course from Wes Bos .
Zach Johnston also curated on React for Designers some great places where you can learn a lot.
And finally, Davo Galavotti covered everything for you with this massive list you can save right now: Awesome React Framer X.
Last but not least, if you looked closely at the teaser of Framer X, you can see Stack is not the only feature coming for the release! 🙏🏻
Ready to design the future? Let us know what do you think! 💬