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