{"id":14967374,"url":"https://github.com/marcomontalbano/figma-export","last_synced_at":"2026-03-06T22:09:36.053Z","repository":{"id":36064069,"uuid":"191648270","full_name":"marcomontalbano/figma-export","owner":"marcomontalbano","description":"Export tool for Figma. You can easily and automatically export your Figma components and use them directly into your website.","archived":false,"fork":false,"pushed_at":"2025-04-08T20:29:54.000Z","size":12146,"stargazers_count":286,"open_issues_count":3,"forks_count":37,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-14T16:58:12.149Z","etag":null,"topics":["cli","components","coveralls","figma","figma-export","mocha","svg","typescript"],"latest_commit_sha":null,"homepage":"https://figma-export.marcomontalbano.com","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/marcomontalbano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null},"funding":{"github":"marcomontalbano"}},"created_at":"2019-06-12T21:37:53.000Z","updated_at":"2025-04-29T21:46:03.000Z","dependencies_parsed_at":"2024-03-02T00:22:27.403Z","dependency_job_id":"158c11d7-61b4-40bc-99f1-2ec23ed30c8f","html_url":"https://github.com/marcomontalbano/figma-export","commit_stats":{"total_commits":395,"total_committers":15,"mean_commits":"26.333333333333332","dds":0.09873417721518984,"last_synced_commit":"c1cae3a28e46cb99d92a49046e97c6b0f2e957ee"},"previous_names":["marcomontalbano/figma-exporter"],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcomontalbano%2Ffigma-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcomontalbano%2Ffigma-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcomontalbano%2Ffigma-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcomontalbano%2Ffigma-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcomontalbano","download_url":"https://codeload.github.com/marcomontalbano/figma-export/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254430291,"owners_count":22069909,"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":["cli","components","coveralls","figma","figma-export","mocha","svg","typescript"],"created_at":"2024-09-24T13:37:57.322Z","updated_at":"2026-03-06T22:09:36.011Z","avatar_url":"https://github.com/marcomontalbano.png","language":"TypeScript","funding_links":["https://github.com/sponsors/marcomontalbano"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./images/figma-export.png\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    Export tool for Figma.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    You can easily and automatically export your figma components and styles and use them directly into your website.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/marcomontalbano/figma-export/actions/workflows/test.yml\"\u003e\u003cimg alt=\"Test\" src=\"https://github.com/marcomontalbano/figma-export/actions/workflows/test.yml/badge.svg\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://coveralls.io/github/marcomontalbano/figma-export?branch=main\"\u003e\u003cimg alt=\"Coverage Status\" src=\"https://coveralls.io/repos/github/marcomontalbano/figma-export/badge.svg?branch=main\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/sponsors/marcomontalbano\"\u003e\u003cimg alt=\"Sponsor\" src=\"https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## :sparkles: In Short\n\n### Components\n\nYou can export your Figma Components as SVG and use them inside your website.\n\n\u003e This is particularly useful when you have your own icon set and you want to keep your website icons up-to-date with your Figma file.\n\n### Styles\n\nYou can export your Figma Styles into different output like `.sass` format, `.scss` format, [`Style Dictionary`](https://amzn.github.io/style-dictionary/#/) tokens or you can create your own outputter.\n\n\u003e If you want to keep the style of your Figma file in-sync with the `.css` of your website, this is a must-have.\n\n#### :art: Colors (paints)\n- [x] Color\n- [x] Linear Gradient\n\n#### :lollipop: Effects\n\n\u003e Shadow and Blur effects cannot be combined together since they use two different CSS properties.\n\n- [x] Inner Shadow\n- [x] Drop Shadow\n- [x] Layer Blur\n\n#### :pencil2: Text\n\n- [x] font-family\n- [x] font-weight\n- [x] font-size\n- [x] line-height\n- [x] letter-spacing\n- [x] font-style\n- [x] font-variant\n- [x] text-transform\n- [x] text-decoration\n- [x] text-align\n\n\n## :old_key: Personal Access Token\n\nFirst of all you have to set the environment variable `FIGMA_TOKEN`.\n\nTo do so, you need a **Personal Access Token**. You can generate one from your *Account Settings*.\n\n\u003cimg width=\"209\" alt=\"Figma - Account Menu\" src=\"./images/figma--account-menu.png\" /\u003e\n\nInside the Account Settings click on *Create a new personal access token* and enter a description.\n\nCopy the token, this is your only chance to do so!\n\n```sh\nexport FIGMA_TOKEN=\u003cpersonalAccessToken\u003e\n```\n\n\u003e You can use [dotenv](https://www.npmjs.com/package/dotenv) or `export` the variable using `.bash_profile`/`.bashrc` file.\n\n\n## :test_tube: Just Try\n\nEnsure you have [Node.js](https://nodejs.org/en) installed in your system, the latest LTS is recommended. If you are not familiar with Node.js you can read their [guide](https://nodejs.dev/en/learn/).\n\nIf you wanna try it just run following command and you will be able to download all components from https://www.figma.com/file/fzYhvQpqwhZDUImRz431Qo as .svg :sunglasses:\n\n```sh\n# export figma token\nexport FIGMA_TOKEN=\u003cpersonalAccessToken\u003e\n\n# export figma components as svg\nnpx -p @figma-export/cli -p @figma-export/output-components-as-svg figma-export components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg\n```\n\nor you can export all styles into `.scss`\n\n```sh\n# export figma token\nexport FIGMA_TOKEN=\u003cpersonalAccessToken\u003e\n\n# export figma styles as .scss variables\nnpx -p @figma-export/cli -p @figma-export/output-styles-as-sass figma-export styles fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-styles-as-sass\n```\n\n\n## :package: Packages\n\n### [@figma-export/core](/packages/core)\n\nThis package contains the core functionalities for `figma-export`. You can download and use it as a dependency of your project.\n\n### [@figma-export/cli](/packages/cli)\n\nThis package allows you to consume all core functionalities from your terminal.\n\n## :book: Usage\n\nTypically you'll prefer to use the `cli`. Here different ways to do the same:\n\n### Build Process\n\nYou can use `figma-export` as part of your build process.\n\n```sh\nnpm install --save-dev @figma-export/cli @figma-export/output-components-as-svg @figma-export/output-styles-as-sass\n\n# or using `yarn`\nyarn add @figma-export/cli @figma-export/output-components-as-svg @figma-export/output-styles-as-sass --dev\n```\n\nNow you can create a `script` command inside your `package.json`.\n\nFollowing an example:\n\n```diff\n{\n  \"scripts\": {\n+   \"figma:export-components\": \"figma-export components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg\",\n+   \"figma:export-styles\": \"figma-export styles fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-styles-as-sass\",\n  }\n}\n```\n\n### Use it on the fly\n\nAlternatively you can use `npx` to use it on the fly:\n\n```sh\nnpx @figma-export/cli --help\n```\n\n### Global Setup\n\nYou can also install it as a global dependency:\n\n```sh\nnpm install -g @figma-export/cli\n\n# or using `yarn`\nyarn add @figma-export/cli --global\n```\n\n```sh\nfigma-export --help\n```\n\n### Advanced\n\nLast but not least, you can create a configuration file and use a single command *to rule them all* :ring:\n\nLet's create the file `.figmaexportrc.js` and paste the following:\n\n```js\n// @ts-check\n\nimport outputComponentsAsSvg from '@figma-export/output-components-as-svg'\nimport outputStylesAsSass from '@figma-export/output-styles-as-sass'\nimport transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo'\n\n/** @type { import('@figma-export/types').StylesCommandOptions } */\nconst styleOptions = {\n  fileId: 'fzYhvQpqwhZDUImRz431Qo',\n  // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans\n  // ids: ['138:52'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set)\n  // onlyFromPages: ['icons'], // optional - Figma page names or IDs (all pages when not specified)\n  outputters: [\n    outputStylesAsSass({\n      output: './output'\n    })\n  ]\n}\n\n/** @type { import('@figma-export/types').ComponentsCommandOptions } */\nconst componentOptions = {\n  fileId: 'fzYhvQpqwhZDUImRz431Qo',\n  // version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans\n  // ids: ['54:22'], // optional - Export only specified node IDs (the `onlyFromPages` option is always ignored when set)\n  onlyFromPages: ['icons'],\n  transformers: [\n    transformSvgWithSvgo({\n      plugins: [\n        {\n          name: 'preset-default',\n          params: {\n            overrides: {\n              removeViewBox: false,\n            }\n          }\n        },\n        {\n          name: 'removeDimensions'\n        }\n      ]\n    })\n  ],\n  outputters: [\n    outputComponentsAsSvg({\n      output: './output'\n    })\n  ]\n}\n\n/** @type { import('@figma-export/types').FigmaExportRC } */\nexport default {\n  commands: [\n    ['styles', styleOptions],\n    ['components', componentOptions]\n  ]\n}\n```\n\n\u003e :information_source: Take a look at [.figmaexportrc.example.js](/.figmaexportrc.example.js) for more details.\n\nnow you can install the `@figma-export` dependencies that you need\n\n```sh\nnpm install --save-dev @figma-export/cli @figma-export/output-styles-as-sass @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg @figma-export/types\n```\n\nand update the `package.json`.\n\n```diff\n{\n  \"scripts\": {\n+   \"figma:export\": \"figma-export use-config\"\n  }\n}\n```\n\nIf needed you can also provide a different configuration file.\n\n```diff\n{\n  \"scripts\": {\n+   \"figma:export\": \"figma-export use-config .figmaexportrc.production.js\"\n  }\n}\n```\n\n#### TypeScript\n\nIf you prefer, you can create a `.figmaexportrc.ts` and use TypeScript instead.\nFor doing so, you just need to install a few new dependencies in your project.\n\n```sh\nnpm install --save-dev typescript tsx @types/node\n```\n\nand slightly change your `package.json`\n\n```diff\n{\n  \"scripts\": {\n+   \"figma:export\": \"tsx ./node_modules/@figma-export/cli/bin/run use-config .figmaexportrc.ts\"\n  }\n}\n```\n\nTake a look at [.figmaexportrc.example.ts](/.figmaexportrc.example.ts) for more details.\n\n\n#### Pure ESM package\n\nThis package is pure ESM. It cannot be `require()`'d from CommonJS.\n\nIf your package.json **does not** contain the `\"type\": \"module\"` field then you'll need to rename your `.figmaexportrc.js` configuration file:\n\n```diff\n-  .figmaexportrc.js\n+  .figmaexportrc.mjs\n```\n\nadjust the command you run:\n\n```sh\nfigma-export use-config .figmaexportrc.mjs\n```\n\nand start using `import foo from 'foo'` instead of `const foo = require('foo')` to import the packages inside the `.figmaexportrc.mjs`. You can take a look at [.figmaexportrc.example.js](/.figmaexportrc.example.js) as an example.\n\n\n## :books: More Packages\n\nFor the list of all official packages or if you want to create your own transformer or outputter you can continue reading [CLI Documentation](/packages/cli#readme).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcomontalbano%2Ffigma-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcomontalbano%2Ffigma-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcomontalbano%2Ffigma-export/lists"}