Need help with react-figma?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Global Rank
#22,975
Topics of expertise
pattern...
react-i...
grid-la...
reactjs...
react-h...
pintere...
opensou...
hooks
Location
none
1.5K Stars 62 Forks MIT License 990 Commits 31 Opened issues

Description

⚛️ A React renderer for Figma

Services available

!
?

Need anything else?

Contributors list

# 22,975
React
pattern...
mac
macOS
615 commits
# 274,109
HTML
vue-plu...
vuejs2
vuejs
57 commits
# 255,358
Gulp
GraphQL
knex
express...
27 commits
# 392,660
CSS
figma
TypeScr...
React
16 commits
# 20,509
elm
React
Sketch
TypeScr...
5 commits
# 653,813
CSS
figma
TypeScr...
React
1 commit
# 128,730
github-...
GitHub
React
custom-...
1 commit
# 87,185
Objecti...
command...
Git
React N...
1 commit
# 34,823
XML
france
Homebre...
nuxtjs
1 commit
# 575,645
CSS
figma
TypeScr...
React
1 commit
# 609,687
CSS
figma
TypeScr...
React
1 commit
# 313,718
JavaScr...
reactjs
TypeScr...
react-h...
1 commit

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

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

Import components

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

export const App = () => { return ( ); };

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

💻

Jonathan Holmes

📖

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.