react-sketchapp README

The project's README from github.com/airbnb/react-sketchapp. As one markdown file: README.md.

react-sketchapp
render React components to Sketch; tailor-made for design systems

Quick-start 🏃‍

First, make sure you have installed Sketch version 50+, & a recent npm.

Open a new Sketch file, then in a terminal:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

Next, check out some more examples!

readme-intro

npm Sketch.app Travis

Why?!

Managing the assets of design systems in Sketch is complex, error-prone and time consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.

What does the code look like?

import * as React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}</Text>
  </Artboard>
);

export default context => {
  render(<App message="Hello world!" />, context.document.currentPage());
};

What can I do with it?

Found a novel use? We'd love to hear about it!

Read more about why we built it

Documentation

react-sketchapp (airbnb/react-sketchapp)

Searching Database…

14.9K ·GitHub
React-sketchapp
这是什么？react-sketchapp 可以把 React 组件直接渲染到 Sketch 文档中，让你用真正的 React 代码来构建和管理 Sketch 设计系统资源。
这是 Sketch 插件还是 React 库？它是一个 React 渲染器（即库），输出与 Sketch 兼容的图层；它以自定义 React reconciler 的方式运行，而不是独立应用。
我该怎么让它运行起来？打开一个新的 Sketch 文件，然后在终端中用 npm 完成设置，再查看随附的示例，确认渲染输出的效果。
使用它需要先安装 Sketch 吗？需要。你需要 Sketch 50 或更高版本，以及较新版本的 npm；它底层还依赖 sketch-file-format-ts 和 node-sketch-bridge 等包。
Sketch 的 API 变动会让它出问题吗？会的。Sketch 自身的脚本 API 经常变化，这也是该项目作为一个稳定的 React 封装层而存在的原因之一。
这个项目到底是为谁开发的？它是为 Airbnb 自己的设计系统开发的，是大型设计系统中大规模管理 Sketch 资源最简便的方式。
我能用它在 Sketch 设计中加入真实数据吗？可以。react-sketchapp 让你能更简单地获取真实数据并整合进 Sketch 文件，而这在 Sketch 里直接操作是比较困难的。
我能基于 Sketch 用它开发自定义工具吗？可以。README 中特别提到，可以把 react-sketchapp 当作画布，在 Sketch 之上构建新的自定义设计工具。
Airbnb 为什么不直接用 Sketch 的原生 API，而要自己开发这个？在 Sketch 中原生管理设计系统资源既复杂、容易出错，又耗时；而 React 让 JavaScript 开发者能以熟悉、可复用的方式来构建 Sketch 文档。
What are similar projects?drawably, styled-components, chakra-ui, astryx, base-ui, threeui, pdfcn, Monocharts
Which topics is it in?sketch, design-system, ui-components, react, desktop-app, npm, frontend, library, typescript, developer-tools, mit, macos
Creator
airbnb
Size
4.3 MB
Stars
14.9K
Updated
CommitMar 30Releasev3.2.2May 04
Age
9y
Commits · 90 Days