{"id":13680210,"url":"https://github.com/kazuyaseki/figma-to-react","last_synced_at":"2025-04-08T09:11:58.907Z","repository":{"id":40044695,"uuid":"357739924","full_name":"kazuyaseki/figma-to-react","owner":"kazuyaseki","description":"Simple generator of React code from Figma","archived":false,"fork":false,"pushed_at":"2025-03-27T06:42:44.000Z","size":713,"stargazers_count":425,"open_issues_count":17,"forks_count":88,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T00:49:35.771Z","etag":null,"topics":["figma","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/kazuyaseki.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":"2021-04-14T01:44:37.000Z","updated_at":"2025-03-29T09:32:05.000Z","dependencies_parsed_at":"2023-09-26T23:50:14.785Z","dependency_job_id":"5a67f2a2-9f83-4357-a534-3c5f4c44d0db","html_url":"https://github.com/kazuyaseki/figma-to-react","commit_stats":{"total_commits":101,"total_committers":3,"mean_commits":"33.666666666666664","dds":"0.14851485148514854","last_synced_commit":"c4c0e6986bc81806dd98ddfd3253bea67819edc8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuyaseki%2Ffigma-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuyaseki%2Ffigma-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuyaseki%2Ffigma-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuyaseki%2Ffigma-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kazuyaseki","download_url":"https://codeload.github.com/kazuyaseki/figma-to-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"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":["figma","react","typescript"],"created_at":"2024-08-02T13:01:14.316Z","updated_at":"2025-04-08T09:11:58.883Z","avatar_url":"https://github.com/kazuyaseki.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![test](https://github.com/kazuyaseki/figma-to-react/actions/workflows/ci.yml/badge.svg)](https://github.com/kazuyaseki/figma-to-react/actions/workflows/ci.yml)\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/kazuyaseki/figma-to-react/graphs/commit-activity)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/kazuyaseki/figma-to-react/pulls)\n[![Tweeting](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Figma%20to%20React%20is%20awesome%20https://github.com/kazuyaseki/figma-to-react/)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"publish/icon.png\" align=\"center\" alt=\"Figma to React logo\" width=\"128\" height=\"128\"\u003e\u003c/p\u003e\n  \n\u003ch1 align=\"center\"\u003eFigma to React Component\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://www.figma.com/community/plugin/959795830541939498/Figma-to-React-Component\" align=\"center\"\u003e\u003cimg src=\"publish/install_button.png\" align=\"center\" alt=\"Install Plugin\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\nhttps://user-images.githubusercontent.com/6080698/116072313-de1cd180-a6c9-11eb-8e32-fe9a2f9a79f8.mov\n\n## The Problem\n\nMany Figma to Code tools have one or more problems of the followings:\n\n- generates for whole Figma file(not by component)\n- need to go outside of Figma to visit service's site\n- layout style is not responsive, and is absolute positioned to its parent\n\n## Solution\n\nFigma to React Component outputs React code in the plugin UI and can be generated by selecting certain node.\nAnd its style is derived from Auto Layout properties, thus is responsive.\n\n\u003cimg src=\"publish/readme_demo.png\" align=\"center\" alt=\"How the plugin works\" /\u003e\n\n## Further features\n\n### Change CSS format and size\n\nYou may choose either Pure CSS or styled-components, and you may also change size for px and rem.\n\n\u003cimg src=\"publish/format_setting.png\" align=\"center\" alt=\"change format\" /\u003e\n\n### Component setting\n\nYou may add component setting.\nWhen you add component setting including component name, name of children node(optional), and props(optional), the plugin will render matched node as component.\n\n\u003cimg src=\"publish/component_setting_1.png\" align=\"center\" alt=\"adding Banner component setting\" /\u003e\n\n\u003cimg src=\"publish/component_setting_2.png\" align=\"center\" alt=\"Plugin generates Banner as component\" /\u003e\n\n## Development\n\n```sh\nnpm install\nnpm run dev\n```\n\n## For Those of you Who would like to create your own Figma to xxx\n\nFeel free to folk this repository, create and publish your own Figma to Vue, Flutter, SwiftUI or whatsoever!\n\n`buildTagTree` method would be useful for such case.\n`buildTagTree` method outputs a `tag` object in the following format which is independent from how the final outcome is structured.\n\n```ts\nexport type Tag = {\n  name: string\n  isText: boolean\n  textCharacters: string | null\n  isImg: boolean\n  properties: Property[]\n  css: CSSData\n  children: Tag[]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazuyaseki%2Ffigma-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkazuyaseki%2Ffigma-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazuyaseki%2Ffigma-to-react/lists"}