乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > 06 Figma 插件如何接入 AI 模型:从在线 API 到本地 Ollama,我踩过的一个大坑

06 Figma 插件如何接入 AI 模型:从在线 API 到本地 Ollama,我踩过的一个大坑

当前时间： 2026-08-11 08:04:31 分类：办公文件 评论(0)
06 Figma 插件如何接入 AI 模型:从在线 API 到本地 Ollama,我踩过的一个大坑
前几篇文章里，我聊了自己为什么开始 Vibe Coding，也聊了第一次搭 Figma 插件开发环境、怎么把需求拆给 AI，以及为什么 Figma 插件和普通小工具的差别。
如今，我想继续拆一个更具体的问题：怎么让 Figma 插件真正接入 AI 模型？
对我的「灵犀表格 / Tablesense」Figma插件来说，AI 最重要的作用就是根据表头生成更真实的表格数据。
比如我输入：
“任务名称、负责人、状态、截止时间”
插件就可以让 AI 生成几行更像真实业务里的表格内容，而不是一堆假得不能再假的占位文案。
一开始我以为，这件事应该不难。
无非就是在插件里填一个接口地址、一个 API Key、一个模型名，然后点击生成吗？
但真正做的时候我才发现：
如果接的是在线模型，确实还算直观；
但如果接的是本地 Ollama 模型，就不是“填个地址”这么简单了。
尤其是 OLLAMA_ORIGINS 这个环境变量配置，我当时被卡了很久。
网上能搜到的教程只有Ollama的使用和安装，但是在Figma中无法使用的问题，搜不到答案。
我当时甚至还去找别人做的、支持本地 Ollama 的 Figma 插件来参考，结果下载下来也没法直接用。
所以这篇文章，我想把这块单独讲清楚，让想做接本地大模型Figma插件的人，有个参考。
如果你也想在 Figma 插件里接入 AI 模型，尤其是想接入自己电脑上用 Ollama 跑的本地模型，希望这篇能帮你少走一点弯路。

01 先说清楚：Figma 插件接入 AI，本质上是在“发起一次模型请求”

我们先不要把事情想复杂。
Figma 插件里的 AI 功能，本质上通常就是一条请求链路：
用户在插件 UI 里输入内容
↓
插件把这些内容整理成 prompt
↓
插件请求某个 AI 模型接口
↓
AI 返回结果
↓
插件把结果填回 Figma 画布里
以「灵犀表格」为例。
用户在插件里输入表头，比如：
任务名称、负责人、状态、截止时间
然后选择生成 5 行数据。
插件要做的事情，就是把这些信息整理成一段模型能理解的请求，比如：
“请根据以下表头生成 5 行真实的 B 端任务管理表格数据……”
然后把这个请求发给 AI 模型。
AI 返回类似这样的内容：
[
{
"任务名称": "完成首页数据看板优化",
"负责人": "张明",
"状态": "进行中",
"截止时间": "2026-06-28"
},
{
"任务名称": "整理客户反馈问题清单",
"负责人": "李娜",
"状态": "待处理",
"截止时间": "2026-07-02"
}
]
最后，插件再把这些内容填入 Figma 组件实例里。
所以你可以先记住一句话：
AI 不是直接住在 Figma 插件里。插件只是负责把请求发出去，再把结果拿回来。
这件事想明白以后，后面的配置就更容易理解了。

02 在线模型怎么接入：通常要配置哪些字段？

