{"id":13554863,"url":"https://github.com/lukasoppermann/design-tokens","last_synced_at":"2025-04-06T13:08:35.244Z","repository":{"id":36963356,"uuid":"296301916","full_name":"lukasoppermann/design-tokens","owner":"lukasoppermann","description":"🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.","archived":false,"fork":false,"pushed_at":"2024-09-19T19:41:47.000Z","size":15340,"stargazers_count":961,"open_issues_count":41,"forks_count":134,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-10-29T17:26:36.627Z","etag":null,"topics":["amazon-style-dictionary","design-system","design-tokens","figma","figma-api","figma-plugin","style-dictionary"],"latest_commit_sha":null,"homepage":"https://www.figma.com/community/plugin/888356646278934516/Design-Tokens","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukasoppermann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["lukasoppermann"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2020-09-17T11:07:26.000Z","updated_at":"2024-10-29T03:24:40.000Z","dependencies_parsed_at":"2023-01-17T09:00:57.266Z","dependency_job_id":"f6cf9abb-0243-4c68-9490-87dcf0c6f89c","html_url":"https://github.com/lukasoppermann/design-tokens","commit_stats":{"total_commits":393,"total_committers":22,"mean_commits":"17.863636363636363","dds":0.2111959287531806,"last_synced_commit":"2ef9a84e177a7a45ac2f6d6c2175de11c6acf29b"},"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fdesign-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fdesign-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fdesign-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fdesign-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasoppermann","download_url":"https://codeload.github.com/lukasoppermann/design-tokens/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485283,"owners_count":20946398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon-style-dictionary","design-system","design-tokens","figma","figma-api","figma-plugin","style-dictionary"],"created_at":"2024-08-01T12:02:56.460Z","updated_at":"2025-04-06T13:08:35.219Z","avatar_url":"https://github.com/lukasoppermann.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lukasoppermann"],"categories":["TypeScript","开源插件","Plugins","Open-Source Plugins"],"sub_categories":["Figma"],"readme":"\u003e [!WARNING]\n\u003e **This plugin is only partially supported!**  \n\u003e This means: I don't have capacity to add any features or really improve stuff. Bugfixes may be added if time allows.\n\u003e I am also happy to discuss and merge PRs.\n\u003e \n\u003e I personally have changed my opinion a long time ago to favor the source fo truth for design tokens to be in a json file. Figma should be a consumer so you only import tokens into figma. This is why I don't use plugins like this one anymore in my work. \n\u003e \n\u003e → [Read more about the a better setup](https://medium.com/user-experience-design-1/the-ultimate-design-token-setup-cdf50dc841c8#:~:text=you%20are%20making.-,Source%20of%20truth,-There%20is%20some)\n\n\n![Design Tokens plugin for figma](https://github.com/lukasoppermann/design-tokens/blob/main/_resources/Design%20Tokens%20Plugin%20Cover.png)\n\n# Design Tokens\n\n\u003ca href=\"https://www.producthunt.com/posts/figma-design-tokens-2?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-figma-design-tokens-2\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=273532\u0026theme=light\" alt=\"Figma Design Tokens - Export \u0026 convert design tokens or sync with github repo. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\n[![Test status](https://github.com/lukasoppermann/design-tokens/workflows/Testing%20and%20linting/badge.svg)](https://github.com/lukasoppermann/design-tokens/actions?query=workflow%3A%22Testing+and+linting%22) [![Coverage Status](https://coveralls.io/repos/github/lukasoppermann/design-tokens/badge.svg?branch=main)](https://coveralls.io/github/lukasoppermann/design-tokens?branch=main)\n\nThe **Design Tokens** plugin for Figma allows you to export design tokens into a json format that can be used with the [Amazon style dictionary](https://amzn.github.io/style-dictionary/#/) package. This allows you to transform your tokens to different languages / platforms like web, iOS or Android.\n\n## Table of content\n\n- [Installation](#installation)\n- [Plugin usage](#plugin-usage)\n- [FAQ](#faq)\n- [Transforming tokens using Amazon style dictionary](#transforming-tokens-using-amazon-style-dictionary)\n- [Creating design tokens](#creating-design-tokens)\n  - [Figma style design tokens](#creating-design-tokens)\n  - [Figma variables](#variables-beta)\n  - [Custom design tokens](#custom-design-tokens)\n    - [Border tokens](#borders)\n    - [Radii token](#radii)\n    - [Size token](#sizes)\n    - [Spacing token](#spacing)\n    - [Breakpoints token](#breakpoints)\n    - [Motion token](#motion)\n    - [Opacity token](#opacity)\n  - [Available properties](#available-properties)\n- [Settings](#settings)\n  - [File Export Settings](#file-export-settings)  \n  - [Push tokens to Github / Server](#push-to-server)\n- [Contribution](#contribution)\n\n## Installation\n\n\u003cimg src=\"https://github.com/lukasoppermann/design-tokens/raw/main/_resources/Design%20Tokens%20Plugin%20Icon.png\" width=\"50px\"\u003e\n\n1. Go to the [design tokens plugin page](https://www.figma.com/community/plugin/888356646278934516/Design-Tokens)\n2. Click on install in the top right corner\n\n## Plugin usage\n\nThe plugin has a couple options in the menu items:\n\n### `Design Tokens \u003e Export Design Token File`\n\nThis 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.\n\n### `Design Tokens \u003e Send Design Tokens to Url`\n\nThis 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](#push-to-server).\n\n### `Design Tokens \u003e Settings`\n\nOpens the settings view, which allows you to change all settings mentioned in the [settings](#settings) section below.\n\n### `Design Tokens \u003e Reset Settings`\n\nResets all your settings to the default. This is helpful when you run into problems with corrupted settings (Plugin does not work as expected).\n\n### `Design Tokens \u003e Demo File`\n\nOpens the [demo figma file](https://www.figma.com/file/2MQ759R5kJtzQn4qSHuqR7/Design-Tokens-for-Figma?node-id=231%3A2).\nNote: You will not have permission to change or export tokens from this file but it will give you an idea of how to set up tokens.\n\n### `Design Tokens \u003e Help`\n\nOpens this documentation page.\n\n## FAQ\n\nYou can find frequent questions and issues in the [faq](https://github.com/lukasoppermann/design-tokens/blob/main/faq.md).\n\n## Transforming tokens using Amazon style dictionary\n\n1. Clone the [design token transformer](https://github.com/lukasoppermann/design-token-transformer) repository.\n\n```cli\ngit clone https://github.com/lukasoppermann/design-token-transformer.git\n```\n\n2. Export your tokens using the plugin and place the json file in the `tokens` folder within the transformer repository\n3. Run `npm run transform-tokens` from the command line\n4. 🎉 Your converted tokens should be in the `build` folder. For more customization options check out the [design token transformer documentation](https://github.com/lukasoppermann/design-token-transformer)\n\n## Transforming tokens using Amazon style dictionary and style dictionary utils\n\nThe package [style-dictionary-utils](https://github.com/lukasoppermann/style-dictionary-utils) provides a parsers and many filters and transformers that can be used with `w3c design tokens`.\n\nIt is meant to help you set up a build process with the tokens exported from figma design tokens.\n\n## Creating Design Tokens\n\n### Figma style design tokens\n\nThe plugin converts the styles you define in Figma into design tokens, this includes `Text Styles`, `Color Styles`, `Grid Styles` and `Effect Styles`.\n\nDepending on the export format you get a different result. In the `Original` format every property of a style will be converted to an individual token.\nWhen using the `Standard` format composite tokens are created, for example the properties of a text style are all exported as one composite token.\n\nHowever for `Text Styles` the `Standard` format has a special `typography` type that if enabled exports the individual tokens as well. This may result in the following tokens (show as transformed css custom properties for readability).\n\n```css\n  --font-headline-3-font-size: 20;\n  --font-headline-3-text-decoration: none;\n  --font-headline-3-font-family: Roboto;\n  --font-headline-3-font-style: italic;\n  --font-headline-3-font-weight: 500;\n  --font-headline-3-font-stretch: condensed;\n  --font-headline-3-font-style-old: Medium Italic Condensed; /* only to preserve original value */\n  --font-headline-3-letter-spacing: 2;\n  --font-headline-3-line-height: 160;\n  --font-headline-3-paragraph-indent: 5;\n  --font-headline-3-paragraph-spacing: 8;\n  --font-headline-3-text-case: uppercase;\n```\n\n#### Naming\n\nStyles 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`](#ignoring-styles).\n\nThis means you can name your styles `Headline` or `Foundation/Colors/Primary/Red/100` and either one works fine.\n\n#### Ignoring styles\n\nStyles 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.\n\nIn the settings you can change the [prefix](#prefix-used-to-in-exclude-styles) for ignoring/including styles.\n\n### Variables (BETA)\n\nThe plugin exports variables to generic design tokens. This only works when the `Standard` export format is selected.\n\n#### Naming\n\nVariables don't have to follow a specific naming convention. When exported the `collection` name and the `mode` name is prefixed to the variable name to avoid naming collisions.\n\n### Custom design tokens\n\nThe plugin also supports custom tokens for `borders`, `radii`, `sizes`, `spacing` \u0026 `motion`.\n\n- Every custom design token must be within a top-level `Frame` with a name starting with `_tokens`. This means you have a structure like this: `page` \u003e `_tokens/sizes` \u003e `sizes/8`.\n- The token itself has to have a name starting with `sizes`, `spacing`, `borders`, `radii` or `motion` and has to be a `Main Component` or `variant`. This is so that the plugin can identify what is and what isn't a token.\n\n#### Variants\n\n**Naming:** The name for the design token will be created by combining the main name with the property value e.g. variant `sizes` with the property `size` with the values `8` and `16` will result in 2 tokens\n\n- `sizes/8`\n- `sizes/16`\n\n**Ignore properties:** If you want a property to be ignored you can prefix it with an `_`, e.g. the property `_hidden` will be ignored.\n\n#### Sizes\n\nTo create a *sizes token*, do the following:\n\n1. Create a `Frame` and name it `_tokens/sizes`\n2. Create another `Main Component` and set the width property to your `8`.\n3. Name it `sizes/8`. Note, it is important to use the `sizes/` prefix.\n\nThe token will be exported, if you convert it to css the output would be something like this:\n\n```css\n  --sizes-8: 8;\n```\n\n![Example size tokens](https://github.com/lukasoppermann/design-tokens/raw/main/_resources/example-sizes-tokens.png)\n\u003ca href=\"https://www.figma.com/file/2MQ759R5kJtzQn4qSHuqR7/Design-Tokens-for-Figma?node-id=1260%3A44\" target=\"_blank\"\u003eOpen example figma file\u003c/a\u003e\n\n#### Spacing\n\nTo create a *spacing token*, do the following:\n\n1. Create a `Frame` and name it `_tokens/spacing`\n2. Create another `Main Component` and set the padding properties to `10` in the `auto layout`.\n3. Name it `spacing/10`. Note, it is important to use the `spacing/` prefix.\n\nThe token will be exported, if you convert it to css the output would be something like this:\n\n```css\n  --spacing-10-top: 10;\n  --spacing-10-right: 10;\n  --spacing-10-bottom: 10;\n  --spacing-10-left: 10;\n```\n\n![Example spacing tokens](https://github.com/lukasoppermann/design-tokens/raw/main/_resources/example-spacing-tokens.png)\n\u003ca href=\"https://www.figma.com/file/2MQ759R5kJtzQn4qSHuqR7/Design-Tokens-for-Figma?node-id=1493%3A0\" target=\"_blank\"\u003eOpen example figma file\u003c/a\u003e\n\n#### Breakpoints\n\nTo create a *breakpoint token*, do the following:\n\n1. Create a `Frame` and name it `_tokens/breakpoints`\n2. Create another `Main Component` and set the width property to your desired values (example for `lg` -\u003e `1280` ).\n3. Name it `breakpoints/lg`. Note, it is important to use the `breakpoints/` prefix.\n\nThe token will be exported, if you convert it to css the output would be something like this:\n\n```css\n  --breakpoints-lg: 1280;\n```\n\n![Example breakpoints tokens](https://github.com/lukasoppermann/design-tokens/raw/main/_resources/example-breakpoints-tokens.png)\n\n#### Borders\n\nTo create a *border token*, do the following:\n\n1. Create a `Frame` and name it `_tokens/borders`\n2. Create another `Main Component` and set the stroke property to your desired values.\n3. Name it `borders/dashed-outside`. Note, it is important to use the `borders/` prefix.\n\nThe token will be exported, if you convert it to css the output would be something like this:\n\n```css\n  --borders-dashed-outside-stroke-align: outside;\n  --borders-dashed-outside-dash-pattern: 5,5,3,3;\n  --borders-dashed-outside-stroke-cap: none;\n  --borders-dashed-outside-stroke-join: miter;\n  --borders-dashed-outside-stroke-miter-limit: 4;\n  --borders-dashed-outside-stroke-weight: 1;\n  --borders-dashed-outside-stroke: rgba(64, 255, 186, 1);\n```\n\n#### Radii\n\nTo create a *radius token*, do the following:\n\n1. Create a `Frame` and name it `_tokens/radii`\n2. Create another `Main Component` and set the radius properties to your desired values.\n3. Name it `radii/same-with-smoothing`. Note, it is important to use the `radii/` prefix.\n\nThe token will be exported, if you convert it to css the output would be something like this:\n\n```css\n  --radii-same-with-smoothing-radius: 5;\n  --radii-same-with-smoothing-radius-type: single;\n  --radii-same-with-smoothing-radii-top-left: 5;\n  --radii-same-with-smoothing-radii-top-right: 5;\n  --radii-same-with-smoothing-radii-bottom-right: 5;\n  --radii-same-with-smoothing-radii-bottom-left: 5;\n  --radii-same-with-smoothing-smoothing: 0.65;\n```\n\n#### Motion\n\nMotion tokens are a combination of an `easing curve`, a `duration` and an animation type.\nTo create a motion token follow this flow:\n\n1. Create a new `Frame` called `_tokens/motion`\n2. Create a new `Main Component`\n3. Name it `motion/move-in`. Note, it is important to use the `motion/` prefix.\n4. Enter `prototyping mode` and link the element `motion/move-in` to any other element.\n5. Choose an `animation type`, `easing curve` and a `duration`\n\nWhen exporting your tokens you will now get a set of properties for this motion set.\n\n```css\n  --motion-move-in-type: move_in;\n  --motion-move-in-duration: 0.5;\n  --motion-move-in-easing: ease-in;\n  --motion-move-in-easing-function-x-1: 0.41999998688697815;\n  --motion-move-in-easing-function-x-2: 1;\n  --motion-move-in-easing-function-y-1: 0;\n  --motion-move-in-easing-function-y-2: 1;\n  --motion-move-in-direction: left;\n```\n\n#### Opacity\n\nTo create opacity tokens, do the following:\n\n1. Create a new `Frame` called `_tokens/opacities`\n2. Create a new `Main Component`\n3. Set the desired `Pass through` value (ie. 30%)\n4. Give it a fitting name, e.g. `opacity/input-disabled`\n\nAfter exporting it, if you convert it to CSS, the resulting token will look like this:\n\n```css\n--opacity-input-disabled: 0.3;\n```\n\n### Available properties\n\nTo 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.\n\n**Colors** are provided in `rgba` but can be converted using [Amazon style dictionary](https://amzn.github.io/style-dictionary/#/).\n\n## Settings\n\n![Design Tokens plugin settings](https://github.com/lukasoppermann/design-tokens/raw/main/_resources/settings.png)\n\n### Add token type to name\n\nWhen enabled, token names will be prefixed with the token type e.g. \"color\" or \"font\". This effectively groups tokens by type.\n\n### Name Conversion\n\nThis option allows you to define how the token names will be converted when they are store in the json file, the available options are:\n\n- `Default` – spaces from the beginning and end are removed and the name is converted to lowercase\n- `camelCase` - spaces from the beginning and end are removed and the name is converted to [camelCase](https://en.wikipedia.org/wiki/Camel_case)\n- `kebab-case`  - spaces from the beginning and end are removed and the name is converted to kebab-case\n\n### Token format\n\nThis option defines the structure for the json output.\n\n#### Standard (W3C draft)\n\nThis format is based on the current spec draft of the [Design Tokens W3C Community Group](https://github.com/design-tokens/community-group).\nIt is much simpler and makes it easier to define custom transformers for amazon style dictionary.\n\nEvery token follows this structure ([learn more](https://github.com/lukasoppermann/design-tokens/blob/main/types/standardToken.d.ts)):\n\n```js\ntype StandardTokenInterface = {\n  name: string,\n  description?: string,\n  value: StandardTokenValueType | StandardCompositeTokenValueType,\n  type: StandardTokenTypes,\n  extensions?: StandardTokenExtensionsInterface\n}\n```\n\n#### Original (deprecated)\n\nThis is the original format of the plugin. It is mainly in here to allow teams to slowly migrate to the standard format.\nThis works better with amazon style dictionary for basics. However if you want to create custom transformers the **Standard** format is better.\n\n### Exclusion Prefix\n\nBy default the plugin ignores any style that is prefixed with `_` or `.`.\nYou can define any additional prefix via this option, e.g `*`. This can be helpful when you want to have styles that are shared across files in figma, but that should not be exported to your design tokens.\n\n**Notes:**\n\n1. This setting only applies to Figma styles (colors, typography, grids \u0026 effects). It does not apply to custom tokens.\n2. The prefix has to be in the beginning of the token name, e.g. `.My Colors/Internal/Red` will be ignored, while `My Colors/.Internal/Red` will be exported.\n\n### Reference mode in variables\n\nYou can configure whether to include these mode names in the output JSON or not.  \nBy default, the mode names are not included in both the token names and the token values. You can turn on this behavior in the plug-in settings:\n\n- If you wish to include the mode name in the token names, but not in the token values, you can activate the \"Add mode to token value\".\n- If you wish to include the mode name  in the token values, but not in the token names, you can activate the \"Add mode to token name\".\n- If you wish to do include the mode name in both the token name and value, you can activate both of the checkboxes.\n- If you wish to do not include the mode name in both the token name and value, you can deactivate both of the checkboxes.\n\n### Resolve same collection or same mode variables references (EXPERIMENTAL)\n\nThis feature enables the resolution of variable references from within the same collection or mode. When enabled, the default value returned by the Figma API is updated to include all necessary information in the reference path, allowing these references to be properly resolved.\n\n### Aliases (Standard format only)\n\nThe standard token format allows you to define an alias/reference for a color tokens via the description field.\nFor example if you want the color style `danger-color` to reference the color style `core-colors/red` you can add a `ref:` line to the description field of the `danger-color`:\n\n```text\nUse this color for destructive actions only.\nref: core-colors.red\n```\n\nThis will create an output in your json like this:\n\n```json\n\"danger-color\": {\n  \"description\": \"Use this color for destructive actions only.\",\n  \"type\": \"color\",\n  \"value\": \"{core-colors.red}\"\n}\n```\n\nThe alias line is removed from the description field during export. If you active prefixing token types or token prefixes they will automatically be added.\n\nIn the settings you can defined the valid alias indentifiers like `ref`. By default it is set to `alias, ref, reference`.\n\n### Token Prefixes\n\n#### Include token prefixes in token name\n\nWhen enabled this option keeps the token prefix in the name, e.g. for `color/red` the token prefix is `color` and the token name is `red`.\n\n**For styles:** Styles do not have a prefix so when enabled the plugin will add the prefix to the token name.\n\n- *Color style:* `red` -\u003e `color/red`\n- *Gradient style:* `black to white` -\u003e `gradient/black to white`\n- *Font style:* `h1` -\u003e `font/h1`\n- *Grid style:* `mobile` -\u003e `grid/mobile`\n- *Color style:* `shadow 4dp` -\u003e `effect/shadow 4dp`\n\n**For custom tokens:** Custom tokens use the prefix to identify the token e.g. `radius/5px`, the prefix `radius` is used by the plugin to identify the token type. This means the name already includes the prefix and nothing will be added. However it this option is disabled the prefix will be removed.\n\nlayer name | option enabled | option disabled\n---|---|---\n`radius/5px` | `radius/5px` | `5px`\n`size/8px` | `size/8px` | `8px`\n`breakpoint/md` | `breakpoint/md` | `md`\n\n#### Token prefixes names\n\nThis option allows you to define custom prefixes for the tokens.\n\n**For styles:** You can only define one prefix which will be added if the `Include token prefixes in token name` is enabled.\n\n**For custom tokens:** You can add multiple prefixes in a comma separated list e.g. `radii,radius`. If `Include token prefixes in token name` is enabled whichever prefix is used in the name of a token will be kept if you have `radius/5px` and `radii/sm` you will also get `radius/5px` and `radii/sm` in the json output.\n\n## File Export Settings\n\n![Design Tokens plugin file export settings](https://github.com/lukasoppermann/design-tokens/raw/main/_resources/File-Export-Settings.png)\n\n### Compression for json output file\n\nThis option allows you to toggle the json compression for file export.\nWhen enabled the json file will be minified meaning whitespace and linebreaks will be removed.\n\n### Filename\n\nYou can define the default filename that will be used when exporting the tokens to a json file.\n\n### Selective export\n\nYou can choose which types of tokens to export to a file.\nThis can be helpful when debugging your tokens.\nBy default all types are selected and thus all tokens will be exported.\n\nIf you which to ignore specific styles, use the [exclude prefix](https://github.com/lukasoppermann/design-tokens/blob/main/README.md#exclude-prefix).\n\n## Push to Server\n\n![Design Tokens plugin url export settings](https://github.com/lukasoppermann/design-tokens/raw/main/_resources/Url-Export-Settings.png)\n\nWhen a `server url` is specified, the command `Send Design Tokens to Url` will send a `POST` request to the provided url.\nThe body of the request will look like the following:\n\n```ts\n  \"event_type\": \"update-tokens\", // or any string you defined\n  \"client_payload\": { \n    \"tokens\": \"{...}\", // the stringified json object holding all your design tokens\n    \"filename\": \"Design Tokens\", // the Figma file name from which the tokens were exported\n    \"commitMessage\": \"Your commit message\"\n  }\n```\n\n### URL Export Settings\n\n#### Compression for json output to server\n\nThis option allows you to toggle the json compression for the export to a server.\nWhen enabled the json that is end to the server will be minified meaning whitespace and linebreaks will be removed.\n\n### Server Settings\n\n#### **Event type**\n\nThis is the `event_type` property that is send in the body of the request with the `client_payload`.\n\n#### **Server url**\n\nThe 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.\nA limitation that comes with Figma is that the server must allow access from any origin and send the following header: `Access-Control-Allow-Origin: *`\n\n#### **Content Type**\n\nOverrides the content type header for the final HTTP request. Defaults to \"plain/text\"\n\n##### Pushing to Github\n\nIf you push to github the server url must be in the format\n\n```\nhttps://api.github.com/repos/:username/:repo/dispatches\n```\n\nFor the repository `lukasoppermann/design-token-transformer` this would be:\n\n```\nhttps://api.github.com/repos/lukasoppermann/design-token-transformer/dispatches\n```\n\n#### **Auth header**\n\nThis defines the authentication method used with the access token. The current choices are:\n\n- `token` (used for github)\n- `gitlab_token` (used for Gitlab requests)\n- `bearer` token\n- `basic` auth\n\n#### **Access token**\n\nThe token send using the authentication method defined above. Learn more about creating a [personal access token for github](https://github.com/lukasoppermann/design-token-transformer#personal-access-token).\n\n#### Github repo or custom server\n\nYou 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.\n\nTo learn how to set this up using `github` and `actions` check out the documentation and code examples in the [design token transformer repository](https://github.com/lukasoppermann/design-token-transformer).\n\n#### Gitlab repo\n\nThis will set up the plugin to trigger a Gitlab pipeline passing in the variables directly as environment variables. This data flow is documented in the section [Pass CI/CD variables in the API call](https://docs.gitlab.com/ee/ci/triggers/#pass-cicd-variables-in-the-api-call) in the Gitlab \"Triggers\" documentation.\n\nOnce the pipeline is triggered the following values will be available as environment variables:\n\n- `FIGMA_EVENT_TYPE`: The provided event type string.\n- `FIGMA_CLIENT_PAYLOAD_TOKENS`: The generated tokens JSON string.\n- `FIGMA_CLIENT_PAYLOAD_FILENAME`: The filename for the original Figma file.\n\n\u003e :warning: **NOTE**: It has been found that Gitlab has limitations on how much data can be passed via the environmental\n\u003e variables due to the limit on the size of the ConfigMap at 1048576 bytes. Depending on the system you are running on\n\u003e and any configurations already in place you may find you are able to pass more or less data than others. Developers\n\u003e and Designers should be aware of this limitation and plan accordingly. The below warning is an indication you have\n\u003e exceeded the data limit:\n\u003e\n\u003e```\n\u003e ERROR: Error cleaning up configmap: resource name may not be empty\n\u003e ERROR: Job failed (system failure): prepare environment: setting up scripts configMap: generating scripts config map: ConfigMap \"[[redacted image name]]\" is invalid: []: Too long: must have at most 1048576 bytes. Check https://docs.gitlab.com/runner/shells/index.html#shell-profile-loading for more information\n\u003e ```\n\n#### **Reference**\n\nThis field is only used when the \"gitlab_token\" auth header has been selected. This field sets the reference for the Gitlab trigger. This can be a branch, or tag name.\n\n## Errors\n\n### No tokens get exported\n\nThere a different possible reasons for this to occur:\n\n1. Tokens are not placed inside a frame named `_tokens`\n2. Tokens are nested in groups or frames (they must be the first level children of the `_tokens` frame)\n3. You may have changed the `exclude prefix` setting to `false` which means only styles that include the prefix e.g. `_colors/blue` are exported\n\n### Sending tokens to the server returns an error\n\n#### 401\n\nYou may be using a wrong access token or the access token is missing the correct permission (`public_repo`).\n\n#### 404\n\nYou may be using a wrong `server url` or `auth type`.\nAlso assure your access token is valid.\n\n#### General error (custom server)\n\nThe server may not have correct cors settings. If you send your tokens to github this probably means that you have a spelling mistake in the URL.\n\n## Contribution\n\n### Feature requests \u0026 help\n\nIf you would like to see a specific feature implemented, please [create an issue](https://github.com/lukasoppermann/design-tokens/issues/new) including a description of the feature and a use case.\n\nIf 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.\nI will get back to you asap to discuss the details of how to implement it.\n\n#### Help develop this plugin\n\nIf 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.\n\n### Thanks to all the contributors\n\nThis plugin is a lot of work and is maintained in parts thanks to all the wonderful [contributors](https://github.com/lukasoppermann/design-tokens/graphs/contributors).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasoppermann%2Fdesign-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasoppermann%2Fdesign-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasoppermann%2Fdesign-tokens/lists"}