Description
A React renderer into Figma. Use React components as a source for your designs.
🍬 Compatible with react-native, react-sketchapp, react-primitives API.
🦄 Flexible layouts support with Yoga Layout.
♻️ Hydration and HMR support.
⚙️ Built on Figma Plugin API.
React Figma alternatives and similar libraries
Based on the "PostCSS" category.
Alternatively, view React Figma alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -
emotion
👩🎤 CSS-in-JS library designed for high performance style composition -
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing! -
JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language. -
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
React CSS Modules
Seamless mapping of class names to CSS modules inside of React components. -
vue-virtual-scroll-list
⚡️A vue component support big amount data list with high render performance and efficient. -
Neutrino
Create and build modern JavaScript projects with zero initial configuration. -
Atomizer
A library to create small, reusable CSS that scales as your website grows. -
jTools - Javascript web components
jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms. -
React Inline
Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. -
DHTMLX UI Widgets with React
Using DHX widgets with React -
DHTMLX Widgets with Angular
Using DHX widgets with Angular -
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component -
ms-business-startup-bulma
Basic demo using Bulma CSS Framework Demo:
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of React Figma or a related project?
README
React Figma
A React renderer for Figma. Use React components as a source for your designs.
- 🍬 Compatible with react-native, react-sketchapp, react-primitives API.
- 🦄 Flexible layouts support with Yoga Layout.
- ♻️ Hydration and HMR support.
- ⚙️ Built on Figma Plugin API.
- 🚫 Is not a code generator.
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
- [Basic](examples/basic)
- [Basic + HMR](examples/basic-hmr)
- [Design system](examples/design-system)
- [Interactive](examples/interactive)
- [Data fetching](examples/fetching)
- [💅 styled-components](examples/styled-components)
- PrimerDemo - Example of multiplatform UI-kit
- [Component Variants](examples/component-variants)
- [MDX](examples/mdx)
- [Local Styles](examples/local-styles)
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](./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, for creating project logo.
- Maksim, for TypeScript counseling.
Tested with browserstack
Contributors ✨
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> 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📖
<!-- markdownlint-restore --> <!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the all-contributors specification. Contributions of any kind welcome!