如果你接入的是在线模型，比如 OpenAI、DeepSeek、智谱 GLM，或者其他兼容 OpenAI 接口格式的模型服务，一般会看到几个常见配置项。
这些字段看起来像技术配置，但其实都很好理解。
Provider：模型服务商
Provider 就是告诉插件：
你准备用哪一家模型服务。
比如：
OpenAI
DeepSeek
GLM
Claude
自定义 OpenAI 兼容接口
如果插件做得比较灵活，就可以支持不同 Provider。
但从插件内部逻辑看，本质上还是根据不同服务商，拼出不同的请求地址、请求头和请求参数。
Base URL：接口地址
Base URL 是模型服务的接口地址。
它的作用是告诉插件：
请求要发到哪里。
比如：
https://api.openai.com/v1
https://api.deepseek.com
https://open.bigmodel.cn/api/paas/v4
不同平台的 API 地址不一样，不要随便照抄别人的。
很多时候你模型调不通，不一定是代码写错了，而是 Base URL 填错了，或者多写、少写了某一段路径。
API Key：访问钥匙
API Key 可以理解成你访问在线模型服务的“钥匙”。
在线模型通常部署在公网服务器上。服务商需要知道：
你是谁；
你有没有权限调用；
调用了多少 token；
费用应该算到哪个账号上。
所以在线模型一般都需要 API Key。
如果 API Key 填错了，常见结果就是鉴权失败，比如返回 401、403 之类的错误。
Model ID：模型名称
Model ID 是你实际要调用的模型。
比如：
gpt-4o
deepseek-chat
glm-4.5
claude-sonnet-4
这个字段一定要和模型服务商文档里的名称一致。
写错一个字符，都可能导致请求失败。要注意模型名称和实际使用的模型ID的区别。
我刚开始做 AI 接入时，也犯过这种错误：输入的模型名称和实际模型不匹配，比如模型ID上带有日期的，如doubao-1-5-lite-32k-250115，如果你输入Doubao-1.5-lite这种名称就可能会报错。
后来我慢慢养成习惯：模型名一定从官方文档里复制，或者直接做一个请求模型列表的功能，通过选择器选择。
Temperature：生成随机性
这是个高阶配置，一般可以不配置，尤其是Figma插件中仅用来生成看起来比较真的填充内容时。
如果插件里开放了 temperature 配置，可以简单理解为：
temperature 越低，结果越稳定；
temperature 越高，结果越发散。
对于表格数据生成这种功能，我一般不建议设置太高。
因为我们希望 AI 生成的内容稳定、规整、容易解析，而不是每次都自由发挥。
尤其是插件后面还要把 AI 返回的数据解析成结构化内容，如果模型输出太飘，反而容易导致解析失败。
Max Tokens：最大输出长度
这也是个高阶配置，一般不用配置。
Max Tokens 控制模型最多输出多少内容。
表格行数越多，字段越多，需要的输出长度就越大。
但对插件来说，也不能无限制输出。
因为输出太长会带来几个问题：
等待时间更久；
消耗更多 token；
返回内容更容易超出预期；
解析成本也更高。
所以在做插件时，最好根据真实场景控制范围。
比如只是生成 5 行、10 行表格数据，就不需要给特别大的输出长度。
简单总结一下：
在线模型接入的重点，是把请求地址、鉴权信息、模型名称配置正确。
如果这三个核心字段没问题，大部分在线模型调用就已经跑通一半了。
但 Figma 插件不是普通网页。
这就引出了下一个问题。

03 Figma 插件不是普通网页：manifest 也要允许网络访问

很多人第一次做 Figma 插件时，容易忽略一个点：
即使你插件里的 Base URL、API Key、Model ID 都填对了，Figma 插件也不一定能直接请求成功。
因为 Figma 插件运行在 Figma 的插件环境里，不是普通网页。
如果插件需要访问外部网络，通常需要在 manifest.json 中配置网络访问权限。
比如你要请求 OpenAI，可以类似这样配置：
{
"networkAccess": {
"allowedDomains": ["https://api.openai.com"],
"reasoning": "用于调用 AI 模型生成表格数据"
}
}
如果你在开发阶段要请求本地 Ollama，则可能需要这样配置：
{
"networkAccess": {
"devAllowedDomains": ["http://localhost:11434"]
}
}
这里简单解释一下：
allowedDomains 是正式环境允许访问的域名；devAllowedDomains 是开发阶段允许访问的域名；reasoning 是说明为什么插件需要访问这些网络地址。
早期开发调试时，可以直接把域名放得很宽，甚至写成 "*"，这样确实方便排查问题。
但如果后续要发布插件，更稳妥的方式，是只保留你真实需要访问的接口域名。
这一节你只需要先记住一个关键点：
插件里填了API地址，不代表 Figma 就一定允许你访问。Figma 自己也有一层网络访问权限。
这也是我在前一篇文章里反复强调的：
Figma 插件不是普通小软件。
它活在 Figma 的规则里。

