To reduce component weight, my design system team has been exploring using variable modes to toggle between different “variants” of a component, rather than just using variants. The benefit of this is that for these “style” specific properties, where just styles are changed like fill and stroke, using modes significantly reduces the weight of a component in the system. In this example I use a Badge component, and variables to change between the colors of the badge.
However, my component code still has a “color” prop. Because I don’t have a color prop on my Figma component, but rather a “BadgeColor” mode that controls this property, is there a way in which CodeConnect can still map this to the correct code property? Currently it doesn’t seem like CodeConnect can read anything that is not a property. Realistically all I need is the CodeConnect to be able to read the string value of the mode, and map that to the actual code prop.
Get CodeConnect to read variable modes.
I’m also running into this issue.
When using code connect with storybook, I can't get the variable modes from my component to map to code props.
With the introduction of variables and variable modes I've been reducing the amount of variants that each component has. The less component variants the better for file memory when using those in another file. But now I can't map the variable modes to the storybook component code props.
Please add variable modes to be able to connect to a component prop via code-connect.
It seems counter productive to take advantage of the variables and variable modes to build better components because then I can't use code-connect to match the correct props and now code-connect is useless without accessing the variable modes.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.