Figma 连接
Figma Connect 可让您将设计从 Figma 引入 PhpStorm，并将其用作 Air 的上下文。 在 Figma Desktop 中选择任意图层 — 框架、组件或组，从 Air Chat 引用它，或将引用复制到在 终端 中运行的代理 — 无需在设计和 PhpStorm 之间来回切换。
还支持 自带密钥 (BYOK) 方法，因此您可以使用自己的 API 密钥来使用兼容 AI 提供商的模型。
PhpStorm 通过适用于 Figma 的 JetBrains Connect 插件连接到 Figma Desktop ，该插件会将当前选择实时流式传输到 Figma 图层 工具窗口。
开始之前
请确保拥有付费 Figma 席位，并具有 Dev Mode 或 完整设计 访问权限。 Figma Connect 依赖于 Figma Desktop MCP 服务器 ，该服务器无法在 View、Collab 或 Starter 席位上启用。
可选：
安装 Figma Desktop 应用程序并打开要处理的设计文件。
确保已按照 插件 中的说明，在 设置 | 插件 页面中启用 Air 捆绑插件。
您还可以使用 自带 API 密钥 (BYOK) 方法。 为此，请按 Ctrl+Alt+S 打开 设置 对话框，转到 ，然后指定提供商的 API 计费账户。
有关详细信息，请参阅 连接 AI 提供商。
在 PhpStorm 中设置 Figma Connect
PhpStorm 提供 Figma Connect 设置向导，指导您完成设置过程，包括安装 AI Assistant 插件和 Figma Desktop 应用程序，在 Figma 中安装 JetBrains Connect 插件，以及将 Figma Desktop 应用程序连接到 PhpStorm。
打开 Figma 图层 工具窗口 ( )，然后点击 设置。
按照屏幕上的说明设置 Figma Connect。
在向导的 获取 Figma Desktop 应用 页面上，点击 我已安装该应用 （如果已安装 Figma Desktop 应用程序），然后点击 下一个。 否则，点击 下载。
PhpStorm 会打开 Figma 下载页面。 下载并安装 Figma Desktop 应用程序。 点击 下一个 即可。
请在 在 Figma 桌面版中运行 JetBrains Connect 插件 页面上点击 打开 JetBrains Connect。
在 JetBrains Connect 页面上，点击 打开 并选择要在其中打开插件的设计文件。
在右侧的 插件 窗格中，点击 运行。
在 插件 窗格中，点击 连接。
之后，插件会等待 PhpStorm 批准以建立连接。
请在 在 Figma 桌面版中运行 JetBrains Connect 插件 页面上点击 下一个。
在向导的 允许传入连接 页面上，点击 允许 ，然后点击 下一个。
设置完成后，工具窗口的状态会更改为 已连接。
PhpStorm 会记住批准，因此以后会自动接受连接。 要再次要求批准，请在工具窗口 设置中使用 撤销所有配对的会话 (点击工具栏上的
，选择 ，然后选择 )。
配置使用 Air 从 Figma 设计进行代码生成
完成 Figma Connect 设置向导后，PhpStorm 会建议设置 Figma Connect 与 JetBrains Air 之间的交互。
在 Figma 图层 工具窗口中，点击通知工具提示中的 设置 以启动向导
如果 Air 插件已禁用，请在 使用 Air 从您的 Figma 设计生成代码 页面上点击 启用 Air。
PhpStorm 会安装 JetBrains Air 插件、重启，并让您返回 使用 Air 从您的 Figma 设计生成代码 页面。 点击 设置。
按照 在 Figma Desktop 中启用 MCP 服务器 页面上的说明操作。
在 Figma Desktop 应用程序中，切换到 开发模式。
启用 MCP 服务器。
请在 在 Figma Desktop 中启用 MCP 服务器 页面上点击 验证连接。
PhpStorm 会检查 MCP 服务器是否正在运行，以及 Figma Desktop 应用程序是否已连接到该服务器。 向导会关闭，您会返回到 Figma 图层 工具窗口。
设置 Figma 技能
jb-figma-implement-design 技能与 PhpStorm 捆绑，并会自动启用。
当开始在 AI 聊天 工具窗口中键入命令时，补全弹出窗口中会建议该技能。
查看当前选择和图层
当前 Figma Desktop 页面上的图层列在 Figma 图层 工具窗口中。
展开图层以浏览其子图层。
使用 当前已选 区域中的预览来定位所需图层。
将 Figma Desktop 与 PhpStorm 同步。
Figma Connect 会在 Figma Desktop 和 PhpStorm 之间实时同步选择，从而减少来回切换。 同步可双向工作:
在 Figma 中选择框架、组件或图层时，该选择会显示在 Figma 图层 工具窗口中。
在 Figma 图层 工具窗口中点击节点时，它会捕获 Figma 中页面上的焦点。
将设计添加到 AI Context
使用 Air Context 生成、审查和修改实现设计的代码。
要将设计用作 Air 的上下文，请指向所需项目并点击其旁边的
。
还可以一次选择并添加多个图层。
如果编辑器中已经打开了 Air 会话标签页，所选图层会自动添加到提示区域。 否则，PhpStorm 会打开一个 新建会话 弹出窗口，其中已附加所选设计。
键入提示，并将其与附加的设计一起发送。
请在提示中提供具体信息。 例如，“将我当前的主页实现与附加的 Figma 设计进行比较，并修复任何视觉或布局差异。”
默认情况下，PhpStorm 会自动将当前选择附加到每个新的 AI Context。 要更改此行为，请禁用 在 AI 上下文中的自动包含所选内容 选项，如 配置 Figma Connect 设置和行为中所述。
将设计添加到 AI Assistant 上下文
虽然强烈建议使用 Air，但 PhpStorm 仍支持与 AI Assistant 集成。
要将设计用作 AI 聊天 的上下文，请指向 层 窗格中的所需项目，然后点击
。
PhpStorm 会打开 AI 聊天 工具窗口，其中已附加所选设计。
在 AI 聊天 工具窗口中，键入提示，并将其与附加的设计一起发送。
请在提示中提供具体信息。 例如，“将我当前的主页实现与附加的 Figma 设计进行比较，并修复任何视觉或布局差异。”
默认情况下，PhpStorm 会自动将当前选择附加到每个新的 AI 聊天。 要更改此行为，请禁用 在 AI 上下文中的自动包含所选内容 选项，如 配置 Figma Connect 设置和行为中所述。
按 ID 引用设计和图层
在聊天或终端的会话期间，可以通过其 id 引用设计或图层。
开始之前
如果已连接到 Figma Remote MCP 服务器 ，请确保拥有 文件密钥。
建议 设置代理专用技能。
或者，点击 
，该按钮位于 Figma 图层 工具窗口中所需节点的旁边，然后将 id 粘贴到 终端 中。
按 id 引用设计或图层
在 Figma 图层 工具窗口中选择相应节点，然后将所选内容拖到聊天或终端。 如果只需要针对一个图层，而不是重新生成整个屏幕，这可能会很有用。
点击
工具窗口中所需节点旁边的 Figma 图层 ，然后将 id粘贴到聊天或终端中。右键点击所需项目，选择适用的格式，然后将其粘贴到聊天或终端中。
管理样式、布局和颜色
可以直接从 PhpStorm 在专用 Figma 检查 工具窗口中处理样式和颜色。
要检查节点，请在 Figma 图层 工具窗口中选择该节点，然后点击其旁边的
。
Figma 检查 工具窗口会显示所选节点的样式、布局和颜色。
在 Hex、RGB 和 HSL 之间切换颜色表示法。
将语言从 CSS 切换为 Android: Compose 或 Android: XML ，将 XML 与同一节点的 Figma 自身 Dev Mode 输出进行比较。
要复制布局、样式或颜色的代码，请点击其旁边的
。
要将样式、布局或颜色添加到 AI 聊天 ，请点击其旁边的
。
要将节点的样式、布局和颜色代码一次性作为文本复制，请点击 当前正在检查 区域中的
。
要将它们添加到 AI 聊天 ，请点击
。
嵌入式 Figma 画布
可以直接在嵌入式编辑器 (画布) 中编辑设计，而无需切换到 Figma Desktop。
要启用嵌入式画布编辑器，请转到主菜单上的 ，在 Search Everywhere 弹出窗口中找到 Registry ，然后选中
figma.embedded.editor.enabled旁边的复选框。要在画布中打开图层，请在 当前已选 区域中点击它。
点击工具栏上的
或 
以放大或缩小选择。要恢复选择的原始大小，请点击
。要自动设置缩放级别以确保选择内容适合嵌入式编辑器，请点击
。要显示棋盘背景，请按
。
配置 Figma Connect 设置和行为
点击
，该按钮位于 Figma 图层 工具窗口的工具栏上，然后从列表中选择 
。
根据需要配置设置。 要启用某项设置，请在打开的弹出列表中勾选其旁边的选项。
- 在 AI 上下文中的自动包含所选内容
自动将当前 Figma 选区附加到每个新的 AI 上下文。
- 在 IDE 启动时自动启动服务器
打开项目时自动启动连接。 此选项默认已启用。
- 撤销所有配对的会话
移除所有已保存的批准。 之后，需要再次批准来自 Figma 的下一个连接。