04 本地 Ollama 和在线模型最大的区别：它不是公网 API，而是你电脑上的本地服务

讲完在线模型，我们再来看本地 Ollama。
在线模型通常是这样的：
https://某个模型服务商的 API 地址
这些服务部署在公网服务器上。
服务商已经帮你处理好了很多事情：
鉴权；跨域；模型路由；请求格式；服务稳定性。
你只需要按照文档填好 API 地址、API Key 和模型名称，大多数时候就能开始请求。
但 Ollama 不一样。Ollama 是运行在你自己电脑上的本地模型服务。
它默认的 API 地址通常是：
http://localhost:11434
这意味着什么？
这意味着：Figma 插件要调用 Ollama，本质上是让运行在 Figma 插件环境里的程序，请求你电脑本机上的一个本地服务。
这时候问题就变多了：
Figma 插件能不能访问 localhost:11434？
manifest 里有没有允许这个地址？
Ollama 是否允许来自这个插件环境的请求？
浏览器 / iframe 的跨域策略会不会拦截？
所以，在线模型和本地模型的差别不是“地址不同”这么简单。
更准确地说：
在线模型主要是服务商API配置问题；本地 Ollama 则多了一层本机服务和跨域访问的问题。
我当时就是卡在这层问题上。
插件里的 URL 看起来没错，模型名也没错，Ollama 本地也能运行，但 Figma 插件里就是请求失败。
这时候如果只盯着插件代码改，很容易越改越乱。

05 接入本地 Ollama，需要同时处理两类配置

接入本地 Ollama，至少要处理两类配置。
这两类配置属于不同对象，不要混在一起。
第一类：Figma 插件自己的网络访问配置
如果插件要请求本地 Ollama，需要在 manifest.json 中允许访问本地 Ollama 地址。
可以像下方这样直接写Ollama的本地地址，或者更简单粗暴的用“*”：
{
"networkAccess": {
"devAllowedDomains": ["http://localhost:11434"]
}
}
这一步是在告诉 Figma：
我的插件开发过程中，需要访问这个本地地址。
如果没有这层配置，Figma 插件可能根本不允许你的请求发出去。
第二类：Ollama 自己的跨域配置
这是很多人最容易忽略的地方。
Figma 插件运行在浏览器 / iframe 环境中，请求本地 Ollama 时，可能会被跨域策略拦截。
所以除了 Figma 插件 manifest 允许访问本地地址以外，还需要告诉 Ollama：
允许这个插件环境来访问我。
这个配置就是：
OLLAMA_ORIGINS=*
这里一定要注意：
OLLAMA_ORIGINS 不是写在 Figma 插件里的。 它也不是填在插件设置面板里的。 它是配置给 Ollama 服务本身的环境变量。
插件里填写的 URL 和模型名，是告诉插件：我要请求哪个地址；我要使用哪个模型。
而 OLLAMA_ORIGINS="*" 是告诉 Ollama：允许其他来源访问我。
这就是我当时卡很久的地方。
我一开始以为问题在插件代码里、模型名称里、接口格式里，于是反复让 AI 帮我检查请求逻辑。
后来才发现，真正缺的是 Ollama 这边的跨域环境变量配置。
这类问题特别折磨，因为它看起来不像“代码错误”。
代码可能是对的，接口地址也可能是对的，本地模型也确实在运行。
但因为跨域配置没打开，Figma 插件就是访问不到。

06 本地 Ollama 配置界面里，API Key 可以留空

这里还有一个小细节。
如果你的插件把在线模型和本地模型放在同一个配置界面里，通常会有这些字段：
Provider
Base URL
API Key
Model ID
对于在线模型，这些字段都很正常。
但本地 Ollama 默认不需要 API Key。
所以如果选择 Ollama，一般可以这样填：
Provider：Ollama
Base URL：http://localhost:11434
API Key：留空
Model ID：本地模型名称，例如 qwen3:8b
这里最容易出错的是模型名称。
Ollama 本地模型名必须和你本机真实存在的模型名一致。
比如你本地拉取的是：
qwen3:8b
那插件里就不要写成：
qwen3
qwen-3-8b
Qwen3:8B
大小写、冒号、版本号都要尽量保持一致。
如果你不确定本机有哪些模型，可以在终端里执行：
ollama list
或者请求：
curl http://localhost:11434/api/tags
看看返回的模型名称是什么。

