Airbnb Releases a React Sketch.app

Airbnb released a new open-source library named React-sketchapp that allows you to write React components that render to Sketch documents.

They said they’ve built this tool because 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.

Getting started with this new tool is easy. Just be sure you are running Sketch 43+ and have a recent install of NPM. Then install it and run it with the following:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

Even the code output from their example is not horrid like you might expect from a tool like this:

import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
  <Artboard>
    <Text style=>
      { props.message }
    </Text>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context);
}

For more information check out their announcement and Github repo.