what is react sketch

react sketch is a tool for rendering react components to sketch. It is an open source library. It can write React components that comply with Sketch document specifications and provides a more convenient way to manage components. You can use "npm install --global skpm" to install.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is react sketch

React Sketch App is a tool that renders React components to Sketch. Managing a design system's assets in Sketch is complex, error-prone, and time-consuming. Sketch is scriptable, but the API changes frequently. React provides the perfect wrapper for JavaScript developers to build reusable documents in a familiar way.

React - SketchApp is an open source library tailored for design systems. It bridges the gap between design and development by rendering React elements into Sketch.

This magical open source library provides designers with a new design workflow: design with code under the most popular React front-end framework, and render it to Sketch in real time for review of the design. If you think about it carefully, Sketch, which is very popular in the design circle, accounts for half of the names of open source libraries, but in fact it only plays the role of a browser. The real design documents left behind become code.

Installation

npm install --global skpm

Create a project based on the template

skpm create my-app --template=airbnb/react-sketchapp 
cd my-app

Use

Modify src/manifest.json

  "commands": [
    {
      "name": "My App Name: Sketch Components"
      "identifier": "main",
      "script": "./main.js"
    }
  ],
  "menu": {
    "isRoot": true,
    "items": [
      "main"
    ]
  }
  }

Create the Sketch library file. What is defined here in src/manifest.json is ./main.js

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, StyleSheet, View } from 'react-sketchapp';
import chroma from 'chroma-js';
import { times } from 'ramda';
const styles = StyleSheet.create({
  container: {
    width: 480,
    height: 480,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
  },
});
const Document = ({ colors, steps }) => {
  const color = chroma.scale(colors);
  return (
    <View style={styles.container}>
      {times((i) => color(i / steps).hex(), steps).map((val, i) => (
        <View
          name={val}
          key={val}
          style={{
            backgroundColor: val,
            margin: 2,
            // prettier-ignore
            height: 96 - (2 * i),
            // prettier-ignore
            width: 96 - (2 * i),
            borderRadius: 2 * i,
          }}
        />
      ))}
    </View>
  );
};
Document.propTypes = {
  colors: PropTypes.arrayOf(PropTypes.string),
  steps: PropTypes.number,
};
export default () => {
  render(
    <Document colors={[&#39;#01FFD8&#39;, &#39;#C137E3&#39;, &#39;#8702ED&#39;]} steps={50} />,
    context.document.currentPage(),
  );
};

Execution

npm run render

Recommended learning: "react video tutorial"

The above is the detailed content of what is react sketch. For more information, please follow other related articles on the PHP Chinese website!