{"repo":"kazuyaseki/figma-to-react","free":true,"listed":false,"github":"https://github.com/kazuyaseki/figma-to-react","clone":"git clone https://github.com/kazuyaseki/figma-to-react.git","description":"Simple generator of React code from Figma","language":"TypeScript","stars":452,"topics":["figma","react","typescript"],"license":null,"category":"ui-components","readme_excerpt":"Figma to React Component https://user-images.githubusercontent.com/6080698/116072313-de1cd180-a6c9-11eb-8e32-fe9a2f9a79f8.mov The Problem Many Figma to Code tools have one or more problems of the followings: - generates for whole Figma file(not by component) - need to go outside of Figma to visit service's site - layout style is not responsive, and is absolute positioned to its parent Solution Figma to React Component outputs React code in the plugin UI and can be generated by selecting certain node. And its style is derived from Auto Layout properties, thus is responsive. Further features Change CSS format and size You may choose either Pure CSS or styled-components, and you may also change size for px and rem. Component setting You may add component setting. When you add component setting including component name, name of children node(optional), and props(optional), the plugin will render matched node as component. Development For Those of you Who would like to create your own Figma to xxx Feel free to folk this repository, create and publish your own Figma to Vue, Flutter, SwiftUI or whatsoever! buildTagTree method would be useful for such case. buildTagTree method outputs a tag object in the following format which is independent from how the final outcome is structured.","default_branch":null,"files":null,"tree":[],"storefront":"/r/kazuyaseki","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/kazuyaseki/figma-to-react/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}