Design will never be the same

DISCLAIMER: This is not a sponsored review, just an article about my own beliefs and feelings about 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

Dribble shot from Sebastien Graz

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

Framer’s video showing the properties panel

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.



Source link https://blog..io/framer-x--9d067f35cf9a?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here