You can now do the same thing whenever you want to re-use an interaction.įor example, if you have a help overlay modal that always opens up when you press a button, you can make that part of your component for that button, in your component library, instead of having it as frame on your main canvas. Think about them like components: whenever you re-use an element in a design, it’s good practice to make them into a component, to prevent unwanted changes and keep your design files well-organised. Next stepsĬomponent interactions aren’t just useful for checkboxes, switches, and button states. The interactions you set up on the variants themselves will now also be applied whenever you use the component. You can add more prototype connections as usual. Whenever you’re in prototype mode, you’ll see the variant interaction already listed. In the below screenshot, take a look at the top right. Now, when you come to use this button component, the component interaction will come with it. That’s it! You’ve made an interactive component. Step 3: Use the component in your designs In the interaction details, you can also add animation properties, for example to control easing. Make sure the trigger is set to Hover, and the action is set to Change to.

You do this in the normal way: at the top right, switch from Design mode to Prototype mode, and drag a connection between the variants. (You can see this both in the layers panel on the left, and the variants menu on the right.) Step 2: Add a connection between variantsĬreating an interactive component is as simple as adding a prototype connection between variants.

Notice that there there are two variants, that have the property state as default and hover respectively. Here’s an example of a button component set. If you’ve not started using variants, read more about them here. So you first need to create a ‘component set’ with variants. Interactive components are an extension of variants. The beta is open to all Figma users, regardless of team or plan. The caveat is that prototypes may not be as performant as you’d expect, although you can toggle the feature for individual files. If you want early access, and to contribute feedback to improve the feature, you can sign up here. Interactive components is currently in a limited beta. The list items and button hover are all done with interactive components, meaning that this whole prototype exists in a single frame! No more messy ‘noodle soup’ that comes from wiring up every permutation of a frame. Here’s an example of a prototype built with them: This allows you to prototype faster, and make prototypes that are closer to the real thing, helping you gain more valuable insights when testing designs. Whenever you hadd an instance of an interactive component to your design, the interaction is set up and ready to go. Interactive components allow you to quickly and easily create reusable prototpye interactions, without having to link up tons of frames. Interactive components have just launched in Figma (in beta)! This feature has been highly anticipated since being announced last year at the official Figma conference, Config Europe 2020.

Figma interactive components