Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/airbnb/react-sketchapp
render React components to Sketch ⚛️💎
https://github.com/airbnb/react-sketchapp
react react-renderer react-sketchapp sketch sketch-plugin
Last synced: 2 days ago
JSON representation
render React components to Sketch ⚛️💎
- Host: GitHub
- URL: https://github.com/airbnb/react-sketchapp
- Owner: airbnb
- License: mit
- Created: 2017-04-21T18:27:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T11:10:52.000Z (9 months ago)
- Last Synced: 2025-02-11T13:04:29.371Z (9 days ago)
- Topics: react, react-renderer, react-sketchapp, sketch, sketch-plugin
- Language: TypeScript
- Homepage: http://airbnb.io/react-sketchapp/
- Size: 4.22 MB
- Stars: 14,932
- Watchers: 406
- Forks: 819
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-cn - react-sketchapp - Render React components to Sketch (Uncategorized / Uncategorized)
- awesome-learning-resources - react-sketchapp - Render React components to Sketch (Uncategorized / Uncategorized)
- awesome-designops - react-sketchapp - turn React components into Sketch compositions (Sketch / Handoff)
- awesome-github-star - react-sketchapp
- awesome-list - react-sketchapp
- awesome-react-renderer - react-sketchapp - render React components to Sketch. (Design)
- awesome-react - react-sketchapp - render React components to Sketch ` 📝 3 months ago` (React [🔝](#readme))
README
render React components to Sketch; tailor-made for design systems
## Quick-start 🏃
First, make sure you have installed [Sketch](http://sketch.com) version 50+, & a recent [npm](https://nodejs.org/en/download/).
Open a new Sketch file, then in a terminal:
```bash
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](https://github.com/airbnb/react-sketchapp/tree/master/examples)!
[](https://www.npmjs.com/package/react-sketchapp)  [](https://travis-ci.org/airbnb/react-sketchapp)
## 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?
```js
import * as React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';
const App = props => (
{props.message}
);
export default context => {
render(, context.document.currentPage());
};
```
## What can I do with it?
- **Manage design systems—** `react-sketchapp` was built for [Airbnb’s design system](http://airbnb.design/building-a-visual-language/); 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](http://airbnb.design/painting-with-code/)
## Documentation
- [Examples](http://airbnb.io/react-sketchapp/docs/examples.html)
- [API Reference](http://airbnb.io/react-sketchapp/docs/API.html)
- [Styling](http://airbnb.io/react-sketchapp/docs/guides/styling.html)
- [Universal Rendering](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html)
- [Data Fetching](http://airbnb.io/react-sketchapp/docs/guides/data-fetching.html)
- [FAQ](http://airbnb.io/react-sketchapp/docs/FAQ.html)
- [Contributing](https://github.com/airbnb/react-sketchapp/blob/master/.github/CONTRIBUTING.md)