Note: This plugin is currently in a beta phase. If you find any bugs / issues or have feature ideas please create an issue.

The Design Tokens plugin for figma allows you to export design tokens into a json format that can be used with the Amazon style dictionary package. This allows you to transform your tokens to different languages / platforms like web, iOS or Android.

• Installation
• Plugin usage
• Transforming tokens using Amazon style dictionary
• Creating design tokens
  • Figma style design tokens
  • Custom design tokens
    • Border tokens
    • Radii token
    • Size token
    • Motion token
  • Available properties
• Settings
• Roadmap & PRs

1. Go to the design tokens plugin page
2. Click on install in the top right corner

The plugin has a couple options in the menu items:

This creates a .json file with all design tokens from your Figma project. A dialog will open allowing you to save the file on your hard drive.

This triggers a request sending your tokens to a server. For this to work you must have configured a server to send your tokens to in the plugin settings.

Opens the settings view, which allows you to change all settings mentioned in the settings section below.

Opens this documentation page.

1. Clone the design token transformer repositiory.

git clone https://github.com/lukasoppermann/design-token-transformer.git

2. Export your tokens using the plugin and place the json file in the tokens folder within the transformer repositry
3. Run npm run transform-tokens from the commandline
4. 🎉 Your converted tokens should be in the build folder. For more customization options check out the design token transformer documentation

The plugin converts the styles you define in Figma into design tokens, this includes Text Styles, Color Styles, Grid Styles and Effect Styles.

Every property of a style will be converted to an individual token. For a Text Styles this may result in the following tokens (show as transformed css custom properties for readability).

  --font-headline-3-font-size: 20;
  --font-headline-3-text-decoration: none;
  --font-headline-3-font-family: Roboto;
  --font-headline-3-font-style: italic;
  --font-headline-3-font-weight: 500;
  --font-headline-3-font-stretch: condensed;
  --font-headline-3-font-style-old: Medium Italic Condensed; /* only to preserve original value */
  --font-headline-3-letter-spacing: 2;
  --font-headline-3-line-height: 160;
  --font-headline-3-paragraph-indent: 5;
  --font-headline-3-paragraph-spacing: 8;
  --font-headline-3-text-case: uppercase;

Styles don't have to follow a specific naming convention. Any style will be exported into a design token, as long as it does not match the ignore pattern.

This means you can name your styles Headline or Foundation/Colors/Primary/Red/100 and either one works fine.

Styles you don't want to be exported as design tokens can be prefixed with an _ underscore. For example a color style called _readlining/line-color will not be exported.

In the settings you can change the prefix for ignoring/including styles.

The plugin also supports custom tokens for borders, radii, sizes, spacing & motion.

• Every custom design token must be directly within a top-level Frame with a name starting with _tokens. This means you have a structure like this: page > _tokens/sizes > sizes/8. Nesting is not possible at this point.
• The token itself has to have a name starting with sizes, spacing, borders, radii or motion and has to be a Frame, Rectangle or Main Component. This is so that the plugin can identify what is and what isn't a token.
• The token has to be a direct child of a _token frame

To create a sizes token, do the following:

1. Create a Frame and name it _tokens/sizes
2. Create another Frame, Rectangle or Main Component and set the width property to your 8.
3. Name it sizes/8. Note, it is important to use the sizes/ prefix.

The token will be exported, if you convert it to css the output would be something like this:

  --sizes-8: 8;

Open example figma file

To create a spacing token, do the following:

1. Create a Frame and name it _tokens/spacing
2. Create another Frame, Rectangle or Main Component and set the padding properties to 10 in the auto layout.
3. Name it spacing/10. Note, it is important to use the spacing/ prefix.

The token will be exported, if you convert it to css the output would be something like this:

  --spacing-10-top: 10;
  --spacing-10-right: 10;
  --spacing-10-bottom: 10;
  --spacing-10-left: 10;

Open example figma file

To create a border token, do the following:

1. Create a Frame and name it _tokens/borders
2. Create another Frame, Rectangle or Main Component and set the stroke property to your desired values.
3. Name it borders/dashed-outside. Note, it is important to use the borders/ prefix.

