⚛️ A React renderer for Figma

Last update: May 10, 2022

React Figma

React Figma logo by Lera Lesik

npm version CircleCI

A React renderer for Figma. Use React components as a source for your designs.

Example of code:

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

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

Installation

Using boilerplate

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

From scratch

Install it with yarn:

yarn add react react-figma

Or with npm:

npm i react react-figma --save

Usage

Configure main thread

import { setupMainThread } from 'react-figma/rpc';

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

setupMainThread();

Configure ui thread

import * as React from 'react';
import { App } from './App';

import 'react-figma/rpc';
import { render } from 'react-figma';

render(<App />);

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>
    );
};

Docs

Examples

Sponsoring

Become a backer and get your logo on our Readme on GitHub with a link to your site.

Become a sponsor and get your logo on our README on Github with a link to your site.

Contributing

Everyone is welcome to contribute. Whether you're helping us implement features, fix bugs or improve the docs, we'd love to have you as part of the community!

How to Contribute

Check out our Contributing Guide for ideas on contributing and setup steps for getting repository up and running on your local machine.

Acknowledgements

React Figma team wishes to thank the following invaluable contributions:

Tested with browserstack

Tested with browserstack

Contributors

Thanks goes to these wonderful people (emoji key):


Ilya Lesik

💻

Losev Yaroslav

💻

Vishnu Singh

💻

corrina

💻

Zachary Witt

💻

Abdelrahman Ashraf

💻

sprashad

📖

Vivian Lee

💻

macintoshhelper

💻

Pierre Grimaud

📖

Greg Westneat

💻

Marius Reimer

💻

szeko

💻

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

GitHub

