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 components