Figma Interactive Components

Introduction

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. 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.

Components

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. You can also apply overrides to instances (which are basically style changes to the component properties which allow for some customization).

Triggers

These are known in development as Events and are the different ways we the user can activate an interaction.

  • On Click,
  • On Drag,
  • While Hovering,
  • While Pressing,
  • Key/gamepad,
  • Mouse Enter,
  • Mouse Leave,
  • Mouse Down,
  • Mouse Up,
  • After Delay.