For example, changing the colour of the hover state once in the Menu Item component will change it in all three of its instances in the Dropdown Menu component. You can see how this approach is much more efficient when you need to change something. Additional click interactions are added to the dropdown component. These components are nested inside the Dropdown Menu component on the right. In the example below, the Button and Menu Item components shown on the left have hover interactions. You can also nest interactive components, in the same way that you can nest regular components.
![figma interactive components figma interactive components](https://s3-alpha.figma.com/hub/file/587201863/46f08710-fa06-4b4b-984a-257ede7d56cf-cover.png)
To see this interaction working, add your component to a frame, select the frame and click the Present button. Every instance of the component will now inherit these new properties. This component is now set up with a hover state interaction. It’s an option that will only be available when prototyping with variants. This allows you to change from one variant to another. Figma will recognise that you are working within a variant and will provide a new “Change to” option.Select “While hovering” to create a hover state.Drag this node to the “hover” variant in the component. You’ll see the same blue prototyping nodes on the component variants that you see when making prototypes using frames.
![figma interactive components figma interactive components](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8cc57af1-e8c7-41eb-bf40-c3add3232315/19-introduction-figma-interactive-components.gif)
Select the “default” variant inside the component.If you’re new to variants, check out this guide from Figma first. To start, create a button component with variants for “default” and “hover”. You’ll need to have signed up for the Beta to use the feature currently. I’ll use a hover state on a button as an example. This results in just 1 screen and 2 interactions. Using the checkbox example again, with the new Interactive Components feature, the 8 screens and 24 interactions are replaced by defining the interaction at the component level. This allows you to produce animations after a predefined delay, i.e. “After delay” is a useful one that I’ll discuss later. These interactions can be set to work, based on a variety of triggers, most commonly “On click”, but also “On drag”, “While hovering”, “While pressing” and other triggers. The new Interactive Components feature builds on the Variants feature, allowing us to create interactions between the variants within a component.
![figma interactive components figma interactive components](https://i.ytimg.com/vi/Pf0PgE5-C-Q/maxresdefault.jpg)
We would also need 24 interactions defined between those eight screens. This still meant using workarounds to simulate interactions though.Īs you can see above, to demonstrate interaction with three checkboxes, we would need 8 screens, which would all be the same, except for the checkbox selection. Then last year, Figma launched its Variants feature, allowing us to have multiple states of any single component. Previously, we would link entire frames to create our prototypes. These interactions are then baked into the component and will be available in all instances of it. The difference with the new feature is that you can define interactions between variants at the component level. It was not an efficient process when it came to making updates. This feature, currently in Beta, will allow us to quickly assemble reusable interactive components and bring our designs to life as clickable prototypes.īefore this feature was developed, you could create interactive prototypes, but it involved workarounds and a lot of effort duplicating and tweaking multiple frames to demonstrate interactivity. Figma has been busy working on a lot of new features recently and one that has captured our attention is Interactive Components.