Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

⚛️ A React renderer for Figma
https://github.com/react-figma/react-figma

figma figma-plugins react

Last synced: 2 days ago
JSON representation

⚛️ A React renderer for Figma

Awesome Lists containing this project

README

        

# React Figma

React Figma logo by Lera Lesik

[![npm version](https://img.shields.io/npm/v/react-figma.svg)](https://www.npmjs.com/package/react-figma)
[![CircleCI](https://circleci.com/gh/react-figma/react-figma.svg?style=shield)](https://circleci.com/gh/react-figma/react-figma)

A React renderer for [Figma](https://www.figma.com). Use React components as a source for your designs.

* 🍬 Compatible with [react-native](https://facebook.github.io/react-native/), [react-sketchapp](https://github.com/airbnb/react-sketchapp), [react-primitives](https://github.com/lelandrichardson/react-primitives) API.
* 🦄 Flexible layouts support with [Yoga Layout](https://yogalayout.com/).
* ♻️ Hydration and [HMR](https://webpack.js.org/concepts/hot-module-replacement/) support.
* ⚙️ Built on [Figma Plugin API](https://www.figma.com/plugin-docs/intro/).
* 🚫 **Is not a code generator**.

Example of code:

```javascript
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](https://github.com/react-figma/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

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

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

setupMainThread();
```

#### Configure ui thread

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

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

render();
```

#### Import components

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

export const App = () => {
return (




);
};
```

## [Docs](https://react-figma.dev/docs/API)

* [API Overview](https://react-figma.dev/docs/API)
+ [render](https://react-figma.dev/docs/api/render)
+ [Page](https://react-figma.dev/docs/api/page)
+ [Frame](https://react-figma.dev/docs/api/frame)
+ [View](https://react-figma.dev/docs/api/view)
+ [Text](https://react-figma.dev/docs/api/text)
+ [Image](https://react-figma.dev/docs/api/image)
+ ...
* [Styling](https://react-figma.dev/docs/styling)
* [Architecture](https://react-figma.dev/docs/architecture)

## Examples

* [Basic](examples/basic)
+ [Basic + HMR](examples/basic-hmr)
* [Design system](examples/design-system)
* [Interactive](examples/interactive)
* [UI](examples/ui) - Interact with a Plugin UI
* [Data fetching](examples/fetching)
* [💅 styled-components](examples/styled-components)
* [PrimerDemo](https://github.com/react-figma/PrimerDemo) - Example of multiplatform UI-kit
* [Component Variants](examples/component-variants)
* [MDX](examples/mdx)
* [Local Styles](examples/local-styles)

## Sponsoring

[Become a backer](https://opencollective.com/reactfigma#backer) and get your logo on our Readme on GitHub with a link to your site.






[Become a sponsor](https://opencollective.com/reactfigma#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](./contributing.md) 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:

* [Lera Lesik](https://twitter.com/Lera_Lesik), for creating project logo.
* [Maksim](https://github.com/pret-a-porter), for TypeScript counseling.

## Tested with browserstack


Tested with browserstack

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Ilya Lesik
Ilya Lesik

💻
Losev Yaroslav
Losev Yaroslav

💻
Vishnu Singh
Vishnu Singh

💻
corrina
corrina

💻
Zachary Witt
Zachary Witt

💻
Abdelrahman Ashraf
Abdelrahman Ashraf

💻
sprashad
sprashad

📖


Vivian Lee
Vivian Lee

💻
macintoshhelper
macintoshhelper

💻
Pierre Grimaud
Pierre Grimaud

📖
Greg Westneat
Greg Westneat

💻
Marius Reimer
Marius Reimer

💻
szeko
szeko

💻
Jonathan Holmes
Jonathan Holmes

📖


headwindz
headwindz

💻
Darío Hereñú
Darío Hereñú

📖
Konstantin Popov
Konstantin Popov

📖
Utkarsh Singh
Utkarsh Singh

📖
mrkenneh
mrkenneh

💻
Anna Do
Anna Do

💻
Steven Petryk
Steven Petryk

💻


Thierry Charbonnel
Thierry Charbonnel

📖
Jack Oliver
Jack Oliver

📖
Marc Abramowitz
Marc Abramowitz

📖
fishtriangle
fishtriangle

💻
Carlos
Carlos

📖
Raghu Ram M
Raghu Ram M

📖

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!