open-index/open-npm huggingface dataset:
npm package: @platohq/design-tokens
Description: Automates the provision of Design Tokens from our designers
Latest version: 1.5.0

# Design Tokens

Design Tokens are the foundation of our Design System. They allow designers to change elements of design in our production website with minimal intervention from engineers. Here are some resources from [Adobe](https://spectrum.adobe.com/page/design-tokens/), [css-tricks](https://css-tricks.com/what-are-design-tokens/) and [Amazon's style dictionary](https://amzn.github.io/style-dictionary/#/).

We currently integrate with Figma.

#### Installation

To edit the Design Tokens, you need to:

- install [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) in your Figma
- follow [this guide](https://docs.tokens.studio/sync/github#3-generate-your-personal-access-token) to authorize Figma to push your changes here.
  - Repository: `platohq/plato-design-tokens`
  - Default Branch: `main`
  - File Path: `tokens.json`

#### Test

You have changed some Figma Tokens and you want to preview them in the Plato website. In Figma:

1. Publish your changes to the team
2. Push your changes to Github
3. Preview your changes at [preview.platohq.dev](https://preview.platohq.dev/).

It takes about 5 minutes for the website to reflect your changes.

#### Promote

You want to promote your changes to the production website. Please contact an engineer to include the new designs in the next release.