{"id":14981607,"url":"https://github.com/makamekm/figma-react","last_synced_at":"2025-07-02T09:32:48.410Z","repository":{"id":40727788,"uuid":"241384100","full_name":"makamekm/figma-react","owner":"makamekm","description":"Figma to React Exporter","archived":false,"fork":false,"pushed_at":"2022-12-30T19:43:38.000Z","size":281,"stargazers_count":6,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-27T13:49:31.246Z","etag":null,"topics":["cli","figma","javascript","nodejs","react"],"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/makamekm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-18T14:36:12.000Z","updated_at":"2023-10-19T01:38:16.000Z","dependencies_parsed_at":"2023-01-31T15:00:26.675Z","dependency_job_id":null,"html_url":"https://github.com/makamekm/figma-react","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/makamekm/figma-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makamekm%2Ffigma-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makamekm%2Ffigma-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makamekm%2Ffigma-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makamekm%2Ffigma-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makamekm","download_url":"https://codeload.github.com/makamekm/figma-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makamekm%2Ffigma-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262697228,"owners_count":23349889,"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","figma","javascript","nodejs","react"],"created_at":"2024-09-24T14:03:55.737Z","updated_at":"2025-07-02T09:32:48.316Z","avatar_url":"https://github.com/makamekm.png","language":"JavaScript","readme":"# React - Figma\n\n#### This is a tool to help you export Figma project into React mockups\n\n### Installation\n\n`npm i -g figma-react`\n\n### CLI Usage\n\n`figma-react \u003cfile-key\u003e [figma-dev-token] \u003cpreset-name\u003e`\n\nor you can provide .env file with the content\n\n```\nFIGMA_FILE_KEY=...\nFIGMA_DEV_TOKEN=...\nFIGMA_PRESET=...\n```\n\n### Example with MobX \u0026 Gatsby\n\nRun in your terminal the following code, but replace `\u003cfigma-dev-token\u003e` with your Figma Dev Token (You can generate it on your profile settings page)\n```\nnpm i -g gatsby-cli figma-react\ngatsby new figma-demo https://github.com/makamekm/gatsby-starter-typescript-ioc-mobx\ncd figma-demo\nfigma-react InZsgUaqMorH2q5iapfUDK \u003cfigma-dev-token\u003e mobx\nnpm run dev\n```\n\nThen just put into pages/index.tsx the following code and import dependencies:\n```\n  \u003cdiv style={{ height: '300px' }}\u003e\n    \u003cChromeMockup /\u003e\n  \u003c/div\u003e\n  \u003cHelmet\u003e\n    \u003clink href=\"https://fonts.googleapis.com/css?family=Roboto\u0026display=swap\" rel=\"stylesheet\" /\u003e\n  \u003c/Helmet\u003e\n```\n\n### API Usage\n\n```\nconst figmaReact = require('./figma');\n\nfigmaReact.runFigmaReact(options).catch(err =\u003e {\n\tconsole.error(err);\n\tconsole.error(err.stack);\n\tprocess.exit(1);\n});\n```\n\n### Requirements\n\n- Style JSX\n\n### Features\n\n- Customizable Style Plugins\n- Customizable Content Plugins\n- CLI tool\n- Can read .env properties\n\n# Options\n\n- fileKey // * required\n- devToken // * required\n- dir // default './src/design-system'\n- makeDir // default !!process.env.FIGMA_MAKE_DIR\n- stylePlugins // default from './figma.style.plugins'\n- contentPlugins // default from './figma.content.plugins'\n- classPrefix // default 'figma-'\n- delIndex // default '??'\n- paramsSplitIndex // default '\u0026'\n- paramSplitIndex // default '='\n- objectIndex // default '.'\n- styleDescriptionDelimiter // default '!style!'\n- imports // default ['import { observer } from 'mobx-react';']\n- decorator // default 'observer'\n- classAfterFix // default 'Generated'\n- fileAfterFix // default '.generated'\n- useBase64Images // default false\n- typeFactory // default ({ props: componentProps }) =\u003e `string`\n- prettierOptions // default\n```\n{\n  \"parser\": \"babel\",\n  \"semi\": true,\n  \"tabWidth\": 2,\n  \"printWidth\": 140,\n  \"singleQuote\": true,\n  \"trailingComma\": \"none\"\n}\n```\n\n\n### Development\n`npm link`\n\nThis repository uses Git Flow\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakamekm%2Ffigma-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakamekm%2Ffigma-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakamekm%2Ffigma-react/lists"}