kazuyaseki / figma-to-react

Simple generator of React code from Figma

Figma to React Component

figma-to-react-demo-en.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

npm install
npm run dev

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.

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

figma-to-react's Issues

weired CSS class names and color formatting

Hi there, I try to evaluate your plugin and stumbled over some weired compiling:

   <div className="frame- -1">
                <div className="group- -2">
                    <div className="rectangle" />
                    <div className="mobile- -components- -/- -card- -/- -chatter- -post">
                        <div className="mobile- -components- -/- -action- -bar- -/- -feed- -card">
                            <div className="group">
                                <div className="mobile- -compnents- -/- -chatter- -/- -like">
                                    

and my CSS has that too, as well come wrong compiled colors and empty definitions:

  .text {
    text-align: left;
    vertical-align: top;
    font-size: 16px;
    font-family: Roboto;
    line-height: 20px;
    color: #06dcc;
  }
  . {
  
  }
  . {
  
  }
  .utility-icons-/like {
    height: 18px;
    width: 18px;
  }

Maybe it's an usage failure from my side? Can you point me to some direction to solve that?

Thank you !!!

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency figma-api-stub to v0.0.56
• chore(deps): update react monorepo (@types/react, @types/react-dom)
• fix(deps): update dependency webpack-cli to v3.3.12
• chore(deps): update dependency eslint to v7.32.0
• fix(deps): update dependency @vanilla-extract/css to v1.15.2
• fix(deps): update dependency webpack to v4.47.0
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency css-loader to v7
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency style-loader to v4
• chore(deps): update dependency typescript to v5
• chore(deps): update jest monorepo to v29 (major) (@types/jest, babel-jest, jest)
• chore(deps): update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom)
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency webpack-cli to v5
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency css-loader to v5.2.7
• chore(deps): update dependency ts-loader to v8.4.0
• chore(deps): update jest monorepo to v27.5.1 (babel-jest, jest)
• chore(deps): update typescript-eslint monorepo to v4.33.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency html-webpack-plugin to v5
• fix(deps): update dependency webpack to v5

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update babel monorepo to v7.24.6 (@babel/core, @babel/preset-env, @babel/preset-typescript)
• chore(deps): update dependency @figma/plugin-typings to v1.94.0
• chore(deps): update dependency eslint-config-prettier to v8.10.0
• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update dependency typescript to v4.9.5
• chore(deps): update dependency ts-loader to v9
• chore(deps): update dependency ts-node to v10
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/setup-node v1

npm

package.json

• @vanilla-extract/css ^1.0.0
• html-webpack-inline-source-plugin 0.0.10
• html-webpack-plugin ^3.2.0
• react ^17.0.2
• react-dom ^17.0.2
• webpack ^4.41.4
• webpack-cli ^3.3.6
• @babel/core 7.13.15
• @babel/preset-env 7.13.15
• @babel/preset-typescript 7.13.0
• @figma/plugin-typings 1.33.0
• @types/jest 26.0.24
• @types/react 17.0.36
• @types/react-dom 17.0.3
• @typescript-eslint/eslint-plugin 4.20.0
• @typescript-eslint/parser 4.20.0
• babel-jest 27.0.6
• css-loader 5.2.5
• eslint 7.23.0
• eslint-config-prettier 8.1.0
• figma-api-stub 0.0.48
• jest 27.0.6
• prettier 2.2.1
• style-loader 2.0.0
• ts-loader 8.0.17
• ts-node 9.1.1
• typescript 4.2.2
• url-loader 4.1.1

---

• Check this box to trigger a request for Renovate to run again on this repository