{"id":21365052,"url":"https://github.com/altinn/figma-design-tokens","last_synced_at":"2025-09-02T15:11:24.207Z","repository":{"id":37504967,"uuid":"472325059","full_name":"Altinn/figma-design-tokens","owner":"Altinn","description":"Design tokens","archived":false,"fork":false,"pushed_at":"2024-11-01T11:00:27.000Z","size":7854,"stargazers_count":9,"open_issues_count":11,"forks_count":2,"subscribers_count":19,"default_branch":"main","last_synced_at":"2024-11-01T12:16:47.161Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Altinn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-03-21T12:22:25.000Z","updated_at":"2023-12-30T14:38:57.000Z","dependencies_parsed_at":"2023-11-20T04:34:01.444Z","dependency_job_id":"4df5e40e-bd4c-4fda-af0a-60529d06a3a7","html_url":"https://github.com/Altinn/figma-design-tokens","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Altinn%2Ffigma-design-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Altinn%2Ffigma-design-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Altinn%2Ffigma-design-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Altinn%2Ffigma-design-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Altinn","download_url":"https://codeload.github.com/Altinn/figma-design-tokens/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225855965,"owners_count":17534967,"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-11-22T07:09:16.696Z","updated_at":"2024-11-22T07:09:17.257Z","avatar_url":"https://github.com/Altinn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Altinn Figma Design Tokens\n\nDesign tokens generated from Figma.\n\n### Yarn 2+\n\nRun `yarn add @altinn/figma-design-tokens`\n\n### NPM\n\nRun `npm i @altinn/figma-design-tokens`\n\n## Usage\n\nYou can use CSS variables:\n\n```js\nimport \"@altinn/figma-design-tokens/dist/tokens.css\";\n```\n\n```css\ndiv {\n  padding: var(--space-standard);\n}\n```\n\nOr use the tokens as a module:\n\n```jsx\nimport tokens from \"@altinn/figma-design-tokens\";\n\nconst Foo = () =\u003e \u003cdiv style={{ padding: tokens.SpaceStandard }}\u003eHi\u003c/div\u003e;\n```\n\nOr as JSON:\n\n```jsx\nimport tokens from \"@altinn/figma-design-tokens/dist/tokens.json\";\n\nconst Foo = () =\u003e (\n  \u003cdiv style={{ padding: tokens.space.standard.value }}\u003eHi\u003c/div\u003e\n);\n```\n\n(Note that in TypeScript you'll want to set `resolveJsonModule: true` for the above to work.)\n\n## Editing tokens\n\nYou should use Figma to edit the tokens. You'll need the [Figma Tokens](https://docs.tokens.studio/) plugin installed in Figma, and configured to sync with this GitHub repo.\n\n1. [Install](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) the Figma Tokens plugin\n1. Generate a new Personal Access Token (PAT) in [GitHub Developer Settings](https://github.com/settings/tokens) with scope `repo`\n1. Copy the PAT (you can only see it once)\n1. In the Figma Tokens plugin, under `Sync \u003e GitHub`, add new credentials:\n   - Name: `Altinn Figma Tokens`\n   - Personal Access Token: _your PAT_\n   - Repository: `Altinn/figma-design-tokens`\n   - Default Branch: `main`\n   - File Path: `tokens.json`\n\nYou can now \"pull from GitHub\" (button on top right) to fetch the tokens. When done editing tokens, you should \"push to GitHub\" (second button on top right).\n\n## Releasing a new version\n\nGo to Github Actions, and trigger a new Release. For most cases, `auto` should be the preferred option. This will automatically identify breaking changes, new features, or changed values between previous release and the current release. A changelog with the differences will also be created and added to the release.\n\nThere may be edge cases where you want to force the release to be of a certain type, where you can select one of the other options.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltinn%2Ffigma-design-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faltinn%2Ffigma-design-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltinn%2Ffigma-design-tokens/lists"}