Figma AI插件宝塔面板部署开源版含卸载清理教程

适用场景与部署思路

Figma AI类插件通常由两部分组成：一部分运行在Figma客户端中，负责读取画布、接收提示词、展示生成结果；另一部分是后端服务，负责转发大模型请求、保存必要配置、处理鉴权与日志。开源方案的优势在于可控性更强，团队可以把密钥留在自有服务端，按需更换模型接口，避免把敏感配置直接写进插件前端。

使用宝塔面板部署时，核心目标不是“把插件装到服务器上”，而是把插件依赖的AI接口服务部署好，再在Figma开发者模式中导入插件清单文件，让插件调用自建后端。该方案适合设计团队、产品团队、独立开发者进行原型文案生成、组件命名、设计说明整理、多语言文案草拟等工作。若涉及公司内部项目，应先确认数据使用规范，只向模型发送必要内容。

部署前准备

建议准备一台已安装宝塔面板的云主机，系统可选Ubuntu或Debian等常见发行版。宝塔中需要安装Nginx、Node.js版本管理器、PM2管理器，也可视项目需要安装Redis或数据库。多数轻量级Figma AI开源后端只需要Node.js即可运行。

还需要准备一个已解析到服务器的域名，例如ai.example.com，并在宝塔面板中申请HTTPS证书。Figma插件运行环境通常要求安全连接，若后端只提供HTTP地址，浏览器或客户端可能拦截请求。另需准备AI服务商提供的接口密钥、接口地址和模型名称，密钥只应写入服务器环境变量，不要放进插件代码或公开仓库。

获取开源项目并上传代码

在宝塔面板中进入“文件”，建议在/www/wwwroot/下新建项目目录，例如figma-ai-server。可以通过面板终端执行git clone拉取代码，也可以在本地下载后压缩上传再解压。上传后先查看项目结构，常见目录包括server、src、public、package.json、.env.example等。

如果项目分为插件端和服务端两个目录，应优先部署服务端目录。插件端通常包含manifest.json、ui.html、code.js等文件，用于Figma开发模式导入。不要急于修改核心代码，先复制.env.example为.env，再按项目说明填写必要配置。

安装依赖与配置环境变量

进入宝塔终端，切换到服务端目录，执行npm install或pnpm install安装依赖。若项目说明指定Node.js版本，应在宝塔Node管理中切换到对应版本，常见为18或20。依赖安装失败时，先检查Node版本、磁盘空间和package-lock文件，不建议随意删除源码中的关键配置。

.env文件一般包含PORT、AI_API_KEY、AI_BASE_URL、AI_MODEL、ALLOWED_ORIGINS等字段。PORT可设置为3000或其他未占用端口；AI_API_KEY填写服务端密钥；AI_BASE_URL填写模型接口地址；AI_MODEL填写计划使用的模型名称；ALLOWED_ORIGINS建议限制为Figma插件允许的来源或你的域名，不要简单设置为全部放行。若项目支持ADMIN_TOKEN，也应设置为高强度随机字符串，用于后台调试或管理接口。

使用PM2启动后端服务

依赖安装完成后，先在终端执行npm run start或npm run dev进行测试，看到服务监听端口且无报错后，再用PM2托管。宝塔面板中打开PM2管理器，添加Node项目，选择项目目录、启动文件或启动命令，并填写运行端口。保存后查看进程状态和日志，确认没有密钥缺失、模块找不到、端口占用等错误。

生产使用不建议长期运行dev命令。若项目提供build脚本，可先执行npm run build，再用npm run start启动构建后的服务。这样稳定性更好，也能减少开发热更新带来的资源占用。

配置站点与反向袋里

在宝塔中新建站点，域名填写前面准备好的ai.example.com。站点创建后进入“反向袋里”，目标地址填写http://127.0.0.1:3000，其中端口按你的服务实际端口修改。开启袋里后访问https://ai.example.com/health或项目提供的检测接口，若返回ok、success或版本信息，说明后端已基本可用。

接着为站点申请并开启HTTPS证书，建议同时开启强制HTTPS。若请求接口时出现跨域错误，应检查后端CORS配置和反向袋里请求头。不要为了省事直接开放所有来源，尤其是团队共享密钥时，应尽量限制访问范围并增加简单鉴权。

