We're thrilled about Figma launching the beta version of their new functionality, interactive components. It's definitely a breaking point in UX/UI design.

We've been waiting for this functionality for a while. It's true AdobeXD already offered a similar solution, but Figma's solution is game-changing.  The feature is still in beta, but as we signed up as beta testers, our design team has the opportunity to play around with it. Discover how to sign up for the beta at the end of this post.

The functionality basically allows designers to animate components without the need to create several frames. Now, we just need to create variants for the component, connect them, and Figma does the rest of the job.

@lightit.io

Creating ##microinteractions with interactive components by ##Figma ##interactivecomponents ##ux ##ui ##uxui ##design ##productdesign ##figmatutorial ##tutorial

♬ original sound - Lightit.io

The steps are simple:

  1. You build the components in their different states.
  2. Set them as variants.
  3. Link the variants and choose the interaction.
  4. Voilà, you can try your work in preview.

How can I try it?

As I mentioned above, the functionality is only available for beta testers. You can try requesting access here. The beta is available to all Figma users, no matter which plan you have. Figma is taking three business days to add people to the beta.

This tutorial might be useful to get started:

Have you already tried it? Leave your thoughts in the comments!