‚̧Noticeably Playful Monkeys
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    react-sketchapp
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.6¬†‚Äʬ†Public¬†‚Äʬ†Published
    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

    Install

    npm i react-sketchapp

    DownloadsWeekly Downloads

    33

    Version

    3.2.6

    License

    MIT

    Unpacked Size

    2.52 MB

    Total Files

    444

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar