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

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 { renderer, subscribeOnMessages } from 'react-figma';
import { App } from './App';

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

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

(async () => {
    await renderer(<App />);
    figma.closePlugin();
})();

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
  • Component
  • Line
  • Ellipse
  • Etc.
• Improving exiting components:
  • Adding support of all figma properties.
  • Improving style prop support.
  • Adding support of all yoga-layout properties.
• Updating algorithm (track changes at tree).
• react-primitives support.
• HMR support.
• styled-components supports.