preface

Recently, IN the process of organizing the design specification, I tried to use the React-Sketchapp tool released by Airbnb, and found it very easy to use. Here I recommend a piece of wall crack to talk about my experience in using it:

React Sketch is a command line tool that generates Sketch files using React. It is mainly used to generate design systems. This crossover tool provides a novel way of thinking and has its application scenarios in certain situations.

For those of you who are designers, React might be a good place to start if you want to learn a little bit about programming: 😁

Why code the design

Generating drafts in code is a novel idea, so why do it? What’s the good of that? The official description is as follows:

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.

In short: the code has better control over the iteration of the design asset. This is at the heart of why we use this tool: steady iterations of design assets improve the productivity of designers and zero-design teams.

As design specifications become more complex, iterations of versions of specifications become more and more difficult. In the past, designers had to change specifications manually, which was often error-prone and slow, especially when creating something that was very repetitive, such as a palette of hundreds of colors that could be changed frequently.

In addition, there are several advantages to using code to generate design drafts:

  1. The code can easily output repetitive views
  2. The React- Sketchapp tool uses the React syntax to facilitate reuse of programs, including component code and its style. Personally, it sounds like React Native
  3. Generate the design with real data or components, which will make the design closer to the resulting page
  4. Customizing some productivity tools based on Sketch, for example: generating full design specifications through simple configuration

How to use it?

Quick learning

Getting started with React-Sketchapp is easy, first make sure you have Sketch 43 and above installed, and make sure you have NPM installed.

Then execute the following three commands in the terminal:

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

Clone the React – Sketchapp project locally from Github, go to the /examples/basic-setup directory of the project, and install dependency files.

After the installation, create a new sketch file. Remember to create a new sketch file. React-sketchapp will output the latest sketch file.

Then enter the following command in the terminal and execute (do not close the terminal window after executing) :

npm run render
Copy the code

If the following figure is displayed in the Sketch file, the configuration is successful:

/examples/basic-setup/ SRC /my-command. Js /examples/basic-setup/ SRC /my-command.

import 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());
}
Copy the code

Click Save and the Sketch file will refresh automatically. After the refresh, the sketch file will look like the following:

Use the API

React – Sketchapp provides a comprehensive API that includes most of the features of Sketch

First open the API document address, the left API Reference is the list of APIS, which I often use:

  • Document: the sketch documents
  • Page: the Page
  • Artboard: sketchpad
  • Image: the Image
  • Text: word
  • View: folder (rectangle), similar to View component in React Native
  • StyleSheet: React-Sketchapp encapsulates StyleSheet functions to make it easier to reuse code
  • TextStyles: shared TextStyles

When using these components, you need to place the API references at the top of the file, separated by commas. Otherwise, an error will be reported:

import { Document, Page, Artboard , ... } from 'react-sketchapp';
Copy the code

Now try a combination of the above apis and output a page:

import React from 'react';
import { render, Document, Page, Artboard, View, Text, Image } from 'react-sketchapp';

const App = props= > (
  <Document>
    <Page>
      <Artboard name="ymfe.org">
        <View name="box" style={{ width: 140.height: 140.backgroundColor: '#333' }}>
          <Text name="title" style={{ color: '#fff' }}>Hello</Text>
          <Image source="https://ws1.sinaimg.cn/large/006oPFLAly1fqg4tqz7d2j30be06mjrl.jpg" style={{ height: 120.width: 140}} / >
        </View>
      </Artboard>
    </Page>
  </Document>
);

export default (context) => {
  render(<App/>, context.document.currentPage());
}
Copy the code

The output of the above case is:

In addition to these basic functions, react-Sketchapp can even export symbols, as shown in the following code:

import React from 'react';
import { render, View, Artboard, makeSymbol } from 'react-sketchapp';
const BlueSquare = (a)= > (
  <View
    name="Blue Square"
    style={{ width: 100.height: 100.backgroundColor: 'blue' }}
  />
);

const BlueSquareSymbol = makeSymbol(BlueSquare);

const Main = () => (
  <Artboard>
    <BlueSquareSymbol />
  </Artboard>
);

export default (context) => {
  render(<Main />, context.document.currentPage());
}
Copy the code

The output is as follows:

This opens up the possibility of printing the full UI Kit template file directly in code

Our practice

We used React-Sketchapp to create a design specification palette, text specification and project color specification based on a series of color and font parameters.

Independence as a result of the development project is stronger, some project needs to be some custom (usually) font size, color, therefore to develop project design specification based on the top design specification, we stood YDoc – elegant document build tools pioneered the use of the export project design specification, and strictly implemented, good results have been achieved:

For those who are interested, check out the YDoc project specification, which is completely sketched out with React-Sketchapp:

Think further

1. Do zero design teams need design specifications

Many teams in China are short of designers or lack sufficient design resources, which often requires programmers to get directly involved in the design (especially in the background system). At this time, programmers will follow their feelings and write ugly pages or even difficult to maintain the code. A poorly regulated page with a beautiful UI library is a copycat.

So for teams like this, learning the basics of how to use design specifications can make a big difference: following them will quickly improve the look of these pages, the tools will be pleasing, and the users will have fun working with them.

2. Productivity tools

As mentioned earlier, react-Sketchapp can be used to customize some efficiency tools based on Sketch, which opens up a lot of possibilities:

The input of these tools can be very simple configuration items, such as product color, text size, etc. The final product of these tools may be Sketch files, PDF files, codes or images. Sketch files can be used to generate design specifications for the secondary design of business components for designers. PDF can be used directly for browsing and printing; Images can be used on their own or as case diagrams.

React-sketchapp just provides an idea, and there’s a lot of room for tools like this once you get through programming and design.

3. About programmers using design tools

Due to the high cost of program learning, we only try to do this in our own research projects, so we often see some engineers thinking 😂 in the design draft

During the production of the design specification, our team encountered a situation like this: Some students made an interesting attempt to apply the concept of prototype in JavaScript to Symbol in Sketch. Since many components in Symbols are similar, Therefore, similar components inherit from the same Symbol and only change the text color, border, background color, etc., as shown below:

In addition, common properties are made into configuration items that can be modified by selecting them:

These optimizations are actually a bit over-encapsulated:

  • The former prototype chain mode is not readable enough for designers to understand, but the prototype can be written into the program and the concept can be hidden in the Sketch design draft, which is conducive to the maintenance of the design draft and the use of sketch files.
  • The configuration items encapsulated by the latter are too rigid and not flexible enough: in actual development, designers often separate components in the design draft and adjust the attributes one by one, and the configuration items preset by us are often unable to meet various needs, but will increase the production cost of the design draft.

Conclusion:

Using code to control the iteration of design specifications is a novel idea that crosses boundaries between design and technology and is difficult to implement. The React-Sketchapp tool offers many possibilities for connecting art and technology more closely, enabling technology to better support art.

We are still feeling our way forward and have made some bold attempts, so let time prove its value 👻

Related link: zhihu original article team official website personal blog