Skip to main content

I have a set of color variables which I would like to use for text-- and then have the color variables available in the component’s Properties panel.


The same question goes for a color fill on a shape.


Use case: We have banners that need to be able to change text color between a set of pre-defined Color Variables. The text color is NOT the primary thing that differentiates these banners (so it doesn’t really make sense to make a dozen different Variants of the banner component based on text color), and we prefer not to have our designers ctrl+click on the text box and manually select the Color Variable. Anytime we have to manually select a Color Variable for an Instance, we have issues with the designers just typing in a HEX code or grabbing a similar-looking Color Style.


We can kind-of solve this issue for Shapes by using a “cascading components” logic, where we make a “background color” rectangle component with a variant for each color, and then use an Instance of that component in our banner frame (with clipping set), instead of applying a color fill background. Then, the banner uses Nested Properties to show a dropdown showing the different “background color” variants.


This workaround doesn’t work for text color fills. Is it possible to expose the text color fill in the Component Properties so that a dropdown appears showing the Variables Collection in use? Or, the Color Style folder in use?

Be the first to reply!

Reply