React Figma alternatives and similar libraries
Based on the "Code Design" category.
Alternatively, view React Figma alternatives based on common mentions on social networks and blogs.
-
electron-react-boilerplate
Live editing development on desktop app. -
react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform. -
react-redux-starter-kit
Get started with React, Redux, and React-Router!. -
react-jsonschema-form
A React component for building Web forms from JSONSchema. -
react-router-redux
Ruthlessly simple bindings to keep react-router and redux in sync. -
reflux
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux. -
react-hot-boilerplate
Minimal live-editing boilerplate for your next ReactJS project. -
react-server
React framework with server render for blazing fast page load and seamless transitions between pages in the browser. -
generator-react-webpack
Yeoman generator for ReactJS and Webpack. -
redux-auth-patch
Complete token authentication system for react + redux that supports isomorphic rendering. -
react-isomorphic-starterkit
Create an isomorphic React app in less than 5 minutes.
Get performance insights in less than 4 minutes
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
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>
);
};
⚠️ Warning!️ Project is not production ready and currently at beta version. API can be changed.
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 multifplatform UI-kit
- [Component Variants](examples/component-variants)
- [MDX](examples/mdx)
Become a Contributor 🎖
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💻
<!-- markdownlint-enable --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the all-contributors specification. Contributions of any kind welcome!