{"id":14981625,"url":"https://github.com/runroom/design-tokens","last_synced_at":"2025-10-29T07:32:33.307Z","repository":{"id":45637017,"uuid":"262367162","full_name":"Runroom/design-tokens","owner":"Runroom","description":"Runroom implementation of Figma design tokens","archived":false,"fork":false,"pushed_at":"2023-12-15T17:47:43.000Z","size":827,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":9,"default_branch":"main","last_synced_at":"2023-12-16T14:02:44.969Z","etag":null,"topics":["design-tokens","figma","frontend","nodejs","npm"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@runroom/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/Runroom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2020-05-08T16:01:38.000Z","updated_at":"2024-01-02T13:20:16.154Z","dependencies_parsed_at":"2023-02-12T22:01:31.659Z","dependency_job_id":"888e1e3c-90de-4142-a15f-24a7bf0b8782","html_url":"https://github.com/Runroom/design-tokens","commit_stats":{"total_commits":191,"total_committers":7,"mean_commits":"27.285714285714285","dds":"0.25130890052356025","last_synced_commit":"f99cec6868007de8d9f075b1206014b1b9080828"},"previous_names":[],"tags_count":29,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Runroom%2Fdesign-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Runroom%2Fdesign-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Runroom%2Fdesign-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Runroom%2Fdesign-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Runroom","download_url":"https://codeload.github.com/Runroom/design-tokens/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238791892,"owners_count":19531027,"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":["design-tokens","figma","frontend","nodejs","npm"],"created_at":"2024-09-24T14:03:57.255Z","updated_at":"2025-10-29T07:32:27.690Z","avatar_url":"https://github.com/Runroom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Design tokens\n\n[![npm version](https://img.shields.io/npm/v/@runroom/design-tokens.svg)](https://www.npmjs.com/package/@runroom/design-tokens)\n![node](https://img.shields.io/node/v/@runroom/design-tokens.svg)\n\n[![CI](https://github.com/Runroom/design-tokens/actions/workflows/ci.yaml/badge.svg)](https://github.com/Runroom/design-tokens/actions/workflows/ci.yaml)\n\nOriginally inspired on: [figma-tokens](https://github.com/klaufel/figma-tokens).\n\n## Installation\n\n`npm install @runroom/design-tokens --save-dev`\n\n## Usage\n\n### Execution\n\nThen execute:\n\n- `npx design-tokens`: If you want to sync with figma.\n\nYou can specify a different config file name using the parameter `--config-file=FILENAME`. For\nexample:\n\n- `npx design-tokens --config-file=myfile.{json,js}`\n\n### Config\n\nAdd a config file on the root directory of your project. This repository uses the standard config file naming\nby [cosmiconfig](https://www.npmjs.com/package/cosmiconfig).\nBy default, the config file name should be use `designtokens` as module name, like `.designtokensrc.json`\nor `.designtokensrc.js`, also as a `package.json` entry with the key `designtokens`.\n\nIf you want to use a different name for your config file, you can use the parameter `--config-file=FILENAME` when you\nexecute the command.\n\nYou can find a template for your config file [here](.template-designtokensrc.json).\n\n#### Explanation of config file fields\n\n`figmaApiKey`: Your figma unique Api key to perform the auth on figma's API\n\n`figmaProjectId`: Your figma project ID (Can be found in your's project URL, after the figma.com/file/FIGMA_ID/..)\n\n`figmaPages`: An object with the figma pages you want to sync. The key is the name of the page and the value is an\narray of the figma frames that contains the tokens\n\n`outputDir`: The source where will be stored the package's output\n\n### Optional config\n\n`figmaThemes`: An array of the name of the themes you want to sync. This option is only available for color tokens, and\nwe take as theme the first block of the name. For example: `dark-primary` or `dark-background-secondary` will be `dark`.\n\n#### Config for [Style Dictionary](https://amzn.github.io/style-dictionary/#/config)\n\n`styleDictionary`: The style dictionary config\n\n## Theming: How to use the themes\n\nThe themes are generated in the same file as the tokens, but if you want to extract the themes to a different file with\nthe selector `[data-theme=\"THEME_NAME\"]`, you can add the following config to the css files, in the style dictionary\nconfig, how you can see in the config template:\n\n```json\n{\n    \"destination\": \"variables-themes.css\",\n    \"format\": \"css/variables-themes\"\n}\n```\n\n## For Devs:\n\n### Adding New Figma Tokens\n\nExpanding the design tokens in your project is a straightforward process. Here's how you can add new Figma tokens:\n\n1. **Create a Figma Frame:**\n    - In Figma, create a new frame that represents the design tokens you want to add.\n    - Give the frame a clear and descriptive name that reflects the purpose of the tokens.\n\n2. **Update the Configuration:**\n    - Open the design-tokens configuration file (`designtokens.config.json` or similar).\n    - Add the name of the newly created Figma frame to the `pages` array. This ensures that your project recognizes the\n      new tokens.\n\n3. **Define Token Information:**\n    - Add an entry for the new tokens in `src/designTokensPages.ts`. This entry should include the name of the page and\n      the class for this token.\n\n4. **Create a Token:**\n    - To manage and process the new tokens, you'll need to create a corresponding class.\n    - Inside the `src/tokens` directory, create a new TypeScript file with a method that return\n      a `DesignTokensGenerator`.\n    - Implement the necessary methods for handling the new tokens. These methods may include writing to\n      files, or other token-specific functionality.\n\n5. **Define Token Types:**\n    - Make sure to define the types associated with the new tokens.\n    - In the `src/types/figma` directory, define types that reflect the structure of the new tokens in Figma.\n    - In the `src/types/designTokens` directory, define types specific to how the tokens will be used.\n\n6. **Add Token to Style Dictionary:**\n    - If the token needs a specific parser, add it to the `src/styleDictionary/styleDictionary.ts` file.\n\n## License\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nThis project is under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunroom%2Fdesign-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunroom%2Fdesign-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunroom%2Fdesign-tokens/lists"}