![figma variants figma variants](https://cdn.dribbble.com/users/183489/screenshots/14917292/figma_-_variants.png)
Think of these as items that, when duplicated, create a connection with its copy (called instance) and when the component is changed, the instance receives the same changes. It’s necessary to understand some key Figma elements that we are going to use, if you’re already familiar with them you can skip this part and start directly with the first tutorial (section: “Create your first Interactive Component”). Once you join the Beta, you can duplicate my design and follow along more easily. I have created a Figma design file with the examples from this article.
Figma variants free#
Joining the Beta is free and once you submit the form, it should not take more than two or three days before you see Interactive Components appear in your Figma design tool. You need to sign up for the Interactive Components Beta program to start experimenting with this new feature as it is not yet available in the current stable release. Now, before we start: Interactive Components (Beta Access)
Figma variants how to#
Using Interactive Components simplifies not only the final prototype but also the logic behind it, making it easier to learn how to build, maintain and update the prototypes. One single interactive component used twice inside a screen. In the next example, it only requires one screen and one component with two variants for the interactions, and the switch is the same so it can be duplicated as many times as needed: And if I wanted to use three switches, I would have to add even more screens and interactions. ( Large preview)Īs you can see in the example above, it requires four screens and eight interactions to make the prototype work as a real product.
![figma variants figma variants](https://imockups.com/storage/product/4780/Fcw5D4HjOoTNqk8Sn48q.jpg)
Here’s a comparison example of how the workflow will change:įour screens and eight different interactions. This means that it is now possible to create a component with states (hover, active, clicked, focus) and make it interactive so that every copy of the component will inherit those same interactions by default, helping a lot in the prototyping phase. Recently, Figma rolled out the beta for the newest interactive components feature that allows defining interactions and animations directly into the variants and propagates them to every component instance. There’s no need for previous Figma knowledge and experience - all you’ll need is a free Figma account if you’d like to try it out for yourself. The new feature reduces the time and effort needed to create interactions by bringing down the cost of design exploration. In this article, Emiliano explains why Figma Interactive Components (now in beta) will improve how we create prototypes.