Download the Figma Desktop App
Plugins can only be accessed through the desktop app.
git clone https://github.com/kristenprescott/figma-to-react.git
yarn install
yarn dev
In the Figma app, go to Plugins
> Development
> Import plugin from manifest
and select the manifest.json
file from your local clone of this repository.
Select a component or group of components in Figma. Note: not too many at once or you may overload the plugin and the code will be harder to decipher.
Go to Plugins
> Development
and select Figma to React Component
.
Note: Code export is currently a work in progess, but copy code functionality is useful in the meantime.
This repo is a fork from kazuyaseki/figma-to-react where you can find more information on further customizing this plugin. The buildTagTree
method is a good place to start. Here is an excerpt from the README:
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.
export type Tag = {
name: string
isText: boolean
textCharacters: string | null
isImg: boolean
properties: Property[]
css: CSSData
children: Tag[]
}