react-sketchapp

render React components to Sketch ⚛️💎

Showing:

Popularity

Downloads/wk

151

GitHub Stars

14.8K

Maintenance

Last Commit

7mos ago

Contributors

65

Package

Dependencies

13

Size (min+gzip)

158.5KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
priyanka17-maker62 Ratings0 Reviews
18 days ago
TsikaBullRat27 Ratings0 Reviews
1 month ago
Luis Emmanuel102 Ratings0 Reviews
3 months ago
Dashon 'DJ' HawkinsPhoenix, Arizona486 Ratings0 Reviews
Full-stack Javascript/Node.js developer, architect, & engineer in junior/mid role & CEO @GhettoGeek LLC; boutique, full-service digital agency downtown Phx, AZ.
8 months ago
Pascal LanoixParis45 Ratings0 Reviews
Développeur Web Ruby On Rails - Full Stack
1 year ago

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial