CD2H gitForager

auth0/auth0-react-sketchapp

Name: auth0-react-sketchapp

Owner: Auth0

Description: Render styleguide styles from React components ??

Created: 2017-04-26 06:06:16.0

Updated: 2017-06-30 14:48:59.0

Pushed: 2017-07-06 14:34:59.0

Homepage:

Size: 2660

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

This project is currently in beta and APIs are subject to change.

render React components to Sketch; tailor-made for design systems

Quickstart ??

First, make sure you have installed Sketch version 43+, & a recent npm.

Open a new Sketch file, then in a terminal:

clone https://github.com/auth0/auth0-react-sketchapp
uth0-react-sketchapp/examples/styleguide && npm install

run render

Next, check out some more examples!

Styleguide screenshot

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?

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

t App = props => (
rtboard>
<Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
  { props.message }
</Text>
Artboard>


rt default (context) => {
nder(<App message="Hello world!" />, context);

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!

Documentation

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.