使用React-Sketchapp构建Sketch插件入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01063/article/details/148377632

使用React-Sketchapp构建Sketch插件入门指南

react-sketchapp render React components to Sketch ⚛️💎 项目地址: https://gitcode.com/gh_mirrors/rea/react-sketchapp

前言

React-Sketchapp是一个革命性的工具，它允许开发者使用React语法直接在Sketch中创建UI组件和设计系统。本文将详细介绍如何从零开始搭建React-Sketchapp开发环境并创建第一个项目。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

操作系统：必须是macOS系统，因为Sketch仅支持macOS平台
Node.js环境：
- 推荐使用nvm(Node Version Manager)管理Node版本
- 需要安装npm(Node包管理器)
Sketch应用：最新版本的Sketch设计工具
开发工具：
- 终端工具(iTerm2等)
- 代码编辑器(VSCode、Atom等)
- Git版本控制系统

项目创建方式

React-Sketchapp项目可以通过以下三种方式创建：

使用skpm脚手架（推荐新手使用）
克隆现有示例项目
手动配置项目（适合有经验的开发者）

使用skpm创建项目

安装skpm

首先全局安装skpm(Sketch插件管理器)：

npm install --global skpm

初始化项目

使用以下命令创建新项目：

skpm create my-sketch-plugin --template=airbnb/react-sketchapp
cd my-sketch-plugin

这里my-sketch-plugin是你的项目名称，可以按需修改。

项目结构解析

创建完成后，项目目录结构如下：

src/
  ├── manifest.json    # 插件配置文件
  └── my-command.js    # 插件入口文件

配置文件调整

修改manifest.json

manifest.json是Sketch插件的核心配置文件，建议做以下调整：

修改命令名称和标识符
更新脚本文件路径（如果重命名了入口文件）
设置菜单显示方式

示例修改：

{
  "commands": [
    {
      "name": "我的设计系统",
      "identifier": "main",
      "script": "./main.js"
    }
  ],
  "menu": {
    "isRoot": true,
    "items": ["main"]
  }
}

开发与渲染

编写React组件

在入口文件中，你可以像开发普通React应用一样编写组件：

import React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

const App = () => (
  <Artboard>
    <Text>Hello Sketch!</Text>
  </Artboard>
);

export default function() {
  render(<App />, context.document.currentPage());
}