Open a new Sketch file, then in a terminal:
git clone https://github.com/airbnb/react-sketchapp.gitcd react-sketchapp/examples/basic-setup && npm installnpm run render
Next, check out some more examples!
What does the code look like?
;;const App =<Artboard><Text style= fontFamily: 'Comic Sans MS' color: 'hotPink' >propsmessage</Text></Artboard>;;;
What can I do with it?
- Manage design systems—
react-sketchappwas 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-sketchappmakes 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!