07 macOS 如何配置 OLLAMA_ORIGINS？

如果你使用的是 macOS 版 Ollama App，我更推荐用下面这种方式配置。
打开“终端”，输入：
launchctl setenv OLLAMA_ORIGINS "*"
然后执行下面几步：
退出 Ollama App；
重新打开 Ollama App；
回到 Figma 插件中重新测试连接。
这里有一个很重要的误区。
很多教程会写：
export OLLAMA_ORIGINS="*"
这条命令不是完全没用，但它更像是当前终端会话里的临时配置。
如果 Ollama 是通过 macOS App 在后台运行的，你单纯在终端里执行 export，不一定会影响已经运行的 Ollama 服务。
也就是说，你以为自己配置了，实际上 Ollama App 可能根本没吃到这个环境变量。
所以面向普通用户，尤其是直接使用 macOS 版 Ollama App 的用户，我更建议使用：
launchctl setenv OLLAMA_ORIGINS "*"
然后一定要重启 Ollama。
这一步非常关键。
因为环境变量配置后，如果 Ollama 没有重新启动，它可能仍然使用旧的运行环境。

08 Windows 如何配置 OLLAMA_ORIGINS？

Windows 上建议通过系统环境变量配置。
操作步骤如下。
第一步，先退出 Ollama。
在任务栏右下角找到 Ollama 图标，右键退出。
第二步，打开环境变量设置。
如果你使用的是 Windows 11，可以打开“设置”，搜索“环境变量”。
如果你使用的是 Windows 10，可以打开“控制面板”，搜索“环境变量”。
第三步，点击“编辑账户的环境变量”。
这里建议添加到“用户变量”中，一般不需要添加到系统变量。
第四步，新建变量。
变量名填写：
OLLAMA_ORIGINS
变量值填写：
*
第五步，点击“确定”或“应用”保存。
第六步，重新启动 Ollama。
从开始菜单重新打开 Ollama。
配置完成后，再回到 Figma 插件里测试本地模型连接。
这里也要提醒一下：
Windows 的环境变量里不要写：
export OLLAMA_ORIGINS="*"
export 是终端命令的一部分，不是 Windows 环境变量的变量名。
你只需要填：
变量名：OLLAMA_ORIGINS
变量值：*
就可以了。

09 如何判断 Ollama 配置是否生效？

配置完以后，不要急着继续让 AI 改代码。
先做几个基础检查。
确认 Ollama 本地服务是否正常运行
在浏览器里打开：
http://localhost:11434
如果看到类似：
Ollama is running
说明 Ollama 服务已经启动
确认本地模型列表是否能访问
在终端中执行：
curl http://localhost:11434/api/tags
如果能返回本地模型列表，说明 Ollama API 可以访问。
如果 Ollama 能访问，但 Figma 插件不能用
这时候重点排查下面几个地方：
manifest.json 是否允许访问 http://localhost:11434；OLLAMA_ORIGINS 是否已经配置； 配置后是否已经重启 Ollama； 插件中填写的模型名是否和本地 Ollama 模型名一致； 插件请求的接口路径是否写对； Figma 插件是否重新加载； 控制台里是否出现 CORS、Failed to fetch、Network error 之类的错误。
如果浏览器能打开 localhost:11434，终端也能请求模型列表，但 Figma 插件里依然失败，那就尤其要关注：
manifest网络权限和Ollama 跨域配置这两个地方。
很多时候，问题不在模型，也不在 prompt，而是在请求根本没有顺利完成。

10 关于 OLLAMA_ORIGINS="*" 是否安全？

