• 🦄 Render React components to Sketch.app!
• 🦄 Use flexbox for layout!
• 🦄 Build Sketch documents with real data!
• 🦄 Share styles & components between platforms!

Motivation

react-sketchapp evolved out of our need to generate high-quality, consistent Sketch assets for our design system at Airbnb. Wrapping Sketch’s imperative API is a pragmatic solution for consistent & predictable rendering. By using the same component API as react-native—<View />, <Text />, <Image /> instead of <Rect />, <Oval /> etc—we can use the same layout algorithms and components across multiple platforms.

Existing plugins try to go from Sketch to the browser (CSS, HTML, sometimes even components) — for our use case this is the wrong model. By inverting the system we can keep our source of truth in code, and treat Sketch as a pure render function.

Running example scripts

Make sure Sketch automatically reloads plugins:

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

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.