react sketch是什麼-前端問答-PHP中文網

react sketch是什麼

WBOY

發布： 2022-04-21 15:53:21

原創

1744 人瀏覽過

react sketch是將react元件渲染到sketch的工具，是一個開源程式庫；可以寫出符合Sketch文件規範的React元件，提供了一種更方便的方法來管理元件，可用「npm install --global skpm」進行安裝。

react sketch是什麼

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react sketch是什麼

React Sketch App是將React元件渲染到Sketch的工具。在Sketch管理設計系統的資產非常複雜，容易出錯且耗時。 Sketch可編寫腳本，但API經常變更。 React提供了完美的包裝器讓JavaScript開發人員使用熟悉的方式來建立可重複使用文件。

React - SketchApp 是一個開源程式庫，為設計系統量身定制。它透過將 React 元素渲染到 Sketch 來連接設計和開發之間的鴻溝。

這個神奇的開源程式庫為設計師們提供了一個全新的設計工作流程：在時下最受歡迎的 React 前端框架下用程式碼進行設計，並即時渲染到 Sketch 中審查設計。細思恐極，在設計圈大紅大紫的 Sketch 雖說佔了開源庫的一半名字，但其實擔當的只是一個瀏覽器的角色。真正留下的設計文檔則成了程式碼。

安裝

npm install --global skpm

登入後複製

根據範本建立一個項目

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

登入後複製

使用

修改src/manifest.json

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

登入後複製

建立Sketch入庫文件，這裡在src/manifest.json定義的是./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 (
    
      {times((i) => color(i / steps).hex(), steps).map((val, i) => (
        
      ))}
    
  );
};
Document.propTypes = {
  colors: PropTypes.arrayOf(PropTypes.string),
  steps: PropTypes.number,
};
export default () => {
  render(
    ,
    context.document.currentPage(),
  );
};

登入後複製

執行