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 и позволяет создавать и поддерживать ресурсы дизайн-системы в Sketch с помощью настоящего кода на React.
Это плагин для Sketch или библиотека React?Это рендерер React (библиотека), который создаёт слои, совместимые с Sketch; он работает как пользовательский реконсилятор React, а не как самостоятельное приложение.
Как это запустить?Откройте новый файл Sketch и установите всё через терминал с помощью npm, затем посмотрите готовые примеры, чтобы увидеть результат отрисовки.
Нужно ли мне установить Sketch, чтобы это использовать?Да, нужен Sketch версии 50 или новее и свежая версия npm; под капотом также используются пакеты sketch-file-format-ts и node-sketch-bridge.
Может ли API Sketch когда-нибудь сломать это?Да, собственный API Sketch для скриптов часто меняется, и именно поэтому проект существует как стабильная обёртка на React над ним.
Для кого это было создано на самом деле?Это было создано для собственной дизайн-системы Airbnb как самый простой способ управлять ресурсами Sketch в больших масштабах для крупных дизайн-систем.
Можно ли использовать реальные данные в моих дизайнах Sketch с этим?Да, react-sketchapp упрощает получение реальных данных и их включение в файлы Sketch, что иначе сложно сделать прямо в Sketch.
Можно ли создавать свои инструменты на основе Sketch с этим?Да, в README указано, что react-sketchapp можно использовать как холст для создания новых собственных инструментов для дизайна поверх Sketch.
Зачем Airbnb сделала это, вместо того чтобы использовать нативный API Sketch напрямую?Управлять ресурсами дизайн-системы напрямую в 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