Announcing Smart Components
Components in Framer just got a complete overhaul. Introducing Smart Components with transitions, animations, interactions, visual states, and more—no code required.
When you have an idea for a new app or website, is it static? Probably not. You imagine elements that respond to taps and clicks, interactions with personality, and transitions that create enjoyable user experiences. Now, Framer makes it easier than ever for anyone to fully express these ideas with Smart Components.
Components in Framer, now smarter than ever
Designing and prototyping with Smart Components means seamlessly expressing whole navigations, buttons with multiple states, scroll effects, nested hover effects, and so much more. All without code and all with the visual design skills you already have. This release helps bring your work closer to real than with any other tool.
But what makes these components smart?
Real production components display different visual states when you interact with them, so the components you prototype with should too. In Framer, you can create as many Variants as you want to express every state of your components.
When creating Variants you can choose from regular, hover, or pressed. Hover and pressed Variants are interactive by nature and will toggle their Variants automatically when hovered or pressed. Any regular Variant can also be made interactive by adding transitions and custom animation settings. The functionality available to transition and animate between screens can now be leveraged on a component level. So, not only will your components contain different visual states, but they will animate when interacted with too—just like real components.
When creating Variants you may find yourself thinking you need hundreds of Variants for just one component to properly express all its states. Thanks to Variables this won’t be the case. Adding Variables to your components allows you to dynamically change their properties without creating a separate Variant for every specific state. In other words, with Variables you are creating custom properties (anything from border-radius to color) that unlock nearly infinite permutations for your components, rather than just a fixed set of Variants.
We wanted to ensure that everything you create in Framer is actually useful when working towards production. Smart Components are not just glorified slideshows. It’s deeper than that. These components are stateful, compiled React components under the hood bringing you one step closer to production even in the prototyping phase.
Build like a developer, without code
You've created Smart Components to take your prototype’s fidelity to the next level—what does that mean for your workflow?
“Imagine if you could use the exact same components, animations, and interactions that developers use when building an app or website, without actually learning to program. This is what Framer enables.”
Build complete prototypes with the design skills you already have and get an output that looks like it was just downloaded from the app store.
Creating a component that has Variants and Variables in Framer means building components in the exact same way the developers on your team would. Once you start composing Smart Components in the Framer canvas you’ll see you can build any prototype imaginable to make your team successful. Everything from micro-interactions and complete design systems to full apps can be brought to life on the canvas in Framer.
As your prototypes start to resemble and work like actual products, your team can now begin to close the gap between design and development, ensuring quicker buy-in from stakeholders, and more useful feedback during user testing.
“Your transitions are not just empty links, behind them are custom animation settings that can be copied and used in production.”
Your components are more than just pixels on a canvas, they have states and props to mirror the real thing. The time between idea and new product is now shorter than ever.
Start designing your next great idea
The release of Smart Components brings us one step closer to our goal of lowering the bar to entry and empowering everyone to design high-fidelity prototypes. We know you’ve got great ideas. Bring them to life this year completely in Framer.
For a more in-depth look at Smart Components check out these guides: