Interactive components are here! Plus more prototyping updates

We’re excited to announce that interactive components are now out of beta, and available for all Figma editors to use.

In addition, we’ve launched a batch of releases to make it even faster and easier to build and share prototypes:

  1. Prototype tab shortcut: Use the new shortcut ⇧ Shift + E to toggle between the design and prototype tabs.
  2. Hiding inherited interactions: We’re making prototypes easier to understand at first glance by hiding interactions“inherited” from main components Want to see details? Just select an object to see all associated interactions. Learn more here.
  3. Interactions visible for everyone: File viewers can now see and explore interactions on the canvas.
  4. Disable keyboard navigation in viewer: Disable default keyboard navigation when viewing prototypes for more realistic user testing.
  5. Copy/paste interactions: You can now copy and paste prototype interactions to further reduce repetitive work.

Check out our blog post for more details on today’s launch. Happy prototyping!

6 Likes

Hi, glad to know that interactive components are now available for all users. But i still have no “Change to” options on my variant components, is there a certain way to activate this feature? thanks in advance!

It’s possible you might just need to refresh first.

I can use them, but I can’t use press in combination with a hover effect. Should you not be able to apply both a hover and active state on a button, for example?

This might be helpful: States: Default, Hover, Pressed, Selected

A post was split to a new topic: How do you Copy/Paste interactions

A post was split to a new topic: Can’t use Hover

Thanks Josh. I figured it out using what others did in that post, but having the press option – which works like hover for mouse up and mouse down events, just made it somewhat confusing.

I have three separate button states now:

  1. Default
  2. Hover/focus
  3. Active
  • Default connects to Hover/focus with Hover
  • Hover/focus connects to Default with Mouse Leaves
  • Hover/focus connects to Active with Mouse Down
  • Active connects to Hover/focus with Mouse Up

I’ve found what I think is a bug. When using the swap overlays interaction with interactive components the presentation screens freezes and you have to restart the prototype. Took me a long time to figure this one out!

1 Like

Just a quick feedback, on the new feature disable default keyboard navigation it would be awesome if that could disable the prototype hotkeys such as Restart (R) and Comment (C). This is important specially on unmoderated tests such as usertesting.com.