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: 6 months ago
JSON representation
⚛️ A React renderer for Figma
- Host: GitHub
- URL: https://github.com/react-figma/react-figma
- Owner: react-figma
- License: mit
- Created: 2019-08-11T07:26:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-14T09:27:13.000Z (about 1 year ago)
- Last Synced: 2024-10-29T15:20:19.065Z (about 1 year ago)
- Topics: figma, figma-plugins, react
- Language: TypeScript
- Homepage: https://react-figma.dev
- Size: 16.7 MB
- Stars: 2,542
- Watchers: 25
- Forks: 132
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Roadmap: docs/roadmap.md
Awesome Lists containing this project
- awesome-react-cn - react-figma - A React renderer for Figma (Uncategorized / Uncategorized)
- awesome-frontend - React Figma
- awesome-learning-resources - react-figma - A React renderer for Figma (Uncategorized / Uncategorized)
- awesome-list - react-figma - figma | 1687 | (TypeScript)
- awesome-react-renderer - react-figma - render React components to Figma. (Design)
- awesome-figma - react-figma - Render React components to Figma. (Plugins development)
- awesome-react - react-figma - A React renderer for Figma ` 📝 18 days ago` (React [🔝](#readme))
- awesome-react - react-figma - A React renderer for Figma (**Awesome React** [](https://github.com/sindresorhus/awesome) / React)
- awesome-figma - react-figma
- awesome-figma - react-figma - 将React组件渲染到Figma。 (插件开发)
README
# React Figma
[](https://www.npmjs.com/package/react-figma)
[](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
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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
📖
headwindz
💻
Darío Hereñú
📖
Konstantin Popov
📖
Utkarsh Singh
📖
mrkenneh
💻
Anna Do
💻
Steven Petryk
💻
Thierry Charbonnel
📖
Jack Oliver
📖
Marc Abramowitz
📖
fishtriangle
💻
Carlos
📖
Raghu Ram M
📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!