Framer X — Initial Impressions 🎸 🚀
The power of code meets the power of design.
Framer X, currently in invite only Beta, is the future of Framer(RIP). AND IT IS EXCITING!!!
Apologies for the caps but it is indeed exciting and here’s why…
Look Ma! Framer with an X!
First things first. I have been lucky enough to get an invite and play around with this. Although this is buggy, given that it is still in beta, Framer X packs a lot of promise as the go to prototyping tool in the very near future because it not only lets you design but lets you code too, giving more of an opportunity for both the camps — “Should designers code?” and “Should coders design?” This results in an elegant designer and developer hand-off. Oh, and design system management is inbuilt in Framer X. Components 😍
Here’s why the design community is excited:
Framer X Peep:
The Design and Code tabs on top are gone in Framer X. It is basically divided into 4 sections on the left — Tools, Layers, Components and Store. The right hand side has a list of properties for elements and components.
Tools 🛠
Frames and Stack help create mobile first, responsive designs and scale up well to desktop views.
Link helps you easily connect to different screens and components. Want a slide menu? Done. No more complicated coding for simple stuff and this slides only the menu in and not an entirely different screen with a menu on it, like on Sketch or InVision.
Scroll lets you create scrollable areas very easily. Some examples are infinite vertical gallery, sliding horizontal cards, etc.
Layers 🍔
Layers are layers of layers of layers!
Components ⚙️🔧🛠
Components are the atoms of a design system. It is what makes Sketch so powerful. Welcome Components to Framer X. You will never be copy pasting the changes across designs. Change once, change everywhere. Your components and assets across your company can be made available ONLY to your internal team, as a local repository, for better collaboration.
Store 🛍
Want to add a YouTube video to your prototype? Store has it. Want to add a map? Handled. Graphs? Yes. UI kits? Oh yeah. Do I need say more? You can publish your packages too and let others go crazy with your creation.
Best for last — Power of Code. Enter React! ⚛️
This was how things were in Framer land.
Designer — code in Framer.
Developer — code in a different language.
End result = Designer and Developer fight 👊🏻👊🏻. Product is a mess and a compromise with both designer and developer disheartened 💔.
Enter React:
Designer — Code in react.
Developer — Copy code.
End result— Brilliant design and a great product ❤️ 🎖.
Framer X allows you to code components and see the changes as and when you save it. Add to this, shared code and components among designers and developers, times have never been better.
Abandon Sketch?
2017:
Sketch: Strength — static design, weakness — prototyping.
Framer: Strength — prototyping, weakness — static design.
The most important question. Will Framer X replace Sketch?
Not yet. Sketch is the Photoshop of the design industry. There is no real alternative yet. But Framer X is getting there and will soon be a real competitor to Sketch, in terms of static design, which is the strength of Sketch. What was once Framer’s weakness is not its weakness anymore but what was once the weakness of Sketch, is still the weakness of Sketch. This MAY give some designers a reason to move away from Sketch for greener pastures.
2018:
Sketch: Strength — static design, weakness — prototyping.
Framer: Strength — prototyping, getting there— static design.
The potential competitor:
So who is this real competitive for Framer? in my opinion Figma has the potential to give Framer X a run for its money because Figma already runs on the browser really well and if they implement the the ability to code before Framer X captures a sizeable market, Figma would command more power solely because of the ability to run on a browser and hence, irrespective of the platform (Windows, Mac or Linux.)
The future of design is exciting. But learn to code.
To conclude, Framer X will replace Framer and those who have a current subscription of Framer will automatically qualify for Framer X. It is exciting to see where the prototyping tools are heading, in the upcoming months, and it is hard to deny that designers would only have more advantage with the knowledge of code!
Clap 👏🏻 and follow to get instant updates, tutorials and more Framer X juicy posts in the near future as I am just getting started 😊.
Follow me on Twitter: twitter.com/@awesomesid
