网站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > Ai >

收藏
分享到

Codex接入Figma的全部教程

Ai 来源：互联网 作者：佚名 发布时间：2026-08-16 07:22:02 人浏览
摘要

Codex接入 Figma：做一个能生成文案的 AI 插件 如果你已经在用中转站使用Codex，又想把它接到 Figma 里做设计辅助，其实最稳的方式不是硬改 Figma 本体，而是做一个 Figma 插件。 Figma 官方插件文档

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

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

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

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

1

https://maxaiapi.com/home

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

一、先搞清楚接入思路

这个方案本质上分三层：

1

2

3

4

Figma 插件界面

    -> 收集提示词和 API Key

    -> 调用 Max-Aiapi 接口

    -> 把返回结果写回画布

如果你只是想先跑通流程，先不要做太复杂的 UI。
先完成“发请求 -> 拿结果 -> 写到画布”这条最短路径，后面再慢慢补体验。

二、准备工作

开始前先准备这几样：

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

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

三、创建插件骨架

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

1

2

3

manifest.json

code.js

ui.html

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

四、先写 manifest.json

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

1

2

3

4

5

6

7

8

9

10

11

12

{

  "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 和提示词。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!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 里发请求

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

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 兼容接口，因为调用方式基本都差不多，换模型也很方便。

九、给新手的建议

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

先把下面这条链路跑通：

1

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

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

十、总结

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

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

对新手来说，这类插件最重要的不是花哨，而是稳定：能请求、能返回、能写回画布，就算跑通了第一步。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计