render React components to Sketch ⚛️💎
MIT License
14946
418
891

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?

  • Manage design systems— react-sketchapp was built for Airbnb’s design system; this is the easiest way to manage Sketch assets in a large design system
  • Use real components for designs— Implement your designs in code as React components and render them into Sketch
  • Design with real data— Designing with data is important but challenging; react-sketchapp makes it simple to fetch and incorporate real data into your Sketch files
  • Build new tools on top of Sketch— the easiest way to use Sketch as a canvas for custom design tooling

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

Read more about why we built it

Documentation

Contributors

jemgold
mathieudutour
macintoshhelper
jaridmargolin
larsonjj
lelandrichardson
darknoon
dchen
thierryc
ianhook
dmeehan1968
lordofthelake
weaintplastic
saschazar21
tylerhowarth
lessthanzero
thecalvinchan
DanielRuf
dabbott
ljharb
markdalgleish
qd-qd
neoddish
nitin42
alaycock
antoni
antoniobrandao
brentvatne
hcharley
divyanshu-rawat
donysukardi
iamdustan
jmingtan
evanwinter
gsong
KittyGiraudel
jacobp100
justjake
jkastl
lencioni
joeybright
sjy
jshmllr
KimDal-hyeong
lmnelson
maasonlee
mattvagni
nicksarafa
Paarmita
patrickhpan
ricokahler
shnibl
TKAB
ChristopherBiscardi
oluckyman
petetnt
MrPeak