airbnb
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 renderNext, check out some more examples!
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-sketchappwas 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-sketchappmakes 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