Home > Web Front-end > Front-end Q&A > what is react sketch

what is react sketch

WBOY
Release: 2022-04-21 15:53:21
Original
1931 people have browsed it

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.

what is react sketch

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
Copy after login

Create a project based on the template

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

Use

Modify src/manifest.json

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

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(),
  );
};
Copy after login

Execution

npm run render
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template