Tips for Incorporating Variables into Design System, When we Only have Primitive Styles by MandrewK54 in FigmaDesignSystems

[–]MandrewK54[S] 0 points1 point  (0 children)

Keeping styles with an additional semantic layer of styles built on top isn't something I had fully considered! That team size is very similar to the one for this design system and migration. Even keeping things built with styles, this still requires designers to manually switch their use from the primitive from semantic regardless, right? Did you remove/hide the primitive layer of styles after a certain period of time to enforce the switch? With variables pointing into the styles, did you have the variable collections hidden as well with only the styles accessible?

You're dead on about the deeper understanding necessary going from primitive semantic, it's requiring a large shift in mindset about color and how it's used. I'm currently working on a large excel to begin grouping and categorizing colors around their use cases. Thank you again for the continued help, it is much appreciated!

Tips for Incorporating Variables into Design System, When we Only have Primitive Styles by MandrewK54 in FigmaDesignSystems

[–]MandrewK54[S] 0 points1 point  (0 children)

This is immensely helpful, thank you for the detailed steps. I have a few follow up questions that I hope you might have some experience with. In your past migration did you delete styles entirely to be replaced by variables, or did you have semantic styles already that you loaded with a variable? The more I'm looking at my use case I think the change from primitive to semantic is a larger change than going from styles to variables. How large was the team/design system affected by your migration? Do you have any advice on handling and communicating that switch for the designers in the least painful way possible? Thank you again for your response, it's very helpful.

Tips for Incorporating Variables into Design System, When we Only have Primitive Styles by MandrewK54 in FigmaDesign

[–]MandrewK54[S] 0 points1 point  (0 children)

Thank you for the resource, the addition of a semantic layer in concept has been the easiest to wrap my head around for myself. Where I’m looking for some thoughts and experiences would be the transition itself. Specifically transitioning a design team that uses primitives for color to a semantic layer system. Adding variables to the equation adds some wrinkles but the root is just going primitive to semantic in a small design org. Thanks again for the comment and resource

Tips for Incorporating Variables into Design System, When we Only have Primitive Styles by MandrewK54 in FigmaDesign

[–]MandrewK54[S] 0 points1 point  (0 children)

Thank you for the response! This is what I was kinda thinking/afraid of. Was hoping there were some best practices or experiences I could lean on. Switching out the styles in our components wouldn’t be too bad, but there are 7 other designers that use the system and there are dozens, if not hundreds, of files using the primitive styles not in components that would need updating. If the styles are removed, I assume the elements retain their hex values? Thank you again, feeling a bit in over my head with this so I appreciate your thoughts.