Hi folks! Perhaps this is a bug, or perhaps I am misunderstanding the limitations and proper use of interactive components. I am hoping it’s the former.
We are using a multi-library file structure for our Figma component library. We have a “core” library file where our foundational components live, and instances of those components are pulled into “product specific” libraries further downstream where overrides are made and we introduce branding to our components. This allows all our products maintain their unique looks while still referencing a single source of truth.
When the interactive components beta was released I expected to be able to set up interactions at that core level, but those interactions fail at the product-specific library level. The original component from the core ends up trumping the overrides I made in the product-specific library.
Here is a quick demo of the issue:
If you’d like to replicate this process, these are the steps
- Create two library files. One called “core” and one called “Product A”
- In the “core” library file, create two rectangles with different solid fill colors
- Turn both rectangles into components, and then combine both components into a variant.
- Set up a “while hovering, change to rectangle 2" interaction on the first rectangle, and a “Mouse leave, change to rectangle 1” interaction on the second. This should mimic a basic button hover interaction.
- Name this component “Core rectangle” and publish the library.
- In the “Product A” file, insert two instances of “Core rectangle.” Set one of them to the default variant, and the other to the hover state.
- Make both of these instances main components, and then combine both of those components into a variants.
- Override the fill color of both rectangles in the “Product A” file.
- Name this component “Product A Rectangle”
- Place an instance of “Product A Rectangle” on a frame and click the “play” button to test the interaction
What should happen now is when you hover on “Product A Rectangle” the hover state will jump to the original color of the “Core rectangle” component. And when your mouse leaves, it will also be the original color from the “Core rectangle” component. The color overrides made in the “Product A” components are not visible.
My expectation would be that overrides set in “Product A” would persist.
My question is: is this a bug of interactive components? Or is the best practice to set up prototype connections at the surface level (as opposed to nested instances) of components?