Codex接入Figma完整步骤操作步骤

Codex接入Figma完整步骤操作步骤并不只看表面做法，关键还要理解相关条件、限制和后续影响。

Codex接入 Figma：做一个能生成文案的 AI 插件

如果你已经在用中转站使用Codex，又想把它接到 Figma 里做设计辅助，其实最稳的方式不是“硬改 Figma 本体”，而是做一个 Figma 插件。

Figma 官方插件文档已经把这条路讲得很清楚了：插件可以发网络请求，使用 Figma 的 Fetch API；同时你还可以在 manifest.json 里限制插件允许访问的域名。对接第三方 OpenAI 兼容接口时，这种方式最直接，也最容易控制权限范围。

这篇我就用一个最小可跑通的例子，演示怎么把 Max-Aiapi 接进 Figma：输入一句提示词，让插件请求接口，再把返回内容写到画布上。

本文示例服务的入口地址是：

https://maxaiapi.com/home

如果你使用其他接口服务，只需要替换为自己的服务地址。

一、先搞清楚接入思路

这个方案本质上分三层：

Figma 插件界面    -> 收集提示词和 API Key    -> 调用 Max-Aiapi 接口    -> 把返回结果写回画布

如果你只是想先跑通流程，先不要做太复杂的 UI。

先完成“发请求 -> 拿结果 -> 写到画布”这条最短路径，后面再慢慢补体验。

二、准备工作

开始前先准备这几样：

1. 一个能正常创建插件的 Figma 账号
2. 一个 Max-Aiapi 的 API Key
3. 你自己的接口地址和模型名称
4. 一个本地开发环境

Figma 插件代码运行在类似浏览器的环境里，插件主线程和 UI iframe 的能力不一样。官方文档说明，插件可以使用 Fetch API 发网络请求；同时，如果你限制了网络访问，需要在 manifest.json 里写明允许访问的域名。插件 iframe 还是 null origin，所以接口最好支持跨域访问。官方参考见文末。

三、创建插件骨架

在 Figma 里新建一个 plugin 项目，准备这几个文件：

manifest.jsoncode.jsui.html

如果你之前没做过插件，可以先把功能做得很简单：一个输入框，一个按钮，一个结果区。

四、先写 manifest.json

manifest.json 负责告诉 Figma 这个插件叫什么、主入口在哪、允许访问哪些域名。

{  "name": "Max-Aiapi Figma Helper",  "id": "YOUR_PLUGIN_ID",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["maxaiapi.com"],    "reasoning": "This plugin sends prompts to the Max-Aiapi OpenAI-compatible API.",    "devAllowedDomains": ["http://localhost:3000"]  }}

几个点注意一下：

1. allowedDomains 里写你的实际接口域名
2. 如果你本地调试，用 devAllowedDomains
3. 如果你的接口不是 maxaiapi.com，就改成你自己的域名

如果这里域名没写对，后面请求时很容易直接被 Figma 拦掉。

五、写一个最小 UI

ui.html 负责收集 API Key 和提示词。

API Key
提示词
把这个画板里的内容整理成 3 条简短文案生成并写入画布          document.getElementById('run').onclick = () => {        const apiKey = document.getElementById('apiKey').value.trim();        const prompt = document.getElementById('prompt').value.trim();        parent.postMessage({          pluginMessage: {            type: 'generate',            apiKey,            prompt          }        }, '*');      };      

六、在 code.js 里发请求

下面是核心部分。思路很简单：

1. 接收 UI 发来的 API Key 和提示词
2. 请求 Max-Aiapi 的 OpenAI 兼容接口
3. 把返回内容写到一个文本节点里

figma.showUI(__html__, { width: 360, height: 320 });figma.ui.onmessage = async (msg) => {  if (msg.type !== 'generate') return;  const { apiKey, prompt } = msg;  if (!apiKey || !prompt) {    figma.notify('请先填写 API Key 和提示词');    return;  }  try {    const response = await fetch('https://maxaiapi.com/v1/chat/completions', {      method: 'POST',      headers: {        'Content-Type': 'application/json',        'Authorization': `Bearer ${apiKey}`      },      body: JSON.stringify({        model: 'gpt-5.6-terra',        messages: [          { role: 'system', content: '你是一个简洁的 Figma 文案助手。' },          { role: 'user', content: prompt }        ]      })    });    const data = await response.json();    const content = data?.choices?.[0]?.message?.content?.trim() || '没有返回内容';    const textNode = figma.createText();    await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });    textNode.characters = content;    textNode.x = 120;    textNode.y = 120;    figma.currentPage.appendChild(textNode);    figma.notify('生成完成');    figma.closePlugin();  } catch (error) {    figma.notify(`请求失败：${error.message}`);  }};

这里有两个地方你后面可以继续调整：

1. model 改成你控制台里实际可用的模型
2. prompt 改成更适合设计场景的提示词，比如文案、标题、按钮文案、页面说明

七、如果接口报错，先查这三件事

1. 域名有没有写进 manifest

Figma 官方支持通过 networkAccess.allowedDomains 限制插件能访问的域名。

如果你的请求目标不在允许列表里，Figma 会直接拦截。

2. 接口有没有跨域

Figma 插件环境是浏览器式的，CORS 规则会起作用。

如果接口没有放行跨域，或者返回头不对，就可能出现请求失败。

3. 接口路径是不是写错了

很多人只改了域名，没改路径。

比如你的服务实际接口不是 /v1/chat/completions，那就要按控制台文档改成真实路径。

八、一个更实用的玩法

如果你不只是想“生成一段文字”，还想让插件更像设计工具，可以继续往这几个方向扩展：

1. 根据选中图层生成标题
2. 根据画板内容生成按钮文案
3. 根据页面结构生成说明文字
4. 根据产品简介生成多版本 A/B 文案

这类需求非常适合第三方 OpenAI 兼容接口，因为调用方式基本都差不多，换模型也很方便。

九、给新手的建议

第一次做这个插件时，别急着追求复杂界面。

先把下面这条链路跑通：

输入提示词 -> 请求接口 -> 拿到结果 -> 显示到画布

只要这条链路通了，后面加选区、加多模型、加模板、加历史记录都只是工程量问题，不是方向问题。

十、总结

把 Max-Aiapi 接到 Figma 里，最稳的方式就是做一个 Figma 插件。

Figma 官方已经提供了网络请求能力和域名限制机制，你只要把插件主流程搭好，就能把自己的 OpenAI 兼容接口接进去，做成一个很实用的设计辅助工具。

对新手来说，这类插件最重要的不是花哨，而是稳定：能请求、能返回、能写回画布，就算跑通了第一步。

参考资料

1. Figma 官方文档：Making Network Requests
2. Figma 官方文档：How Plugins Run
3. Figma 官方文档：Fetch API