GitHub - airbnb/react-sketchapp: render React components to Sketch ⚛️?
source link: https://github.com/airbnb/react-sketchapp
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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!
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK