Skip to main content

I have created a form field component. Just a text field. Nothing special. It has default, hover, selected, error states. It works perfectly fine. Hover works… Select works.


Now, when I take that component and use it within another component (less components to redesign in the future) like a date picker, it breaks all interactions and I nothing works properly. Even if I put the component within a new auto layout and assign that to another interaction. But, if I “detach instance”, it works flawlessly.


Another example of where this comes up is with a header that can have many different types of buttons depending on where in the app the user is. Those buttons are made into a component to give them all interactions.


Can anyone please explain to me how I can use components within other components and still have interactions? I’d rather not have to make multiple components that can be easily maintained for the 20+ other designers that that library supports.

Hi @AZ1, Thank you for reaching out to us about this issue. I understand how it can be a bit of a headache when interactions don’t behave as they’re supposed to.


If those interactions work as expected when you detach instance, those instances might include changes that aren’t quite compatible with overrides.

You can find more details here: Apply overrides to instances


Additionally, this article explains the order of interactions when you add instances of interactive components within any other component. You might find it helpful:

Create interactive components with variants - Add more interactions


Also I found a similar topic being discussed in our community here:

Interactive components not working when nested inside a main component

Feel free to explore on your own.


If you’re still finding things a bit tricky after going through all the above, I would recommend reaching out directly to our support team. They’ll be more than happy to assist you further: https://help.figma.com/hc/en-us/requests/new

To assist our support team investigate, kindly provide the following information:



  1. Please ensure you use your Figma account email address.

  2. A quick video recording demonstrating the issue. In the video it’s helpful for us to see the whole window, with the Properties and Layers Panel in view and relevant layers expanded.

  3. Share the file links and add support-share@figma.com as an Editor to those files (this won’t impact your billing)


Thanks for your help here! If there’s anything I’ve missed, please don’t hesitate to let me know.

Also, we absolutely love hearing insights and suggestions from our community please jump in!


Thanks,

Terms & ConditionsCookie settings