Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kazuyaseki/figma-to-react

Simple generator of React code from Figma
https://github.com/kazuyaseki/figma-to-react

figma react typescript

Last synced: about 1 month ago
JSON representation

Simple generator of React code from Figma

Host: GitHub
URL: https://github.com/kazuyaseki/figma-to-react
Owner: kazuyaseki
Created: 2021-04-14T01:44:37.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-09-17T16:32:30.000Z (about 2 months ago)
Last Synced: 2024-09-29T05:42:53.268Z (about 1 month ago)
Topics: figma, react, typescript
Language: TypeScript
Homepage:
Size: 726 KB
Stars: 398
Watchers: 4
Forks: 83
Open Issues: 19
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

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)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/kazuyaseki/figma-to-react/graphs/commit-activity)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/kazuyaseki/figma-to-react/pulls)
[![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/)

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.

How the plugin works

## 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.

change format

### 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.

adding Banner component setting

Plugin generates Banner as component

## Development

```sh
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.

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