airbnb / react-sketchapp
render React components to Sketch ⚛️💎
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing airbnb/react-sketchapp in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
PreviewQuick-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!
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-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!
Read more about why we built it