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.
-
create-react-app
Set up a modern web app by running one command. -
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -
react-boilerplate
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. -
formik
Build forms in React, without the tears 😭 [Moved to: https://github.com/jaredpalmer/formik] -
react-hook-form
📋 React Hooks for form state management and validation (Web + React Native) -
query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. -
electron-react-boilerplate
A Foundation for Scalable Cross-Platform Apps -
apollo-client
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. -
react-relay
Relay is a JavaScript framework for building data-driven React applications. -
react-redux-starter-kit
Get started with React, Redux, and React-Router!. -
recompose
A React utility belt for function components and higher-order components. -
react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform -
classnames
A simple javascript utility for conditionally joining classNames together -
react-jsonschema-form
A React component for building Web forms from JSON Schema. -
redux-form
A Higher Order Component using react-redux to keep form state in a Redux store -
Formily
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 -
react-router-redux
Ruthlessly simple bindings to keep react-router and redux in sync. -
react-final-form
🏁 High performance subscription-based form state management for React -
stitches
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
react-responsive
CSS media queries in react - for responsive design, and more. -
hypernova
A service for server-side rendering your JavaScript views -
mobx-react
React bindings for MobX. Create fully reactive components. -
reflux
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux -
nwb
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it) -
react-hot-boilerplate
Minimal live-editing example for React -
react-css-modules
Seamless mapping of class names to CSS modules inside of React components. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
surveyjs
Free Open-Source JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout that lets you load and run multiple web forms, or build your own self-hosted form management system, retaining all sensitive data on your servers. You have total freedom of choice as to the backend, because any server + database combination is fully compatible. -
wouter
🥢 A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS. -
react-server
:rocket: Blazing fast page load and seamless navigation. -
react-refetch
A simple, declarative, and composable way to fetch data for React components -
generator-react-webpack
Yeoman generator for ReactJS and Webpack -
react-isomorphic-starterkit
Create an isomorphic React app in less than 5 minutes. -
redux-router
Redux bindings for React Router – keep your router state inside your Redux store -
redux-auth-patch
Complete token authentication system for react + redux that supports isomorphic rendering. -
cerebral
Declarative state and side effects management for popular JavaScript frameworks -
essential-react
A minimal skeleton for building testable React apps using Babel
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
* 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!