Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

This project is currently in beta and APIs are subject to change.

react-sketchapp
render React components to Sketch; tailor-made for design systems

Quickstart πŸƒβ€

First, make sure you have installed Sketch version 43+, & a recent npm.

Open a new Sketch file, then in a terminal:

git clone https://github.com/auth0/auth0-react-sketchapp
cd auth0-react-sketchapp/examples/styleguide && npm install

npm run render

Next, check out some more examples!

Styleguide screenshot

npm Sketch.app Travis Gitter

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 { 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);
}

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

About

Render styleguide styles from React components πŸ’…πŸ’Ž

Topics

Resources

Packages

No packages published