react-figma

react-figma

Render React components to Figma.

• 💡 Inspired by react-sketchapp.
• 🎨 Designed to create manageable design systems.
• ⚙️ Built on Figma Plugin API.

Example of code:

import * as React from 'react';
import { Page, Rectangle, Text } from 'react-figma';

export const App = () => {
    return (
        <Page name="New page">
            <Rectangle style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />
            <Text characters="text" style={{ color: '#ffffff' }} />
        </Page>
    );
};

---

⚠️ Warning!️ Project is not production ready and currently at alpha version. API can be changed.

Installation

Using boilerplate

You can use react-figma-boilerplate for creating own projects.

From scratch

Install it with yarn:

yarn add react-figma yoga-layout

Or with npm:

npm i react-figma yoga-layout --save

Usage

Configure main thread

import * as React from 'react';
import { render, subscribeOnMessages } from 'react-figma';
import { App } from './App';

figma.showUI(__html__, { visible: false });

figma.ui.onmessage = message => {
    subscribeOnMessages(message);
};

render(<App />);

Configure ui thread

import * as yoga from 'yoga-layout';
import { uiWorker } from 'react-figma';

onmessage = event => {
    uiWorker({ yoga })(event);
};

Import components

import * as React from 'react';
import { Page, Rectangle, Text } from 'react-figma';

export const App = () => {
    return (
        <Page name="New page">
            <Rectangle style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />
            <Text characters="text" style={{ color: '#ffffff' }} />
        </Page>
    );
};

Examples

• design-system

Roadmap

• Adding components:
  • Group
  • Line
  • Ellipse
  • Etc.
• Improving exiting components:
  • Adding support of all figma properties.
  • Improving style prop support.
  • Adding support of all yoga-layout properties.
• react-primitives support.
• HMR support.
• styled-components supports.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ilya Lesik 💻

Losev Yaroslav 💻

This project follows the all-contributors specification. Contributions of any kind welcome!