lukasoppermann / Design Tokens
Programming Languages
Labels
Projects that are alternatives of or similar to Design Tokens
Design Tokens
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.
Table of content
- Installation
- Plugin usage
- Transforming tokens using Amazon style dictionary
- Creating design tokens
- Settings
- Roadmap & PRs
Installation
- Go to the design tokens plugin page
- Click on install in the top right corner
Plugin usage
The plugin has a couple options in the menu items:
Design Tokens > Export Design Token File
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.
Design Tokens > Send Design Tokens to Url
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.
Design Tokens > Settings
Opens the settings view, which allows you to change all settings mentioned in the settings section below.
Design Tokens > Help
Opens this documentation page.
Transforming tokens using Amazon style dictionary
- Clone the design token transformer repositiory.
git clone https://github.com/lukasoppermann/design-token-transformer.git
- Export your tokens using the plugin and place the json file in the
tokens
folder within the transformer repositry - Run
npm run transform-tokens
from the commandline - 🎉 Your converted tokens should be in the
build
folder. For more customization options check out the design token transformer documentation
Creating Design Tokens
Figma style design tokens
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;
Naming
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.
Ignoring styles
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.
Custom design tokens
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
ormotion
and has to be aFrame
,Rectangle
orMain 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
Sizes
To create a sizes token, do the following:
- Create a
Frame
and name it_tokens/sizes
- Create another
Frame
,Rectangle
orMain Component
and set the width property to your8
. - Name it
sizes/8
. Note, it is important to use thesizes/
prefix.
The token will be exported, if you convert it to css the output would be something like this:
--sizes-8: 8;
Spacing
To create a spacing token, do the following:
- Create a
Frame
and name it_tokens/spacing
- Create another
Frame
,Rectangle
orMain Component
and set the padding properties to10
in theauto layout
. - Name it
spacing/10
. Note, it is important to use thespacing/
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;
Borders
To create a border token, do the following:
- Create a
Frame
and name it_tokens/borders
- Create another
Frame
,Rectangle
orMain Component
and set the stroke property to your desired values. - Name it
borders/dashed-outside
. Note, it is important to use theborders/
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);
Radii
To create a radius token, do the following:
- Create a
Frame
and name it_tokens/radii
- Create another
Frame
,Rectangle
orMain Component
and set the radius properties to your desired values. - Name it
radii/same-with-smoothing
. Note, it is important to use theradii/
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
Motion tokens are a combination of an easing curve
, a duration
and an animation type.
To create a motion token follow this flow:
- Create a new
Frame
called_tokens/motion
- Create a new
Frame
,Component
orRectangle
- Name it
motion/move-in
. Note, it is important to use themotion/
prefix. - Enter
prototyping mode
and link the elementmotion/move-in
to any other element. - Choose an
animation type
,easing curve
and aduration
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;
Available properties
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.
Settings
Filename
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.
Name Conversion
This option allows you to define how the token names will be converted when they are store in the json file, the available options are:
-
Default
– spaces from the beginning and end are removed and the name is converted to lowercase -
camelCase
- spaces from the beginning and end are removed and the name is converted to camelCase -
kebab-case
- spaces from the beginning and end are removed and the name is converted to kebab-case
Prefix (used to in-/exclude styles)
Prefix
You can change the prefix from _
to anything, e.g. _tokens
.
Exclude
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.
Push to Server
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
}
Event type
This is the event_type
property that is send in the body of the request with the client_payload
.
Server url
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: *
Pushing to Github
If you push to github the server url must be in the format
https://api.github.com/repos/:username/:repo/dispatches
For the repositiory lukasoppermann/design-token-transformer
this would be:
https://api.github.com/repos/lukasoppermann/design-token-transformer/dispatches
Auth header
This defines the authentication method used with the access token. The current choices are:
-
token
(used for github) -
bearer
token -
basic
auth
Access token
The token send using the authentication method defined above. Learn more about creating a personal access token for github.
Github repo or custom server
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.
Roadmap & PRs
Roadmap
This plugin is under active development. You can find all planned features in the roadmap.
Feature requests & help
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.
Help develop this plugin
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.