Design Tokens - Setting up Figma Variables - Githubissues

grommet / hpe-design-system

HPE Design System

48 stars 24 forks source link

Design Tokens - Setting up Figma Variables #3466

Open KennyAtHPE opened 1 year ago

KennyAtHPE commented 1 year ago

Previous ticket #3309

After doing more research and exploration, we've concluded that moving forward we will be using the new Figma Variables feature as opposed to any 3rd party plugins (ex. Figma Tokens Studio).

Joelle's explorations: https://www.figma.com/file/QXcCKvgzJpfaOTzu7F7AEn/Data-Visualization?type=design&node-id=415-18159&mode=design&t=JW7LP6RXd7hD5mTP-0

ToDos

[ ] Connect w/ Kenny, Taylor, Joelle, and Ashley to figure out how to best set up the Figma Variables (values, aliases, collections, modes, etc.)
[ ] Setup the Figma Variables as closely to how our tokens are currently established
[ ] Identify holes and create additional variables as needed
[ ] Share out to the team
[ ] Create follow on ticket(s) to test out the new variables on a POC (rec: global header, page layouts, other templates)

Things to keep in mind

A number variable cannot be used for border size (might be available in the future)
Styles should be used over variables for:
- Typography (font, size, and other type settings)
- Colors that contain multiple fills (ex. Validation, Critical)

vavalos5 commented 1 year ago

Found this article on LinkedIn on structuring and naming Design Tokens which I thought could be helpful 😄