Tweak as you wish the second color variable (Color A’).Duplicate your initial color variable (Color A >Color A’).When iterating on your design system colors.When you want to A/B several color explorations.This trick will allow you to explore with color variables without breaking the design, and enable you to apply the new colors in a breeze when you’re done with the exploration. What’s the trick?ĭuplicate the color variables, A/B, and use merge color variables to have the new colors applied everywhere. So we thought of using merge color variables to do the boring hard work for us. Changing directly your color variables may be harmful, as it may affect all the components, design tokens, and rest of handoff (and mess around with other designers working on the file).ĭuplicating the variables and have them applied elsewhere manually once may be a pain, but doing it for several explorations may take forever. Say you’re planning to update your design system colors (new branding, new theme, or just a refresh?). Trick 2: Explore with design system colors Otherwise, Undo the merge, and keep iterating □. If you’re happy with any of them, you’re done.Do you have further explorations to check? Hit Undo (⌘+Z), and repeat steps 2 to 4 with the other exploration.This will “apply” Symbol A’ everywhere (and also remove Symbol A - we know - but keep reading) Select both, and run Merge selected symbols.Tweak as you wish the second component (Symbol A’).Duplicate your initial component (Symbol A >Symbol A’).To iterate a component in your design system library.
0 Comments
Leave a Reply. |