node package manager

react-sketchapp

This project is currently in alpha and APIs are subject to change. If you found the repo on npm — the source (& docs, oops) is private for now; it will be announced on my mailing list and Twitter very soon :)

react-sketchapp

A React renderer for Sketch.app ⚛ 💎

npm CircleCI Sketch.app

Features

  • Declarative. All the lessons we've learnt from the React model of programming. A comfortable layer over Sketch’s API.
  • Familiar. Flexbox layouts. react-native components. You already know how to use react-sketchapp.
  • Data-based. Pipe in real data from JSON files, APIs, and databases.
  • Universal. Start from scratch, or use your existing component libraries

Documentation

Usage

react-sketchapp projects are implemented as Sketch plugins. First, make sure you've disabled Sketch's caching mechanism.

defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES

There are several ways to build Sketch plugins:

The simple way

The simplest way to build Sketch plugins with modern JavaScript is skpm 💎📦.

Install skpm, if you don't have it already, and create a new project.

npm install -g skpm
mkdir my-rad-sketch-plugin
cd my-rad-sketch-plugin
skpm init
skpm link .

Install some dependencies and set up JSX compilation

npm install --save react-sketchapp react react-test-renderer
npm install --save-dev babel-preset-react
echo '{"presets": ["react"]}' > .babelrc

Then, to build your plugin

skpm build --watch

And write your plugin in src/my-command.js

import React from 'react';
import { render, Text, View } from 'react-sketchapp';
 
const Document = props =>
  <View>
    <Text>Hello world!</Text>
  </View>;
 
export default function (context) {
  render(<Document />, context);
}

Run your plugin in Sketch via Plugins → [your plugin name] → my-command.

Refer to the skpm docs for more information.

The manual way

Feel free to use whatever build process you're comfortable with — just disable CocoaScript and you can use react-native-packager, rollup, webpack etc.

react-sketchapp-starter is a minimal boilerplace to start developing with Webpack.

Examples

react-sketchapp includes a folder of examples showing how you might use it to work with a JavaScript design system.

Clone & build the repo, and symlink the examples:

git clone git@github.com:jongold/react-sketchapp.git && cd react-sketchapp
npm install && npm run build:plugin
./symlink-plugin.sh

Open Sketch; examples will be in Plugins → react-example.