# React Figma

[![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

## 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} 📖
_{不吃猫的鱼} 💻	_{Darío Hereñú} 📖	_{Konstantin Popov} 📖	_{Utkarsh Singh} 📖	_mrkenneh 💻	_{Anna Do} 💻	_{Steven Petryk} 💻
_{Thierry Charbonnel} 📖	_{Jack Oliver} 📖	_{Marc Abramowitz} 📖	_fishtriangle 💻	_Carlos 📖

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