这里也需要补充一个安全说明。
OLLAMA_ORIGINS=* 的意思是允许所有来源访问 Ollama。
它适合个人本地开发和测试使用。
但它并不等于把 Ollama 直接暴露到公网。
默认情况下，Ollama 主要运行在本机的：
localhost:11434
也就是供自己电脑上的程序访问。
它的主要风险是：
如果你打开了恶意网页，对方可能尝试调用你电脑上的 Ollama 服务，消耗你的本机计算资源。
所以我的建议是：
个人本地开发，可以使用； 公司安全敏感环境，谨慎使用； 公共电脑，不建议使用； 如果你已经把 Ollama 暴露到局域网或公网，不要随便使用 *； 如果只是本机 Figma 插件调用本机 Ollama，重点配置 OLLAMA_ORIGINS 即可。
有些人可能会想：
那我能不能不要写 *，改成 https://www.figma.com？
理论上，限制具体来源当然更安全。
但在 Figma 插件场景里，情况会复杂一些。
因为 Figma 插件运行在特殊的 iframe 环境中，实际请求来源可能并不是你直觉里想的那个普通网页域名。
如果你写成某个具体域名，反而可能继续遇到 CORS 报错。
所以对普通个人开发者来说，我的建议是：
本机开发测试时，可以先用：
OLLAMA_ORIGINS=*
但不要再额外引导配置：
OLLAMA_HOST=0.0.0.0:11434
因为 OLLAMA_HOST=0.0.0.0:11434 会让 Ollama 监听范围变大，容易带来额外风险。
如果你的需求只是让自己电脑上的 Figma 插件访问自己电脑上的 Ollama，通常不需要这么做。

11 我当时为什么会被这个问题卡住？

现在回头看，这个问题其实不复杂。
但当时真的很折磨。
因为我一开始完全没意识到，Figma 插件接入本地 Ollama 不是一个单点配置问题，而是三层关系叠在一起。
第一层，是插件自己的配置。
你要告诉插件：
请求哪个地址；
使用哪个模型；
API Key 要不要填。
第二层，是 Figma 的权限配置。
你要让 Figma 允许插件访问这个网络地址。
也就是 manifest.json 里的网络访问配置。
第三层，是 Ollama 的跨域配置。
你要让 Ollama 允许来自插件环境的请求。
也就是 OLLAMA_ORIGINS。
只配置第一层，不行。
只配置第一层和第二层，可能还是不行。
因为 Ollama 那边如果没有允许这个来源访问，插件依然会失败。
我当时一直以为问题在插件代码里，所以反复让 AI 帮我检查：
请求地址是不是错了；
模型名是不是错了；
接口格式是不是错了；
manifest 是不是没配；
代码是不是没有编译；
插件是不是没有重新加载。
这些当然都值得排查。
但真正的问题是：
Figma 插件能发请求，不代表 Ollama 就愿意接受这个来源的请求。
这也是这篇文章最想分享的经验。
本地模型不是不能接。
只是你要同时理解 Figma 插件和 Ollama 两边的限制。

12 写在最后：AI 接入不是填几个字段，而是理解请求链路

做完这一步以后，我对 Figma 插件的理解又深了一层。
以前我以为接入 AI 模型就是填几个配置项：
API 地址；
API Key；
模型名称。
后来才发现，真正要理解的是完整链路：
插件 UI 从哪里拿用户输入；
主逻辑如何组织 prompt；
请求发到哪个模型服务；
Figma 是否允许这个请求；
模型服务是否允许这个来源访问；
返回结果能不能被稳定解析；
解析后能不能正确填回组件实例。
在线模型帮我们处理了很多底层问题，所以看起来简单。
本地 Ollama 更自由、更私密，也不需要 API Key，但它要求我们多理解一点本地服务、跨域和环境变量。
这件事一开始很折磨我。
但回头看，它也让我真正意识到：
AI 编程不是完全不用理解技术。而是你可以先做起来，再在一个个真实问题里补上理解。
我不是程序员，也不是想把这些内容写成很硬核的开发教程。
我只是把自己真实踩过的坑整理出来。
如果你也在做 Figma 插件，或者也想把自己的插件接入本地模型，希望这篇文章能帮你少走一点弯路。
我是天宇，一名持续探索 AI 的 UX 设计师。
未来我会继续分享 AI 时代的 UX 设计师如何拥抱变化。
如果你也对这些话题感兴趣，欢迎关注。
未来的探索之路，我们结伴同行。