{"repo":"lukasoppermann/design-tokens","free":true,"listed":false,"github":"https://github.com/lukasoppermann/design-tokens","clone":"git clone https://github.com/lukasoppermann/design-tokens.git","description":"🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.","language":"TypeScript","stars":1119,"topics":["amazon-style-dictionary","design-system","design-tokens","figma","figma-api","figma-plugin","style-dictionary"],"license":"MIT","category":"design_system","readme_excerpt":"> [!WARNING]\n> **This plugin is only partially supported!**\n> This means: I don't have capacity to add any features or really improve stuff. Bugfixes may be added if time allows.\n> I am also happy to discuss and merge PRs.\n>\n> 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>\n> → [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\"Figma\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\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 > 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 > 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 > Settings`\n\nOpens the settings view, which allows you to change all settings mentioned in the [settings](#settings) section below.\n\n### `Design Tokens > 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 > 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 > 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` & `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` > `_tokens/sizes` > `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)\nOpen example figma file\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)\nOpen example figma file\n\n#### Breakpoints\n\nTo crea","default_branch":"main","files":249,"tree":[".github/FUNDING.yml",".github/workflows/test.yml",".gitignore",".npmrc",".nvmrc","LICENSE","README.md","_resources/DS-Typography.jpg","_resources/DS-loves-motion.jpg","_resources/Design Tokens Plugin Cover.png","_resources/Design Tokens Plugin Icon.png","_resources/Design Tokens.svg","_resources/Dev-Pipeline-to-github.jpg","_resources/File-Export-Settings.png","_resources/Plugin Description.md","_resources/Plugin Icon.png","_resources/Typography-v6.1.0.jpg","_resources/Url-Export-Settings.png","_resources/Variants.jpg","_resources/_archive/Design Tokens Plugin Cover + Github.png","_resources/_archive/Design Tokens Plugin Cover.png","_resources/_archive/__old_Design Tokens Plugin Cover + Github.png","_resources/_archive/settings.png","_resources/design-tokens-v5.jpg","_resources/example-breakpoints-tokens.png","_resources/example-sizes-tokens.png","_resources/example-spacing-tokens.png","_resources/promo-v5.jpg","_resources/promo-v6.jpg","_resources/settings.png","dist/plugin.js","dist/ui.html","dist/ui.js","dist/ui.js.LICENSE.txt","examples/Readme.md","examples/build.js","examples/build/android/font/font_family.xml","examples/build/android/values/dimens.xml","examples/build/android/values/font_styles.xml","examples/build/css/variables.css","examples/build/ios/DesignToken.xcassets/Background.colorset/Contents.json","examples/build/ios/DesignToken.xcassets/Contents.json","examples/build/ios/DesignToken.xcassets/MultipleFills_0.colorset/Contents.json","examples/build/ios/DesignToken.xcassets/MultipleFills_1.colorset/Contents.json","examples/build/ios/DesignToken.xcassets/SingleBlue.colorset/Contents.json","examples/build/ios/DesignToken.xcassets/SpecialCharacters.colorset/Contents.json","examples/build/ios/DesignToken.xcassets/SpecialCharactersNderung.colorset/Contents.json","examples/build/ios/Size.swift","examples/build/ios/StyleDictionary+Generated.swift","examples/build/scss/variables.scss","examples/filesToCopy/font_family.xml","examples/input/standard-tokens.json","examples/libs/android/colorName.js","examples/libs/android/fontSizeToSp.js","examples/libs/android/formatFontStyle.js","examples/libs/android/formatResourcesSorted.js","examples/libs/android/index.js","examples/libs/android/pxToDp.js","examples/libs/common/camelCaseHelper.js","examples/libs/common/colorToHex8.js","examples/libs/common/colorToRgbaString.js","examples/libs/common/copyFileOrFolder.js","examples/libs/ios/colorsets.js","examples/libs/ios/fontStyleTemplate.js","examples/libs/ios/fontStyles.js","examples/libs/ios/index.js","examples/libs/web/createPropertyFormatter.js","examples/libs/web/fileHeader.js","examples/libs/web/filterWeb.js","examples/libs/web/formatCss.js","examples/libs/web/formattedVariables.js","examples/libs/web/index.js","examples/libs/web/sizePx.js","examples/libs/web/sortByReference.js","examples/libs/web/webFont.js","examples/libs/web/webGradient.js","examples/libs/web/webPadding.js","examples/libs/web/webRadius.js","examples/libs/web/webShadows.js","faq.md","manifest.json","package-lock.json","package.json","src/config/commands.ts","src/config/config.ts","src/config/defaultSettings.ts","src/config/tokenTypes.ts","src/extractor/extractBorders.ts","src/extractor/extractBreakpoints.ts","src/extractor/extractColors.ts","src/extractor/extractEffects.ts","src/extractor/extractFonts.ts","src/extractor/extractGrids.ts","src/extractor/extractMotion.ts","src/extractor/extractOpacities.ts","src/extractor/extractRadii.ts","src/extractor/extractSizes.ts","src/extractor/extractSpacing.ts","src/extractor/extractUtilities.ts","src/index.ts","src/transformer/originalFormatTransformer.ts","src/transformer/standardTransformer.ts","src/transformer/tokenExtensions.ts","src/ui/components/Button.tsx","src/ui/components/CancelButton.tsx","src/ui/components/Checkbox.tsx","src/ui/components/FileExportSettings.tsx","src/ui/components/Footer.tsx","src/ui/components/GeneralSettings.tsx","src/ui/components/Info.tsx","src/ui/components/Input.tsx","src/ui/components/Label.tsx","src/ui/components/Row.tsx","src/ui/components/Select.tsx","src/ui/components/Separator.tsx","src/ui/components/Text.tsx","src/ui/components/Title.tsx","src/ui/components/UrlExportSettings.tsx","src/ui/components/VersionNotice.tsx","src/ui/components/WebLink.tsx","src/ui/context.tsx","src/ui/css/ui.css","src/ui/css/variables.css","src/ui/modules/downloadJson.ts","src/ui/modules/githubRepository.ts","src/ui/modules/gitlabRepository.ts","src/ui/modules/handleKeyboardInput.ts","src/ui/modules/urlExport.ts","src/ui/ui.html","src/ui/ui.tsx","src/utilities/accessToken.ts","src/utilities/base64.ts","src/utilities/buildFigmaData.ts","src/utilities/changeNotation.ts","src/utilities/convertColor.ts","src/utilities/deepMerge.ts","src/utilities/extractTokenNodeValues.ts","src/utilities/filterByNameProperty.ts","src/utilities/getEffectStyles.ts","src/utilities/getFileId.ts","src/utilities/getGridStyles.ts","src/utilities/getPaintStyles.ts","src/utilities/getTextStyles.ts","src/utilities/getTokenJson.ts","src/utilities/getTokenNodes.ts","src/utilities/getVariableTypeByValue.ts","src/utilities/getVariables.ts","src/utilities/getVersionDifference.ts","src/utilities/groupByName.ts","src/utilities/handleVariableAlias.ts","src/utilities/isTokenNode.ts","src/utilities/prefixTokenName.ts","src/utilities/prepareExport.ts","src/utilities/processAliasModes.ts","src/utilities/roundWithDecimals.ts","src/utilities/semVerDifference.ts","src/utilities/settings.ts","src/utilities/stringifyJson.ts","src/utilities/transformName.ts","src/utilities/version.ts","tests/data/variables.css","tests/files/original-tokens.json","tests/files/standard-tokens.json","tests/integration/cssOutput.test.ts","tests/integration/data/cssOutput.data.ts","tests/integration/data/cssStandardOutput.data.ts","tests/integration/data/jsonOriginalFormat.data.ts","tests/integration/data/original.variables.css","tests/integration/data/standard.variables.css","tests/integration/jsonOutput.test.ts","tests/integration/libs/standard/web/colorToRgbaString.js","tests/integration/libs/standard/web/formatWeb.js","tests/integration/libs/standard/web/sizePx.js","tests/integration/libs/standard/web/webFont.js","tests/integration/libs/standard/web/webGradient.js","tests/integration/libs/standard/web/webPadding.js","tests/integration/libs/standard/web/webRadius.js","tests/integration/libs/standard/web/webShadows.js","tests/integration/original.config.json","tests/integration/standard.build.js","tests/unit/accessToken.test.ts","tests/unit/base64.test.ts","tests/unit/buildFigmaData.test.ts","tests/unit/convertColor.test.ts","tests/unit/data/color.data.ts","tests/unit/data/customTokenNode.data.ts","tests/unit/data/effectStyleObjects.data.ts","tests/unit/data/extractedFigmaTokens.data.ts","tests/unit/data/figmaData.data.ts","tests/unit/data/gridStyleObjects.data.ts","tests/unit/data/paintStyleObjects.data.ts","tests/unit/data/textStyleObjects.data.ts","tests/unit/data/transformedOriginalFormatTokens.data.ts","tests/unit/data/transformedStandardTokens.data.ts","tests/unit/deepMerge.test.ts","tests/unit/exportRawTokenArray.test.ts","tests/unit/extractBorders.test.ts","tests/unit/extractBreakpoints.test.ts","tests/unit/extractColors.test.ts","tests/unit/extractEffects.test.ts","tests/unit/extractFonts.test.ts","tests/unit/extractGrids.test.ts","tests/unit/extractMotion.test.ts","tests/unit/extractOpacitites.test.ts","tests/unit/extractRadii.test.ts","tests/unit/extractSizes.test.ts","tests/unit/extractSpacing.test.ts","tests/unit/extractUtilities.test.ts","tests/unit/filterByNameProperty.test.ts","tests/unit/getEffectStyles.test.ts","tests/unit/getFileId.test.ts","tests/unit/getGridStyles.test.ts","tests/unit/getPaintStyles.test.ts","tests/unit/getTextStyles.test.ts","tests/unit/getTokenNames.test.ts","tests/unit/getVariableTypeByValue.test.ts","tests/unit/getVariables.test.ts","tests/unit/getVersionDifference.test.ts","tests/unit/githubRepository.test.ts","tests/unit/groupByName.test.ts","tests/unit/handleVariableAlias.test.ts","tests/unit/prefixTokenName.test.ts","tests/unit/prepareExport.test.ts","tests/unit/processAliasModes.test.ts","tests/unit/roundRgba.test.ts","tests/unit/roundWithDecimals.test.ts","tests/unit/semVerDifference.test.ts","tests/unit/settings.test.ts","tests/unit/transformName.test.ts","tests/unit/transformer.originalFormatTransformer.test.ts","tests/unit/transformer.standardTransformer.test.ts","tests/unit/urlExport.test.ts","tsconfig.json","types/extractedData.d.ts","types/extractorInterface.d.ts","types/figmaDataType.d.ts","types/originalFormatProperties.d.ts","types/pluginEvent.ts","types/propertyCategory.d.ts","types/propertyObject.d.ts","types/settings.ts","types/standardToken.d.ts","types/styles.d.ts","types/tokenCategory.d.ts","types/tokenExportKey.d.ts","types/tokenNodeTypes.d.ts","types/urlExportData.d.ts","types/valueTypes.d.ts","webpack.config.js"],"storefront":"/r/lukasoppermann","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/lukasoppermann/design-tokens/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}