Figsvelte 项目安装与配置指南

1. 项目基础介绍

Figsvelte 是一个开源项目，旨在帮助开发者使用 Svelte 框架创建 Figma 插件。它提供了一个启动项目模板，包含了构建 Figma 插件所需的所有基础元素，如 TypeScript、CSS、SVG 和图片资源的打包构建，以及开发过程中的自动编译和构建时的代码压缩。

该项目主要使用以下编程语言：

• JavaScript
• Svelte
• TypeScript
• HTML

2. 项目使用的关键技术和框架

• Svelte: Svelte 是一个现代的 JavaScript 框架，用于构建用户界面。与传统的框架不同，Svelte 不在浏览器中编译或虚拟 DOM，而是在构建时执行大部分工作，生成高效的 imperative 的代码，从而运行在浏览器中。
• TypeScript: TypeScript 是 JavaScript 的一个超集，添加了静态类型选项。它可以帮助开发者更好地编写和维护大型的 JavaScript 应用程序。
• Rollup: Rollup 是一个模块打包工具，用于将 ES6 模块打包成可在浏览器中使用的格式。

3. 项目安装和配置的准备工作与详细步骤

准备工作

在开始安装之前，请确保您的系统已经安装以下工具：

• Node.js (推荐使用 LTS 版本)
• npm (Node.js 的包管理器)

安装步骤

1. 克隆项目到本地

   打开命令行工具，执行以下命令来克隆项目：

   npx degit thomas-lowry/figsvelte figma-plugin
   

   这条命令会创建一个名为 figma-plugin 的新目录，并将项目文件复制到该目录下。

2. 安装项目依赖

   切换到新创建的 figma-plugin 目录下，执行以下命令安装项目依赖：

   cd figma-plugin
   npm install
   

   这将安装项目所需的所有 npm 包。

3. 连接插件到 Figma

   打开 Figma desktop app，选择 Plugins > Development > New Plugin，然后选择 Link existing plugin 选项。

   接着，将项目目录中的 manifest.json 文件路径链接到 Figma。该文件位于 public 目录下：

   /figma-plugin/public/manifest.json
   

   你可以编辑这个 manifest.json 文件来设置你的插件名称，以便在 Figma 中调用。

4. 开始开发

   在开发过程中，你可以使用以下命令来监视项目文件的更改：

   npm run dev
   

   然后，你可以在 src/Plugin.svelte 文件中开始构建你的插件用户界面。

5. 构建最终插件

   当你准备好打包你的最终 Figma 插件时，执行以下命令：

   npm run build
   

   这将创建一个用于发布的插件包。

以上就是 Figsvelte 项目的详细安装和配置指南。按照这些步骤，你就可以开始创建自己的 Figma 插件了。