Start Building Smart Components with Variants & Variables
Learn the basics of Variants and Variables so you can start creating Smart Components right away.
Smart Components with Variants and Variables are new features in Framer that let you build real, interactive components—without the need for code. You’ll be able to design and construct Smart Components that can be reused across your designs and prototypes.
From the most simple buttons, to carousels, to a navigation component, Variants and Variables let you design components how you’re used to, without the need for an engineer to build them for you.
This guide will explain these new tools to bring you up to speed so you can get building right away. Learning a few basic concepts about how these new features work will allow you to hit the ground running and let your creativity flourish through interactive design.
As a designer, you’ve most likely had to design a button at some point in your life, or use one from your company's design system. But what good does a picture of a button in a prototype do if buttons were meant to be clicked?
Variants solve exactly for this. You can create a new component using the Component button in the toolbar, and design that same button you’ve always been drawing, but use visual states and animations to bring your component to life.
You’ll be brought into the Component Canvas, a walled off area from the rest of your prototype where you can focus on adding interactivity to your components.
You can design gesture based hover and pressed states using the slots underneath your primary component, or create completely new variations of your component (like disabled or selected states) using the slots to the right.
Variants and Gestures
Any component you create will be available in your project’s component section, and allow you to drag out as many instances as you’d like!
Framer will automatically animate between your pressed/hovered Variants as you interact with your component in the preview.
If you don’t want your component to animate only while you’re hovering or pressing, you can also tell Framer to animate your component to a different Variant based on different events—like after a click has happened. This is really useful for animating Variants between different states - like a toggle in an on and off state.
To animate between your Variants, you can use the prototyping connector to connect Variants together and add an interaction. You can add interactions to any element in your variant, making your components extra customizable in the way you want to interact with them.
Components built with Variants are not only interactive, but allow for you as a component creator to make them extremely customizable for anyone who wants to use them. How useful would a button be if we couldn’t change the text inside? This is exactly what Variables solve for.
Variables are reusable parts of your components that you can assign to different values; Like colors, radius, events, and more! Any variable you create is just like adding a prop to a React Component!
When you’re in the Component Canvas, you can add Variables through the properties panel. As you hover different properties, a small plus icon will appear if a variable can be created.
For example, if you create a button with some text inside, hovering the “content” property of the text element will allow you to add a variable for text.
Adding a Variable
For any Variable you assign in your component, you’ll see a corresponding property control in Framer’s UI as you use your component on the main canvas.
Using your component on the canvas
Understanding the basics of how Variants and Variables work will allow you to apply these concepts to more complex components, while still being able to rapidly prototype your next interactive idea.
The concepts should be enough to get started creating components, but you can also continue learning about Variants and Variables by reading our guide on Building Components for Your Whole Team.