{"id":14981632,"url":"https://github.com/divriots/style-dictionary-to-figma","last_synced_at":"2025-04-07T06:09:21.622Z","repository":{"id":37498811,"uuid":"457355598","full_name":"divriots/style-dictionary-to-figma","owner":"divriots","description":"A utility that mutates and transforms a style-dictionary object into something Figma Tokens plugin understands.","archived":false,"fork":false,"pushed_at":"2023-06-01T14:53:32.000Z","size":303,"stargazers_count":112,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-05T18:12:39.491Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/divriots.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2022-02-09T12:48:13.000Z","updated_at":"2025-04-01T03:11:15.000Z","dependencies_parsed_at":"2024-06-18T18:15:05.919Z","dependency_job_id":"64218d9d-fe4c-40c3-9f85-e27078ee195d","html_url":"https://github.com/divriots/style-dictionary-to-figma","commit_stats":{"total_commits":36,"total_committers":8,"mean_commits":4.5,"dds":0.5833333333333333,"last_synced_commit":"15a8bd60e6d23953ea5203c9c2eceac5a614bb60"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstyle-dictionary-to-figma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstyle-dictionary-to-figma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstyle-dictionary-to-figma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstyle-dictionary-to-figma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/style-dictionary-to-figma/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378150,"owners_count":20929297,"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":[],"created_at":"2024-09-24T14:03:57.778Z","updated_at":"2025-04-07T06:09:21.594Z","avatar_url":"https://github.com/divriots.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg style=\"width: 200px; margin-bottom: 20px\" alt=\"style dictionary playground logo\" src=\"https://raw.githubusercontent.com/divriots/style-dictionary-to-figma/main/.github/logo.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://divRIOTS.com\"\u003eBrought to you by\u003cbr/\u003e\u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-light-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-dark-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots-dark.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Style Dictionary To Figma\n\nA utility that transforms a [style-dictionary](https://amzn.github.io/style-dictionary/#/) object into something [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978) understands.\n\nUsed by Design Systems in [Backlight](https://backlight.dev) using design tokens in [style-dictionary](https://amzn.github.io/style-dictionary/) that can be synced into Figma via the [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978).\n\n\u003e The tool, at the moment, assumes usage of the Sync feature of Figma Tokens Plugin.\n\u003e The JSON output is catered to this as it is a single file containing the tokensets information.\n\n## Features\n\n- Supports marking a token group as a custom tokenset so that it will appear as a separate tokenset in Figma. By default, `\"global\"` is used as the tokenset, and your tokens will be placed inside of this, but you can override it. This is useful if you want to combine many base tokens into a \"global\" set but theme-specific token groups into a \"theme-dark\" set for example. You can configure it like so:\n\n  ```json\n  {\n    \"color\": {\n      \"tokenset\": \"custom\",\n      \"primary\": {\n        \"base\": {\n          \"type\": \"color\",\n          \"value\": \"#14b8a6\"\n        }\n      }\n    }\n  }\n  ```\n\n  `color.primary.base` token will appear under `custom` tokenset now in the plugin.\n  You can also configure or turn off this automatic tokenset mapping by passing `defaultTokenset: false` or configuring a string for it `defaultTokenset: 'default'`\n\n- Trims `.value` from reference values as Figma Tokens plugin does not use this suffix.\n- Trims the `name` properties from tokens since Figma Tokens plugin uses this property to name its tokens, however, without a name property it creates its own naming/nesting by the object structure which is way nicer.\n- Use the reference values rather than its resolved values. Put `ignoreUseRefValue: true` as a sibling property to the value prop if you want to make an exception and keep it as a resolved value.\n- Allow passing some optional options to adjust the object conversion:\n\n  - cleanMeta, if `true`, will clean up some of the meta info that style-dictionary creates, which Figma Tokens plugin doesn't care about. Can also pass a `string[]` if you want to configure a blacklist of meta props that you want to filter out yourself\n\n  ```js\n  transform(obj, { cleanMeta: ['foo', 'bar'] });\n  ```\n\n## Usage\n\n```sh\nnpm i @divriots/style-dictionary-to-figma\n```\n\n```js\nimport { transform } from '@divriots/style-dictionary-to-figma';\n\nconst sdObject = { ... };\nconst figmaObj = transform(sdObject);\n```\n\nIn case you want its separate counterparts, you can import them separately.\n\n```js\nimport {\n  trimValue,\n  trimName,\n  useRefValue,\n  markTokenset,\n  cleanMeta,\n} from '@divriots/style-dictionary-to-figma';\n```\n\nOnce you transformed the object to Figma, a recommendation is to push this to GitHub and use the [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978) to sync with it to use the tokens in Figma.\n\n## Use in [Backlight](https://backlight.dev/) / [Style-dictionary](https://amzn.github.io/style-dictionary/#/)\n\nImport the `transform` utility and create a style-dictionary formatter:\n\n```js\nconst { transform } = require('@divriots/style-dictionary-to-figma');\nconst StyleDictionary = require('style-dictionary');\n\nStyleDictionary.registerFormat({\n  name: 'figmaTokensPlugin',\n  formatter: ({ dictionary }) =\u003e {\n    const transformedTokens = transform(dictionary.tokens);\n    return JSON.stringify(transformedTokens, null, 2);\n  },\n});\n```\n\nOr you can also put the formatter directly into the config without registering it imperatively:\n\n```js\nconst { transform } = require('@divriots/style-dictionary-to-figma');\n\nmodule.exports = {\n  source: ['**/*.tokens.json'],\n  format: {\n    figmaTokensPlugin: ({ dictionary }) =\u003e {\n      const transformedTokens = transform(dictionary.tokens);\n      return JSON.stringify(transformedTokens, null, 2);\n    },\n  },\n  platforms: {\n    json: {\n      transformGroup: 'js',\n      buildPath: '/tokens/',\n      files: [\n        {\n          destination: 'tokens.json',\n          format: 'figmaTokensPlugin',\n        },\n      ],\n    },\n  },\n};\n```\n\nThis spits out a file `/tokens/tokens.json` which Figma Tokens plugin can import (e.g. through GitHub).\n\nSince [Backlight](https://backlight.dev/) has [GitHub](https://github.com/) and [Style-Dictionary](https://amzn.github.io/style-dictionary/#/) integration out of the box, this process is very simple.\n\n## Create a JSON for each tokenset\n\nPerhaps you'd like to use this tool to generate a separate JSON file for each tokenset,\nwhich you can then manually paste into the Figma Tokens Plugin JSON view.\nFor example, when you're not using the Figma Tokens Plugin Sync feature.\n\nFor this, [refer to this code snippet from this issue](https://github.com/divriots/style-dictionary-to-figma/issues/15#issuecomment-1127797022).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstyle-dictionary-to-figma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fstyle-dictionary-to-figma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstyle-dictionary-to-figma/lists"}