{"id":13670914,"url":"https://github.com/0000marcell/figma2react","last_synced_at":"2025-04-27T13:33:16.087Z","repository":{"id":32369597,"uuid":"132365963","full_name":"0000marcell/figma2react","owner":"0000marcell","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-24T10:07:12.000Z","size":17,"stargazers_count":22,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T17:08:48.202Z","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/0000marcell.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}},"created_at":"2018-05-06T18:39:58.000Z","updated_at":"2024-12-07T23:01:31.000Z","dependencies_parsed_at":"2022-07-29T13:09:45.927Z","dependency_job_id":null,"html_url":"https://github.com/0000marcell/figma2react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0000marcell%2Ffigma2react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0000marcell%2Ffigma2react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0000marcell%2Ffigma2react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0000marcell%2Ffigma2react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0000marcell","download_url":"https://codeload.github.com/0000marcell/figma2react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251145780,"owners_count":21543096,"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-08-02T09:00:53.015Z","updated_at":"2025-04-27T13:33:11.066Z","avatar_url":"https://github.com/0000marcell.png","language":"JavaScript","readme":"# figma2react\n\nConvert figma components in to react components\n\n![](https://dl.dropboxusercontent.com/s/g271pk7p25o3x1n/ezgif.com-video-to-gif.gif?dl=0)\n\n\n## installation\n\n```\n  npm install -g figma2react\n```\n\n## create CRA application\n```\n  create-react-app test-figma2react\n```\nyou can use any name\n\n## create the configuration file in the root of the project\n```\n  cd test-figma2react\n  touch .figma2react\n```\n\n## insert your configuration\n```\n  //.figma2react\n\n  {\n    \"projectId\": \u003cid of your project\u003e,\n    \"token\": \u003cyour figma developer token\u003e,\n    \"directory\": \u003cpath to destination directory (\"./src/components\" by default)\u003e,\n    \"types\": \u003carray of types that will be generated. only ts is supported. empty by default\u003e\n  }\n```\n\nyou can findout how to get your token [here](https://www.figma.com/developers/docs#auth)\n\nif you wanna test it out just use the test project, projectId: \"eYk3d4ngtHUXkg82atfuJP\"\n\n## generate your components\n\ninside your CRA project\n\n```\n  figma2react generate\n```\n\n## watch for changes in the figma project and generate the components\n\n```\n  figma2react watch\n```\n\n\n###### Marcell Monteiro Cruz - 2018\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0000marcell%2Ffigma2react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0000marcell%2Ffigma2react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0000marcell%2Ffigma2react/lists"}