react sketch是一个将react组件渲染到sketch的工具，是一个开源库；可以写出符合Sketch文档规范的React组件，提供了一种更加便捷的方法来管理组件，可用“npm install --global skpm”进行安装。
本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。
react sketch是什么
React Sketch App是一个将React组件渲染到Sketch的工具。在Sketch中管理设计系统的资产非常复杂，容易出错且耗时。Sketch可编写脚本，但API经常更改。React提供了完美的包装器让JavaScript开发人员使用熟悉的方式构建可重用文档。
React - SketchApp 是一个开源库，为设计系统量身定制。它通过将 React 元素渲染到 Sketch 来连接设计和开发之间的鸿沟。
这个神奇的开源库给设计师们提供了一个全新的设计工作流程：在时下最流行的 React 前端框架下用代码进行设计，并实时渲染到 Sketch 中审阅设计。细思恐极，在设计圈大红大紫的 Sketch 虽说占了开源库的一半名字，但其实担当的只是一个浏览器的角色。真正留下的设计文档则成了代码。
安装
npm install --global skpm
根据模板创建一个项目
skpm create my-app --template=airbnb/react-sketchapp cd my-app
使用
修改src/manifest.json
"commands": [
{
"name": "My App Name: Sketch Components"
"identifier": "main",
"script": "./main.js"
}
],
"menu": {
"isRoot": true,
"items": [
"main"
]
}
}创建Sketch入库文件，这里在src/manifest.json定义的是./main.js
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, StyleSheet, View } from 'react-sketchapp';
import chroma from 'chroma-js';
import { times } from 'ramda';
const styles = StyleSheet.create({
container: {
width: 480,
height: 480,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
});
const Document = ({ colors, steps }) => {
const color = chroma.scale(colors);
return (
<View style={styles.container}>
{times((i) => color(i / steps).hex(), steps).map((val, i) => (
<View
name={val}
key={val}
style={{
backgroundColor: val,
margin: 2,
// prettier-ignore
height: 96 - (2 * i),
// prettier-ignore
width: 96 - (2 * i),
borderRadius: 2 * i,
}}
/>
))}
</View>
);
};
Document.propTypes = {
colors: PropTypes.arrayOf(PropTypes.string),
steps: PropTypes.number,
};
export default () => {
render(
<Document colors={['#01FFD8', '#C137E3', '#8702ED']} steps={50} />,
context.document.currentPage(),
);
};执行
npm run render
推荐学习：《react视频教程》
