React Figma - a custom React renderer to Figma

栏目: IT技术 · 发布时间: 5年前

内容简介:Render React components to Figma.

React Figma

React Figma - a custom React renderer to Figma

Render React components to Figma.

React Figma - a custom React renderer to Figma

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: Warning!️ Project is not production ready and currently at alpha 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 yoga-layout-prebuilt

Or with npm:

npm i react react-figma yoga-layout-prebuilt --save

Usage

Configure main thread

import * as React from 'react';
import { render, subscribeOnMessages } from 'react-figma';
import { App } from './App';

figma.showUI(__html__, { visible: false });

figma.ui.onmessage = message => {
    subscribeOnMessages(message);
};

render(<App />, figma.root);

Configure ui thread

import * as yoga from 'yoga-layout-prebuilt';
import { uiWorker } from 'react-figma';

onmessage = event => {
    uiWorker({ yoga })(event);
};

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

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 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:

Contributors :sparkles:

Thanks goes to these wonderful people ( emoji key ):

React Figma - a custom React renderer to Figma Ilya Lesik
:computer:
React Figma - a custom React renderer to Figma Losev Yaroslav
:computer:
React Figma - a custom React renderer to Figma Vishnu Singh
:computer:
React Figma - a custom React renderer to Figma corrina
:computer:
React Figma - a custom React renderer to Figma Zachary Witt
:computer:
React Figma - a custom React renderer to Figma Abdelrahman Ashraf
:computer:
React Figma - a custom React renderer to Figma sprashad
:book:

This project follows the all-contributors specification. Contributions of any kind welcome!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

天涯虚拟社区

天涯虚拟社区

刘华芹 / 民族出版社 / 2005-11 / 23.00元

网络空间很复杂,好多人并不完全了解或者只是了解到一些皮毛。比如说好多人对于见网友一事总是抱着浪漫或者暖昧的想法,而事实却并不总是想象的那样。作者在做虚拟社区研究甚至是在有这个想法之前并不常呆在网上,互联网对于作者来说就是查查资料、收发信年、看看新闻的工具。担是看着越来越多的人把时间花在网上,一处文化上的直觉告诉作者:有一种新的生活方式产生了。强烈的好奇心驱使着作者走到了网上,走到了天涯虚拟社区,并......一起来看看 《天涯虚拟社区》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具