neet/figma-to-react

Figma to React Component

The Problem

Many Figma to Code tools have one or more problems of the follwings:

• 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 genrated by selecting certain node. And its style is derived from Auto Layout properties, thus is responsive.

Development

npm install
npm run dev

For Those of you Who would like to create your own Figma to xxx

Feel free to folk this repositoty, create and publish your own Figma to Vue, Flutter, SwiftUI or whatsoever!

buildTagTree method would be useful for such case. buildTagTree metssod outputs a tag object in the following format which is independent from how the final outcome is structured.

export type Tag = {
  name: string
  isText: boolean
  textCharacters: string | null
  isImg: boolean
  properties: Property[]
  css: CSSData
  children: Tag[]
}