Building Smart Components for Your Whole Team
Learn how to leverage Variants and Variables in creative ways to bring your Smart Components to the next level.
Smart Components with Variants and Variables enable you to create complex elements and layouts without code. Your components can adapt to any use-case with animatable visual states known as Variants, and custom properties known as Variables.
These features push the limit for what is possible when it comes to building components, and understanding how the basics can be used in new and creative ways will help you create more powerful components for yourself and the rest of your team.
Variants allow you to create different states for your components, and Variables allow you to make them more customizable when using them across prototypes. In our guide Building a Smart Component with Variants & Variables, we explore the basic workflows needed to create a component, but understanding some creative ways we can use these new features will help you bring your components to the next level. In this guide, we’ll take a look at combining these features to create components that enable your whole team.
Variables can be created for many of the styles and properties you’ll use as a designer, with support for:
However, you can also create Variables to customize the composition of a component—Like a Variable for the visibility of elements, or even a Variable for Variants that are used in another component.
The Visibility Variable is powerful for creating Variants that can come in different configurations. For example, if we’re designing a Row component, we can use a Visibility Variable to toggle a subtitle on or off depending on the type of Row configuration you need to use.
This can help make your component library a lot more manageable as well, as you won't end up with a huge matrix of variants for each possible combination your component can be used.
To set this up, we design our component with a subtitle, and add a Variable for the visibility property. When the Variable modal appears, we can also assign a default value, which would make the most sense set as false.
You can set as many Visibility Variables as you’d like, letting you decide how customizable your components should be.
A Stack in Framer is a property that you can toggle on/off for any Frame that you draw. Once enabled, any elements inside the Stack will be automatically positioned, depending on the number of items inside.
You can change the behavior of the Stack using the properties panel, allowing you to customize the behavior of how the inner elements are distributed inside.
Using a Stack in combination with Visibility Variables will allow you to craft components that don’t need extra positioning depending on if an element is shown or not.
In the example in this guide, if we include a subtitle element or not, both combinations will be centered as our Stack will take care of the layout for us!
Events are the last piece needed to make our components extra usable throughout our prototypes. We’ve already explored transitions between variants in a previous guide, but we still need to enable one more thing in order for us to trigger events from screen to screen.
Since Smart Components can be composed of multiple elements, we need to make sure to let Framer know what to do when these elements are interacted with. This is useful if you have a component like a card that has 2 buttons, and you would like to trigger different events based on which button is tapped.
In our Row example, if we’d like to trigger a transition when the three dots are tapped, we need to first attach an Event Variable.
With the element selected, you’ll be able to add an event through the interactions section in the upper right corner. You can name the event whatever you’d like, but being specific will be helpful as your components become larger so they’re easier to identify.
The newly added event Variable will be shown in the Variables modal, and will allow you to transition between screens in your prototype as you use your component on the canvas.
In this example, we could trigger a small menu to open as we click the dots by attaching the transition to the event we had created!
Try it out
Understanding how you can apply these concepts to the components you build will allow you to become the best builder for your team, and create components that not only look amazing, but are interactive by default and useful for anyone to use in their work.
We’ve applied the concepts in this article to some examples that show you how to build a fully customizable Row component that you can configure in different ways. You can check out this project to see how it’s done!
Now that you’ve got all the tools covered, you know what it takes to start building real components, and let interactivity bring your work to the next level.