3.2.6 • Published 4 years ago

react-sketchapp v3.2.6

Weekly downloads
66
License
MIT
Repository
github
Last release
4 years ago

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

3.2.6

4 years ago

3.2.5

4 years ago

3.2.4

4 years ago

3.2.3

4 years ago

3.2.2

4 years ago

3.2.1

4 years ago

3.2.0

4 years ago

3.1.3

4 years ago

3.1.2

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.5

4 years ago

3.0.4

4 years ago

3.0.3

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

3.0.0-beta.9

5 years ago

3.0.0-beta.8

5 years ago

3.0.0-beta.7

5 years ago

3.0.0-beta.6

5 years ago

3.0.0-beta.5

5 years ago

3.0.0-beta.4

5 years ago

3.0.0-beta.3

5 years ago

2.1.2

5 years ago

3.0.0-beta.2

5 years ago

2.1.1

5 years ago

3.0.0-beta.1

6 years ago

3.0.0-beta.0

6 years ago

2.1.0

6 years ago

2.0.0

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago

1.0.0-beta.5

6 years ago

1.0.0-beta.4

6 years ago

1.0.0-beta.3

6 years ago

1.0.0-beta.2

7 years ago

1.0.0-beta.1

7 years ago

0.12.1

7 years ago

0.12.0

7 years ago

0.11.6

7 years ago

0.11.5

7 years ago

0.11.4

7 years ago

0.11.3

7 years ago

0.11.2

7 years ago

0.11.1

7 years ago

0.11.0

7 years ago

0.10.3

7 years ago

0.10.2

7 years ago

0.10.1

7 years ago

0.10.0

7 years ago

0.9.4

7 years ago

0.9.2

7 years ago

0.9.1

7 years ago

0.9.0

7 years ago

0.8.0

7 years ago

0.7.0

7 years ago

0.6.0

7 years ago

0.5.0

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.0

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago