We’re excited to announce that interactive components are now out of beta and available for all Figma editors to use.
Thank you so much for your participation in the beta. Your feedback and questions helped us fix issues and improve the product, and we’re thrilled at being able to see this feature live today. You can visit the Help Center for more information on the feature, and please continue to share your thoughts here in the Support Forum.
Interactive components are working in our team design library file, but when I publish the interactive components (some are in nested component variants), they do not work in other files that use that library. It appears that Interactive components is disabled in my files but active in our design system file… Help!
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!
Hi, just want to update on my question here. It seems like this feature is available for all users on web only, no? because on my desktop app this feature is not available yet. thanks!
Love the feature! I noticed an issue with the Auto Layout on “Hug Content”. If I use a nested component that has the interactive component prototyped. The Hug Content does not work always and it has some issues hugging the content It just overlays it and does not increase in size. Keep up the great work!
Seems that it doesn’t work on older files.
I tested it on an existing project and it doesn’t work.
I copied the whole thing on a new file and it works.
Thank Team!
One question: I can create an overlay on a certain component on one page. Using this component on a different page looses the overlay trigger. I have checked “Enable interactive components”.
Thanks for your help!
Dominic
Thanks for this great feature!
One thing I noticed while building a really well functioning interactive dropdown – The overrides. If I animate a component, the states I’ve built into the component are replacing the states of the component instance. I mean, in my opinion, I should be able place my dropdown component, then fill in all the overrides to all the states and the component animation should use the overrides I’ve made. The way it works now is that I can make any overrides I want, but when opening the prototype, the animation uses the stuff I have in the main component instead of the overrides in the instance.
Edit: Only the overrides, which are made to the starting variant are applied. For example I can change the placeholder text in a closed dropdown, but any override made into the open dropdown are ignored. Unless of course I make the whole thing start with the dropdown open, then the situation is reversed.
I have fixed the overrides issue by using same layers names in all the variants. Make sure you have the same layer name, so that the system understands that it’s the same element that changes state. That’s the secret with the smart animate.