CSS Library: Generate a Figma token file

[jamigibbs]

Description

Reference discovery ticket: #1837

An NPM package exists that we could use for Figma: style-dictionary-to-figma. I connected this package and generated a tokens file with it as part of this discovery work but this will need to be verified that it's working as expected as part of the development ticket.

The Figma documentation says that you can import/use that file just by linking to its public source.

This design token validator might be useful too https://animaapp.github.io/design-token-validator-site/

Tasks

• A token files has been created in the CSS Library that works with Figma

Acceptance Criteria

• The token file has been tested for Figma and confirmed to work as expected.

[ataker]

Here are the steps to add the color token to Figma:

1. In Figma, open the top left Figma menu, then select Plugins, then Sync Design Tokens
   

2. In the modal form, for the Tokens json file url enter the URL for our token file and for case type select the Kebab radio button. Click the Import Tokens button.

3. The colors should populate under Local Styles in the right side menu.

@LillyBoot

Note to self: our token URL will need to be updated after the pull request is merged in. Edit: Token URL updated

[LillyBoot]

@ataker the design tokens were able to import with no issue! The only minor things I noticed were that some of the color names came in as an asterisk and they were not in groups (i.e. primary, secondary, gray). Not sure if that is something you could fix on your end. If not we can always change it manually in Figma

[ataker]

@LillyBoot Updated so they have the name, and all the alternates are prefixed with the group they're in:

The base ones now end with a hyphen though, I don't think I can help that.

[LillyBoot]

@ataker thank you for fixing that! It looks much better.

@humancompanion-usds any thoughts?

[humancompanion-usds]

Looks good. I'm still working through the colors in tokens. There are some I'd like to rename/move:

• warning-message should become feedback-warning-background. It's MVP value is #fac922 but it will move to match the USWDS value of uswds-system-color-yellow-5 (#faf3d1) in the final v3 color set.
• gibill-accent. I'm not sure this is still in use or if it's a hub color or what. Can we investigate? That will help me rename it.
• orange. What in the world is this doing there?! It's such an odd call out. That too needs some investigation. Is it in use? Is it a hub color? What is it? That will help me rename it.

Otherwise the list looks complete to me in Figma.

[ataker]

This PR should address all three colors:

• warning-message updated to feedback-warning-background
• gibill-accent has been removed. This was a duplicate of gold-lightest only used in the GI Bill portion of vets-website (which I have a separate PR to update that to the more standard name)
• orange has been removed. This was only used within storybook. Moved to a more appropriate location

[ataker]

We still need to remove warning-message, which will be handled in this ticket