https://github.com/react-figma/react-figma
Comments
  • 1. Structuring design system with react-figma

    Hi 👋

    I'm currently a figma and react/react-native user. The little startup my friends and I are working on have several UI primitives that we use and compose together to create more complex UI. Currently we're in a situation where

    1. Our figma designs of our components get updated in figma and we have to go and update both our webapp and react-native app with the updates to those components.
    2. Our components are updated in the webapp/react-native app and we have to go update the figma board to keep them in sync.

    This wasn't much of an issue at first when we had 10 -30 components. But as our primitives got larger so did our "molecules" that are composed from primitives and updating all of them in figma and code is starting to become a full on task that is pretty tedious.

    How can we leverage react-figma to mitigate this issue? We're not design or design-system experts by any means but this has been a pain point for us and really would prefer to create a component-library that we would import into our application and have things "just work".

    We also use emotion for styling our webapp and react-native app so we're not quite sure how much of a barrier that is.

    Would love any insight into this 🙏

    Reviewed by kennetpostigo at 2020-05-07 18:57
  • 2. Create styled-components primitives example

    Create styled-components examples using the react-primitives package for cross-platform components.

    ~(probably worth waiting for my react-primitives PR to be merged first, to avoid needing to use a fork).~

    ~(prettier fails on CI, but is passing locally, strange)~

    ~And please don't merge before the webpack-config PR is merged.~

    Ready to merge now.

    Related issues

    #194

    Reviewed by macintoshhelper at 2020-04-02 01:03
  • 3. Implementing borders style props support

    https://react-figma.now.sh/docs/styling.html

    Props:

    • borderColor

    • borderTopColor

    • borderRightColor

    • borderBottomColor

    • borderLeftColor

    • borderWidth

    • borderTopWidth

    • borderRightWidth

    • borderBottomWidth

    • borderLeftWidth

    react-figma already has transformBorderStyleProperties function.

    Can be used Figma API (GeometryMixin):

    strokes: ReadonlyArray<Paint>
    

    and Yoga Layout:

    setBorder(edge: YogaEdge, borderWidth: number): void;
    
    Reviewed by ilyalesik at 2019-11-11 16:40
  • 4. Aligning with React Native API - proposal

    Hi, just discovered this repo and am excited to see this be developed!

    I was wondering whether it would be possible to tend towards using a React Native style API for the project? e.g. <View> as a generic core component API instead of <Rectangle> or <Circle>, etc. I've found with react-sketchapp that the Svg API acts as a really nice escape hatch for using shape-specific components if you need a <Circle> instead of <View style={{ borderRadius: '50%' }}> for some reason.

    e.g.

    src/svg.js

    const Svg = {
      rect: RectangleRenderer,
      path: PathRenderer,
    };
    

    src/index.js

    export { View, Text, Image };
    
    export { Svg };
    

    Also, regarding components like #20 , I feel that these should live in another library, and that react-figma can provide "internal hooks" to Figma specific components intended for library use.

    e.g.

    npm: react-primitives-shapes

    const { View } from 'react-primitives';
    const { Svg, Path } = require('react-primitives-svg');
    const { shapes } = require('react-figma');
    
    const Rectangle = (props) => <View style={{ display: 'flex' }} {...props} />;
    
    const Star = Platform.OS === 'figma'
      ? shapes.Star 
      : (
        <Svg>
         <Path data="starhere..." />
        </Svg>
      );
    
    module.exports = { Rectangle, Star };
    

    This would help a lot with react-primitives support and with standardising React cross-platform usage to center around a core, shared API, with platform-specific as opt-in components. For me, a lot of the value of this project would be in using existing React Native or React Sketch.app codebases to render design systems/UI libraries to Figma.

    Reviewed by macintoshhelper at 2019-10-03 16:23
  • 5. Examples package.json doesn't have dependencies or DevDependencies

    This is the basic example in your examples it has no dependencies nor dev dependencies so whenever i try to yarn install i get nothing plus if i do it manually i get a lot of errors . please add the dependencies.

    Reviewed by oSethoum at 2021-08-16 09:06
  • 6. Add missing but necessary step in setup guide

    Hi, I noticed that there's a missing step in your 'running' guide. Without starting webpack, Figma won't load the plugin.

    Apologies if I've misunderstood. At least for me, I had to run this script before Figma would allow me to open the plugin via Plugins > Development > react-figma-boilerplate.

    Reviewed by yoniholmes at 2021-04-09 12:30
  • 7. Support fillStyleId for Frames

    Context

    For my use case, we're extending off of this PR which allowed Components to take in a style prop.

    We want to leverage the new useXStyle hooks in order to:

    • Create a new Color Style
    • Apply the new Color style to a given component

    This works fine for Views, but I noticed that this didn't work for Components.

    Debugging

    When digging deeper, I found out that this mixin is the problem. This mixin carries over the background prop from the component. Since it comes after geometryMixin (which is where the fillStyleId is initially carried over), I believe this background is taking precedence and fillStyleId is being ignored.

    The fix(es)

    As a fix, I'm just adding fillStyleId to also be carried over.

    Another alternative could be to just change the order of the mixins, but that feels a bit fragile.

    Testing

    I rendered a Component that took in useFillPaintStyle, and saw that its fill color was linked to the Color Styles on the file:

    Screen Shot 2021-12-16 at 3 54 45 PM

    Reviewed by kahyoung at 2021-12-16 23:55
  • 8. Using useTextStyle cause font load issues

    Hello,

    Thanks for the great job done on that project.

    I'm actually experiencing a strange issue when using useTextStyle hook. For the same style the one that do not use the local style stored on Figma with the hook work as expected (using the correct font weight). The one with the hook fail with the following error in the console:

    rpc.js:136 Uncaught (in promise) Error: in set_fontName: Cannot use unloaded font "SF Pro Display SemiBold". Please call figma.loadFontAsync({ family: "SF Pro Display", style: "SemiBold" }) and await the returned promise first.
        at callback (<anonymous>:859:25)
        at handleRpc (<anonymous>:800:7)
        at handleRaw (<anonymous>:774:5)
        at onmessage (<anonymous>:733:24)
    

    Here the minimal example:

    import React from 'react';
    import { Frame, Page, StyleSheet, Text, useTextStyle } from 'react-figma';
    import { FRAME_PRESETS } from 'react-figma/components/frame/Frame';
    
    const style = StyleSheet.create({
      text: {
        fontFamily: 'SF Pro Display',
        fontSize: 20,
        fontWeight: '600',
      },
    });
    
    export default function FigmaApp() {
      const textStyle = useTextStyle(style.text, { name: 'header/h1' });
    
      return (
        <Page isCurrent name="Styleguide" style={{ flexDirection: 'row' }}>
          <Frame
            name="Typography"
            preset={FRAME_PRESETS.a4}
            style={{
              backgroundColor: 'white',
              marginRight: 48,
            }}
          >
            <Text style={style.text}>
              SF Pro Display without using local styles (and textStyleId)
            </Text>
            <Text style={textStyle}>
              SF Pro Display using local styles (and textStyleId)
            </Text>
          </Frame>
        </Page>
      );
    }
    
    
    Capture d’écran 2021-07-19 à 21 37 09

    When I remove the generated textStyleId key things works again ;-/ FYI all works as expected with Roboto. And I'm on Mac and have SF Pro Display and all his variants correctly installed.

    Thanks for the help, 🙏

    Edit 1: fontWeight: 700 (Bold) works well in both cases, it seems related to font variant naming Semibold on Figma, trying and failing to load SemiBold on the console

    Reviewed by momsse at 2021-07-19 19:46
  • 9. Is react-figma suitable for web only cases?

    I can't find anything in the docs about using react-figma with simple HTML tags. Is there any way to use it without <View>, <Text>, e.g.? It would be really nice to use it with component libraries like react-bootstrap which are built upon <div>s, <span>s, etc.

    Reviewed by Wyctus at 2021-03-25 10:27
  • 10. Remove constraints from group

    Rendering a Group (regardless of its props) would throw an error:

    Cannot add property constraints, object is not extensible
    

    Looks like constraints aren't supported on GroupNode so this removes the constraintsMixin from the group renderer and constraints from the Group props type.

    Reviewed by szeko at 2020-12-21 17:27
  • 11. fix: site dark mode images

    This changes the navbar logo and three feature images to white when dark mode is toggled. Also fixed img-alt not being displayed correctly and bumped deps.

    Closes #258.

    Reviewed by reime005 at 2020-10-03 10:49
  • 12. Bump cross-fetch from 3.0.5 to 3.1.5

    Bumps cross-fetch from 3.0.5 to 3.1.5.

    Release notes

    Sourced from cross-fetch's releases.

    v3.1.5

    What's Changed

    New Contributors

    Full Changelog: https://github.com/lquixada/cross-fetch/compare/v3.1.4...v3.1.5

    v3.1.4

    🐞 fixed typescript errors.

    v3.1.3

    🐞 fixed typescript compilation error causing #95, #101, #102.

    v3.1.2

    🐞 added missing Headers interface augmentation from lib.dom.iterable.d.ts (#97)

    v3.1.1

    🐞 fixed missing fetch api types from constructor signatures #96 (thanks @​jstewmon)

    v3.1.0

    ⚡️ improved TypeScript support with own fetch API type definitions (thanks @​jstewmon) ⚡️ set fetch.ponyfill to true when custom ponyfill implementation is used. 💡 set the same fetch API test suite to run against node-fetch, whatwg-fetch and native fetch.

    v3.0.6

    ⚡️ updated node-fetch to 2.6.1

    Commits
    • c6089df chore(release): 3.1.5
    • a3b3a94 chore: updated node-fetch version to 2.6.7 (#124)
    • efed703 chore: updated node-fetch version to 2.6.5
    • 694ff77 refactor: removed ora from dependencies
    • efc5956 refactor: added .vscode to .gitignore
    • da605d5 refactor: renamed test/fetch/ to test/fetch-api/ and test/module/ to test/mod...
    • 0f0d51d chore: updated minor and patch versions of dev dependencies
    • c6e34ea refactor: removed sinon.js
    • f524a52 fix: yargs was incompatible with node 10
    • 7906fcf chore: updated dev dependencies
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 21:57
  • 13. Is it possible and how to work with instances of component sets?

    The documentation describes how to work with component instances, but it seems that it does not account for components with variants (aka. component sets).

    Is there a way to get an instance of a component set?

    Reviewed by ervasive at 2022-04-22 12:31
  • 14. Add examples with a plugin UI

    I want to control the state of my Figma canvas via the plugin UI, but can't figure out how. Now all the examples appear to be "headless", even the interactive example:

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

    Reviewed by gengwang at 2021-09-28 03:28
  • 15. Creating complex component variants

    Variants in Figma allow the designer of a component library to create for example a Button, which will have an optional icon, which you can toggle (with/without the icon) and select from the list of available icons.

    Would it be possible to implement the same behaviour using react-figma? If not, could you please point me to the relevant code of react-figma and maybe also Figma API, so that I could contribute with a relevant pull request?

    AFAIK this is no possible with react-figma at the moment.

    Reviewed by techquestions at 2021-05-23 12:31
  • 16. Type Improvement?

    I'm not pretty sure if this is implemented as intended or there is room for improvement here.

    In Figma typings, GeometryMixin is defined as:

    interface GeometryMixin {
        fills: ReadonlyArray<Paint> | PluginAPI['mixed']
        strokes: ReadonlyArray<Paint>
        strokeWeight: number
        strokeMiterLimit: number
        strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
        strokeCap: StrokeCap | PluginAPI['mixed']
        strokeJoin: StrokeJoin | PluginAPI['mixed']
        dashPattern: ReadonlyArray<number>
        fillStyleId: string | PluginAPI['mixed']
        strokeStyleId: string
        outlineStroke(): VectorNode | null
      }
    

    In React-Figma, a similar interface GeometryProps is defined as

    export interface GeometryProps {
        fills?: ReadonlyArray<Paint> | symbol;
        strokes?: ReadonlyArray<Paint>;
        strokeWeight?: number;
        strokeAlign?: 'CENTER' | 'INSIDE' | 'OUTSIDE';
        strokeCap?: StrokeCap | symbol;
        strokeJoin?: StrokeJoin | symbol;
        dashPattern?: ReadonlyArray<number>;
        fillStyleId?: string | symbol;
        strokeStyleId?: string;
    }
    

    I can see a few differences here:

    1. PluginAPI['mixed'] -> symbol
    2. GeometryProps has less properties (e.g. no outlineStroke)
    3. GeometryProps properties are optional

    I'm thinking to generate GeometryProps from native GeometryMixin so that they keep aligned when GeometryMixin evolves. E.g.

    type GeometryProps = Partial<Omit<GeometryMixin, 'outlineStroke'>> 
    
    Reviewed by n0ruSh at 2021-05-17 08:17
React JSX Renderer is a React Component for rendering JSX to React nodes.

React JSX Renderer A React Component for Rendering JSX. Description React JSX Renderer is a React Component for rendering JSX to React nodes.

Jan 9, 2022
🇨🇭 A React renderer for Three.js (web and react-native)
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

May 15, 2022
🇨🇭 A React renderer for Three.js (web and react-native)
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

May 19, 2022
[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications
[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

React-TV · react-tv: React Renderer for low memory applications. react-tv-cli: React Packager for TVs. Currently under development. import React from

May 10, 2022
⃝ A react null renderer

Nothing to see here ... Quite so. This package allows you to bring Reacts high-level component abstraction to Node, or wherever you need it. Why not m

Apr 18, 2022
A React renderer for Hardware.

React Hardware React Hardware enables you to build firmata-based hardware applications using a consistent developer experience based on JavaScript and

May 4, 2022
A react renderer for browser's dev console
A react renderer for browser's dev console

Konsul is an abstraction of the browser's console that comes with a React renderer. It offers text styling, images, style inheritance, buttons with cl

Jan 3, 2022
React custom renderer for Appcelerator® Titanium™ SDK
React custom renderer for Appcelerator® Titanium™ SDK

⚠️ Maintainer wanted! Create an issue if you want to maintain it! react-titanium A React custom renderer for Appcelerator® Titanium™ SDK. This rendere

Mar 6, 2022
React renderer for NativeScript
React renderer for NativeScript

React NativeScript is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style. I'm always hanging o

Apr 21, 2022
A react renderer for blessed.

react-blessed A React custom renderer for the blessed library. This renderer should currently be considered as experimental, is subject to change and

May 17, 2022
a react renderer for the command line

This repository is now archived This project was originally created as an alternative to the Ink library, as a separate renderer for a real React comp

Dec 2, 2020
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

May 12, 2022
📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.
📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.

React SSD1306 A React Renderer for SSD1306 OLED chip on Raspberry Pi For those who doesn't have the device, a canvas-based web emulator is also includ

Apr 19, 2022
React renderer with X11 as a target
React renderer with X11 as a target

react-x11 React custom rendering where side effects are communication with X11 server. The goal is to create a simple library where you would apply yo

Apr 26, 2022
React renderer for building user interfaces in Unity UI

React Unity React Unity is a way to build interactive UI in Unity3D using React. It can be used together with packages like Typescript, redux, i18next

May 16, 2022
A custom Slack renderer for React! 3

react-slack-renderer Render Slack messages in a cool (React) way. const message = SlackRenderer.render( <SlackMessage> <SlackText> Heyo

Jun 22, 2021
🦴 A barebones react renderer for ogl.

react-ogl Declaratively create scenes with re-usable OGL components that have their own state and effects and can tap into React's infinite ecosystem.

Apr 25, 2022
React Fiber Reconciler Renderer for Regl WebGL

react-regl This library enables Regl shader WebGL draw commands to be rendered directly as React components. Demos View demos in the Storybook There i

Apr 13, 2022
Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer
Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer

React Liberty Be free to choose between WebGL / Canvas / DOM / Native or any other UI renderer This is a React library designed to abstract renderer b

Sep 10, 2021