Codex接入Figma完整教程

最新推荐文章于 2026-08-19 13:18:03 发布

原创最新推荐文章于 2026-08-19 13:18:03 发布 · 189 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅

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

二、准备工作

开始前先准备这几样：

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

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

三、创建插件骨架

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

manifest.json
code.js
ui.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"]
  }
}

几个点注意一下：

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

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

五、写一个最小 UI

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

<!doctype html>
<html>
  <body style="font-family: sans-serif; padding: 16px;">
    <div style="margin-bottom: 8px;">API Key</div>
    <input id="apiKey" style="width: 100%; margin-bottom: 12px;" placeholder="sk-xxx" />

    <div style="margin-bottom: 8px;">提示词</div>
    <textarea id="prompt" style="width: 100%; height: 120px; margin-bottom: 12px;">把这个画板里的内容整理成 3 条简短文案</textarea>

    <button id="run" style="width: 100%; height: 36px;">生成并写入画布</button>

    <script>
      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
          }
        }, '*');
      };
    </script>
  </body>
 </html>

六、在 code.js 里发请求

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

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

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}`);
  }
};

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

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

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

1. 域名有没有写进 manifest

Figma 官方支持通过 networkAccess.allowedDomains 限制插件能访问的域名。
如果你的请求目标不在允许列表里，Figma 会直接拦截。

2. 接口有没有跨域

Figma 插件环境是浏览器式的，CORS 规则会起作用。
如果接口没有放行跨域，或者返回头不对，就可能出现请求失败。

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

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

八、一个更实用的玩法

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

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

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

九、给新手的建议

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

先把下面这条链路跑通：

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

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

十、总结

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

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

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

参考资料

Figma 官方文档：Making Network Requests
Figma 官方文档：How Plugins Run
Figma 官方文档：Fetch API

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅

标签

#figma #chatgpt #ui #AI编程 #ai