The token will be exported, if you convert it to css the output would be something like this:

  --borders-dashed-outside-stroke-align: outside;
  --borders-dashed-outside-dash-pattern: 5,5,3,3;
  --borders-dashed-outside-stroke-cap: none;
  --borders-dashed-outside-stroke-join: miter;
  --borders-dashed-outside-stroke-miter-limit: 4;
  --borders-dashed-outside-stroke-weight: 1;
  --borders-dashed-outside-stroke: rgba(64, 255, 186, 1);

To create a radius token, do the following:

1. Create a Frame and name it _tokens/radii
2. Create another Frame, Rectangle or Main Component and set the radius properties to your desired values.
3. Name it radii/same-with-smoothing. Note, it is important to use the radii/ prefix.

The token will be exported, if you convert it to css the output would be something like this:

  --radii-same-with-smoothing-radius: 5;
  --radii-same-with-smoothing-radius-type: single;
  --radii-same-with-smoothing-radii-top-left: 5;
  --radii-same-with-smoothing-radii-top-right: 5;
  --radii-same-with-smoothing-radii-bottom-right: 5;
  --radii-same-with-smoothing-radii-bottom-left: 5;
  --radii-same-with-smoothing-smoothing: 0.65;

Motion tokens are a combination of an easing curve, a duration and an animation type. To create a motion token follow this flow:

1. Create a new Frame called _tokens/motion
2. Create a new Frame, Component or Rectangle
3. Name it motion/move-in. Note, it is important to use the motion/ prefix.
4. Enter prototyping mode and link the element motion/move-in to any other element.
5. Choose an animation type, easing curve and a duration

When exporting your tokens you will now get a set of properties for this motion set.

  --motion-move-in-type: move_in;
  --motion-move-in-duration: 0.5;
  --motion-move-in-easing: ease-in;
  --motion-move-in-easing-function-x-1: 0.41999998688697815;
  --motion-move-in-easing-function-x-2: 1;
  --motion-move-in-easing-function-y-1: 0;
  --motion-move-in-easing-function-y-2: 1;
  --motion-move-in-direction: left;

To allow for maximum customizability I decided to provide all values that Figma provides. Many are not applicable to for example css but may be usable in other languages.

Colors are provided in rgba but can be converted using Amazon style dictionary.

This allows you to define the file name that is used when exporting tokens. The .json extension will be automatically appended to the name. The filename will also be send to the server when sending design tokens to the server.

You can change the prefix from _ to anything, e.g. _tokens.

The toggle allows you to switch from exclude to include mode. This means that only prefixed styles will be exported. For example if you only wanted to export styles that are named _tokens/....

Note: This setting only applies to Figma styles (colors, typography, grids & effects). It does not apply to custom tokens.

When a server url is specified, the command Send Design Tokens to Url will send a POST request to the provided url. The body of the request will look like the following:

  "event_type": "update-tokens", // or any string you defined
  "client_payload": { 
    "tokenFileName": "design-tokens.json", // this is the filename you define above
    "tokens": "{...}", // the stringified json object holding all your desing tokens
    "filename": "Design Tokens" // the Figma file name from which the tokens were exported
  }

This is the event_type property that is send in the body of the request with the client_payload.

The url the post request is send to. This must be SSL secured (using https) as Figma is a secure environment and thus does not allow non-secure requests. A limitation that comes with Figma is that the server must allow access from any origin and send the following header: Access-Control-Allow-Origin: *

If you push to github the server url must be in the format

https://api.github.com/repo/:username/:repo/dispatches

For the repositiory lukasoppermann/design-token-transformer this would be:

https://api.github.com/repos/lukasoppermann/design-token-transformer/dispatches

This defines the authentication method used with the access token. The current choices are:

• token (used for github)
• bearer token
• basic auth

The token send using the authentication method defined above. Learn more about creating a personal access token for github.

You can use this feature to integrate tokens into your build pipeline. The ideal is to send tokens from Figma to a repository and automatically transform them. Depending on your setup you could either trigger a webhook on your product repos, create a new semversion on the tokens repo or notify the dev teams in another way.

To learn how to set this up using github and actions check out the documentation and code examples in the design token transformer repositry.

This plugin is under active development. You can find all planned features in the roadmap.

If you would like to see a specific feature implemented, please create an issue including a description of the feature and a use case.

If you can build the feature yourself and send a PR, this is even better. Please still create an issue first and mention that you want to implement it. I will get back to you asap to discuss the details of how to implement it.

If you are interested in helping please comment on any issue you would like to take on. I will get back to you to discuss how to implement it.