Was ist eine Reaktionsskizze?

React Sketch ist ein Tool zum Rendern von React-Komponenten in Sketch. Es kann React-Komponenten schreiben, die den Sketch-Dokumentspezifikationen entsprechen, und bietet eine bequemere Möglichkeit, Komponenten zu verwalten. global skpm“ zu installieren.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist React Sketch?

React Sketch App ist ein Tool, das React-Komponenten in Sketch rendert. Die Verwaltung der Assets eines Designsystems in Sketch ist komplex, fehleranfällig und zeitaufwändig. Sketch ist skriptfähig, aber die API ändert sich häufig. React bietet den perfekten Wrapper für JavaScript-Entwickler, um wiederverwendbare Dokumente auf vertraute Weise zu erstellen.

React – SketchApp ist eine Open-Source-Bibliothek, die auf Designsysteme zugeschnitten ist. Es schließt die Lücke zwischen Design und Entwicklung, indem es React-Elemente in Sketch rendert.

Diese erstaunliche Open-Source-Bibliothek bietet Designern einen neuen Design-Workflow: Entwerfen Sie mit Code unter dem beliebtesten React-Front-End-Framework und rendern Sie ihn in Echtzeit zur Überprüfung in Sketch. Wenn Sie genau darüber nachdenken, macht Sketch, das in Designkreisen sehr beliebt ist, die Hälfte der Namen der Open-Source-Bibliotheken aus, tatsächlich spielt es jedoch nur die Rolle eines Browsers. Die zurückgelassenen echten Designdokumente werden zu Code.

Installation

npm install --global skpm

Erstellen Sie ein Projekt basierend auf der Vorlage.

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

Verwenden Sie

, um src/manifest.json zu ändern /manifestieren. json ist ./ main.js

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

Execution

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

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist eine Reaktionsskizze?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!