Scripter Figma 插件项目教程

滕娴殉

于 2024-09-25 08:00:32 发布

阅读量818

点赞数 21

本文链接：https://blog.csdn.net/gitblog_00992/article/details/142508046

版权

Scripter Figma 插件项目教程

scripter The Scripter Figma plugin 项目地址: https://gitcode.com/gh_mirrors/sc/scripter

1. 项目目录结构及介绍

Scripter 是一个 Figma 插件项目，其目录结构如下：

scripter/
├── docs/
├── misc/
│   ├── dev.sh
│   ├── serve.js
│   ├── build-plugin.sh
│   ├── build-app.sh
├── src/
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
└── package.json

目录结构介绍

docs/: 存放项目的文档和构建后的应用文件。
misc/: 包含开发和构建脚本，如 dev.sh 用于启动本地开发服务器，serve.js 用于服务当前的“release”构建，build-plugin.sh 和 build-app.sh 分别用于构建 Figma 插件和应用。
src/: 存放项目的源代码。
.gitignore: Git 忽略文件列表。
LICENSE: 项目的开源许可证文件。
README.md: 项目的介绍和使用说明。
package-lock.json: 锁定项目依赖的版本。
package.json: 项目的配置文件，包含依赖和脚本等信息。

2. 项目的启动文件介绍

Scripter 项目的启动文件主要集中在 misc/ 目录下：

dev.sh: 用于启动本地开发服务器，方便开发者在本地进行调试和测试。
serve.js: 用于服务当前的“release”构建，通常用于在本地预览构建后的应用。
build-plugin.sh: 用于构建 Figma 插件，生成发布版本的插件文件。
build-app.sh: 用于构建应用，生成发布版本的应用文件。

3. 项目的配置文件介绍

Scripter 项目的主要配置文件是 package.json，它包含了项目的依赖、脚本和其他配置信息。

package.json 配置文件介绍

{
  "name": "scripter",
  "version": "1.0.0",
  "description": "A Figma plugin that runs scripts directly in Figma",
  "main": "src/index.js",
  "scripts": {
    "start": "./misc/dev.sh",
    "build": "./misc/build-plugin.sh",
    "serve": "node ./misc/serve.js"
  },
  "dependencies": {
    "figma": "^1.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "prettier": "^2.0.0"
  }
}