配置Figma插件端

打开Figma桌面端，进入插件开发相关入口，选择从manifest.json导入插件。manifest文件通常位于开源项目的plugin目录。导入后先不要发布到公共市场，只在开发模式中测试。找到插件端配置文件，把后端API地址改为你的HTTPS域名，例如https://ai.example.com/api。

如果插件支持在界面里填写服务地址和访问令牌，可优先使用界面配置，便于后续更换。若必须修改源码，修改后需重新构建插件端，确保manifest指向正确的入口文件。测试时可选中一个文本图层，让插件生成改写建议，或选中一组组件，让插件生成命名与说明，观察后端日志是否有请求记录。

联调验证与使用建议

首次联调建议从最小输入开始，例如让插件生成一段按钮文案，而不是直接发送整页设计说明。这样更容易判断问题来自插件端、后端服务还是模型接口。确认链路可用后，再测试多图层选择、批量文本优化、设计规范总结等复杂功能。

实际使用中，应把AI结果视为草稿。设计命名、文案语气、品牌表达仍需要人工复核。对于客户资料、未公开产品方案、用户信息等内容，建议先做脱敏处理，再提交给模型。团队多人使用时，可以按项目设置访问令牌，并定期轮换密钥，避免离职成员继续调用服务。

常见问题排查

如果插件提示无法连接服务，先在浏览器打开后端检测地址，确认域名和HTTPS是否正常；再查看宝塔PM2日志，排查服务是否退出。若浏览器可访问但插件不可用，多半是跨域、接口路径或证书链问题。

如果接口返回401或403，通常是密钥、访问令牌或鉴权头配置不一致。检查插件端是否携带正确Token，后端.env是否重启后生效。修改.env后必须重启PM2进程，否则新配置不会加载。

如果生成速度很慢，可查看模型接口响应时间、服务器带宽和并发设置。不要盲目增加并发，设计插件多为交互式使用，稳定响应比高并发更重要。若出现输出为空、格式错乱，可降低提示词复杂度，或在后端增加固定系统提示，约束返回格式。

如果npm install失败，优先切换Node版本，清理node_modules后重新安装。不要随意修改package.json中的核心依赖版本，除非确认与项目兼容。若端口占用，可在宝塔安全设置和PM2中统一调整端口，避免多个项目冲突。

安全边界与维护要点

密钥必须保存在服务端环境变量中，插件前端只调用你的后端，不直接暴露AI服务商密钥。后端日志不要完整记录用户输入，至少应关闭敏感内容日志或只保留错误摘要。若项目提供请求记录功能，应设置保留周期，避免长期积累无关数据。

开源项目更新前，先备份.env、插件端配置和自定义代码。建议在测试目录先运行新版本，确认接口路径、返回格式和依赖版本没有破坏现有流程，再切换生产站点。对外提供给团队使用时，应准备简单的使用规范，例如哪些内容可以提交、哪些内容必须脱敏、生成结果如何复核。

卸载与清理步骤

不再使用时，应先在Figma中移除开发插件，或删除本地导入的manifest记录，避免成员继续误用旧入口。随后登录宝塔面板，在PM2管理器中停止并删除对应Node进程，确认端口不再监听。

接着进入站点管理，删除反向袋里配置；若该域名只用于此服务，可删除站点和HTTPS证书。再到文件管理中删除/www/wwwroot/figma-ai-server目录，清理源码、构建产物和.env文件。若项目使用了Redis或数据库，也要删除对应库表或缓存键。

最后到AI服务商控制台废弃原密钥，重新生成其他业务所需密钥，避免旧配置被误调用。检查宝塔计划任务、日志目录和备份目录，删除包含项目路径或密钥片段的旧文件。完成这些步骤后，部署痕迹基本清理完毕。

结语

Figma AI开源插件的部署关键在于把“插件界面”和“AI后端”分清楚：前者负责设计工具内交互，后者负责安全调用模型。使用宝塔面板可以降低Node服务部署门槛，但配置HTTPS、环境变量、跨域和访问控制仍不可省略。按步骤完成部署、联调、权限限制和卸载清理，才能让AI能力真正融入设计流程，同时保持可控、可维护和可回退。