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
What is this?react-sketchapp renders React components directly into Sketch documents, letting you build and manage Sketch design-system assets with real React code.
Is this a Sketch plugin or a React library?It is a React renderer (a library) that outputs Sketch-compatible layers; it runs as a custom React reconciler rather than a standalone app.
How do I get it running?Open a new Sketch file and set it up from a terminal with npm, then check the provided examples to see rendered output.
Do I need Sketch installed to use it?Yes, you need Sketch version 50 or newer plus a recent version of npm; it also relies on packages like sketch-file-format-ts and node-sketch-bridge under the hood.
Does the Sketch API ever break this?Yes, Sketch's own scripting API changes frequently, which is one of the reasons the project exists as a stable React wrapper around it.
Who was this really built for?It was built for Airbnb's own design system, as the easiest way to manage Sketch assets at scale for large design systems.
Can I use real data in my Sketch designs with this?Yes, react-sketchapp makes it simple to fetch and incorporate real data into your Sketch files, which is otherwise challenging to do directly in Sketch.
Can I build custom tools on top of Sketch with this?Yes, the README highlights using react-sketchapp as a canvas for building new custom design tooling on top of Sketch.
Why did Airbnb build this instead of using Sketch's native API directly?Managing design-system assets natively in Sketch is complex, error-prone and time consuming, and React gives JavaScript developers a familiar, reusable way to build Sketch documents instead.
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