Background/Goal
[discussion started in this Slack thread with some designers]
Primitive colors (option tokens) were no added as Figma styles to avoid designers using them as wrong decision tokens in their projects. But some designers miss them while working. Some of the use cases where they miss them are:
- Custom components: custom project components where we would want to ensure the colors that are being applied are from the palette. (Example: Growth homepage module background color and border)
- Creating illustrations: they would like to use the color palette instead using an hex
- Creating new UI - Maybe less common but when designing something new, it would be more convenient to have access to primitive color styles without being constrained to the existing decision tokens. In this case they should create a request to include the new decision token in the system.
- Scratchpad: if just noodling away or quickly sketching out ideas with someone else, they will open up a virtual “scratchpad” figma and paste screenshots and add different elements over it. Here again, it is useful and faster to apply the primitive colors instead of loading up decision tokens. (Example below from scratchpad doodling over a Wikisource screenshot)
If we don't add the color primitives they should use the hex instead and they should remember ~20 different codes when it could easily be available in Colour Styles.
User stories
- As a designer, I need to use the primitive colors to create illustrations.
- As a designer, I need to use the primitive colors to create quick examples or scratchpad that will not be developed.
- As a designer, I need to use the primitive colors to create new components (and then replace them with decision tokens).
- As a designer I need to easily understand that decision tokens are the ones that should be used when developing new components and projects.
Considerations
NOTE: it's important to add the primitive colors in a way designers can easily know that these colors should be replaced with decision tokens if they are using them in development projects (in this case, illustrations don't need to use decision tokens)
Acceptance criteria (or Done)
- Add primitive colors as Figma styles in our Design Tokens library
- Make sure designers understand they won't be used to create components or projects that will be developed (in this case they will use decision tokens instead)
- Publish library with the new color styles added
