Popularity
5.6
Growing
Activity
9.0
Declining
880
17
36

Monthly Downloads: 0
Programming language: TypeScript
Tags: Code Design     React     Figma    
Latest version: v0.1.15

React Figma alternatives and similar libraries

Based on the "Code Design" category

Do you think we are missing an alternative of React Figma or a related project?

Add another 'Code Design' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
More from our partner

README

React Figma

All Contributors npm version CircleCI Join the community on Spectrum

A React renderer into Figma. Use React components as a source for your designs.

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

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:

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!