对于设计师来说,我们一般希望能够将自己的设计图一键转为代码给开发,用来实现更精准的视觉还原。但是,有一些人希望反着来,也就是将代码转换为设计资源,来实现用代码统一管理设计,比如 Airbnb 的 react-sketchapp

React Figma 也是这样的一个工具,它可以帮助你将 React 代码转换为 Figma 中的设计资源。

示例效果

它的使用方式相当于是你在写一个 Figma 插件,并实时预览插件效果,理解它需要一定的代码基础。

使用步骤

1. 克隆模板仓库

在终端执行以下命令:

git clone https://github.com/LosYear/react-figma-boilerplate.git

2.安装依赖

使用 Yarn 或者 npm 来安装依赖: Yarn:

cd react-figma-boilerplate
yarn

npm:

cd react-figma-boilerplate
npm install

3.运行起来

执行以下命令运行起来,会打包出插件文件到 ./dist 文件夹下。 Yarn:

yarn webpack:watch 

npm:

npm webpack:watch

4.安装运行插件

打开 Figma 客户端,在插件页面点击右侧开发插件的加号,选择从已有文件创建插件,选择插件文件夹下面的 manifest.json 文件,然后在某个文件中运行插件,就可以看到效果了。

安装运行插件

此时你可以更改 ./src/App.jsx 文件,按下 Cmd+Option+P 再次运行插件可以看到画布被更新。