导入到 Figma：Buddy 将图像、HTML、Claude 设计、Claude 原型和网站转换为图层

Reading Time: < 1 minute

设计工作不再从一处开始。

有时，第一个想法是 Claude Design 原型。有时它是克劳德的神器。有时它是 HTML 实验、屏幕截图、您喜欢的登陆页面或您的团队想要学习的实时网站。

问题不在于让人工智能或网络创造出有趣的东西。问题是将这个想法带回产品设计实际发生的地方：Figma。

Buddy 允许您将几乎所有内容导入 Figma 并将其转换为画布上的可编辑设计图层。 不是扁平化的屏幕截图。不是静态参考图像。您可以编辑、组织、细化和移交真实的图层。

Install Buddy Figma Agent →

使用 Buddy 将任何内容导入到 Figma，然后继续在 Figma 中进行设计

Buddy是Anima的Figma AI设计代理。它位于 Figma 内部，读取您的画布，并帮助您通过聊天创建、编辑和组织设计。

现在，Buddy 还可以充当外部灵感和 Figma 工作流程之间的桥梁。粘贴工件、图像、屏幕截图、HTML 或 URL，Buddy 将其转换为可编辑的 Figma 图层，这样您就可以继续设计过程，而无需手动重建每个帧。

这意味着您可以从以下开始：

Claude Design 工件，当您想将 AI 生成的界面引入 Figma 时。
克劳德文物，当克劳德创建原型、屏幕或交互式想法时。
HTML 工件，当设计从生成的 HTML 或编码模型开始时。
图片和屏幕截图，当您想要粘贴视觉参考并获取可编辑的 Figma 图层时。
网站 URLs，当您想要将公共网站克隆到 Figma 作为设计时，您可以检查和重新混合。

工作流程很简单：将源代码导入Buddy，让Anima解释视觉结构，然后直接在Figma画布上继续设计。

为什么这很重要：AI 为您提供初稿，Figma 为您提供控制权

人工智能工具非常擅长生成初稿。他们可以在几分钟内创建应用程序概念、登陆页面、仪表板、入门流程、定价页面、内部工具和产品实验。

但专业的设计工作并不止于初稿。它通常从那里开始。

团队仍然需要编辑副本、修复层次结构、应用品牌、对齐间距、使用组件、审查边缘案例，并准备其他设计师、PM 和工程师可以实际使用的文件。

这就是为什么进口很重要。如果人工智能生成的想法被锁定在聊天窗口、工件查看器、屏幕截图或浏览器选项卡中，则很难转变为真正的产品设计工作流程。

Buddy 将这项工作作为可编辑图层带回到 Figma，因此 AI 输出成为您的团队可以塑造的东西。

将 Claude Design 工件导入 Figma

Claude Design 非常适合快速探索 UI 创意和交互概念。您可以描述产品、功能或登录页面并快速获得精美的工件。

但如果下一步是设计审核、品牌细化或移交，您的团队通常需要 Figma 中的结果。

使用 Buddy，您可以将 Claude Design 工件带入 Figma 并从那里继续。 Buddy 将界面重新创建为可编辑图层，因此您可以调整画布上的布局、排版、颜色、间距、图标和内容。

当创始人、产品经理、营销人员或工程师首先创建人工智能原型，然后希望设计师使其达到生产质量时，这非常有用。

导入 Claude 工件和 AI 原型

Claude 工件可以包含多个屏幕。它们可以包含状态、面板、菜单、表单、表格、卡片、空状态和完整的 UI 概念。

无需手动截取屏幕截图并跟踪设计，而是将工件粘贴到 Buddy 中。 Anima 将其转换为您的团队可以编辑的结构化 Figma 设计。

一旦它出现在画布上，您就可以：

将屏幕分成框架。
编辑文本和产品副本。
优化间距和层次结构。
用品牌资产取代通用视觉效果。
应用您的设计系统。
准备设计以供审查或工程移交。

人工智能原型成为起点，而不是死胡同。

将 HTML 工件导入 Figma

许多 AI 工具现在生成 HTML 作为其设计输出。这对于快速预览很有用，但 HTML 并不总是评估产品设计的最佳场所。

设计师需要画布控制。他们需要移动图层、比较选项、检查层次结构并使工作与设计系统保持一致。

Buddy 通过将 HTML 工件带回到 Figma 中来提供帮助。您可以使用 HTML 输出作为源，然后将其转换为可编辑、可清理、重组和抛光的 Figma 图层。

这对于首先在代码中制作原型，然后需要适当的设计文件进行协作的团队特别有用。

粘贴图像或屏幕截图并获取可编辑的 Figma 图层

产品工作中截图随处可见。

用户发送他们喜欢的流程的屏幕截图。队友共享竞争对手页面。 PM 将粗略的 UI 想法放入 Slack 中。一位创始人用另一种人工智能工具绘制了一个登陆页面。

通常，该屏幕截图仅供参考。你可以将它放在Figma中，但是如果你想编辑它，你仍然需要手动重建UI。

使用 Buddy，您可以粘贴图像或屏幕截图并将其转换为可编辑的 Figma 图层。文本、布局、视觉结构和 UI 元素都成为您可以在画布上使用的内容。

这省去了该过程中最烦人的部分：重新创建已经存在的内容，以便您可以进行更改。

通过粘贴 URL 克隆任何网站

网站灵感是新产品和营销工作最常见的起点之一。

也许您喜欢 SaaS 主页的结构。也许您想研究定价页面。也许您需要捕获仪表板布局、入门流程或登陆页面部分。

使用Buddy，您可以粘贴网站URL并将页面作为可编辑设计引入Figma。 Buddy 不是保存屏幕截图，而是帮助您将视觉结构重新创建为画布上的图层。

使用它来学习模式、探索替代方案、构建情绪板或加快新页面的第一个版本的速度。然后用您的文案、组件、品牌和产品故事将其变成您的。

您在 Figma 画布上得到的内容

关键区别在于可编辑性。

Buddy 不仅仅是在画布上放置位图。目标是为您提供可编辑、审查和改进的可行 Figma 设计。

导入后，您可以继续正常的Figma工作：

直接编辑文本。
移动图层并调整其大小。
调整颜色、字体、间距和层次结构。
组织框架和部分。
在需要的地方应用自动布局。
用真实的组件替换粗糙的元素。
将结果与您的设计系统保持一致。

这就是Buddy的要点：速度而不失控。

更好的人工智能生成设计工作流程

旧的工作流程如下所示：

在人工智能工具中产生一个想法。
截图。
将屏幕截图粘贴到 Figma 中。
从头开始手动重建设计。
开始实际的设计工作。

Buddy 工作流程更短：

创建或查找源：工件、HTML、图像、屏幕截图或 URL。
将其粘贴到 Buddy 中。
获取可编辑的 Figma 图层。
继续在画布上进行设计。

这很重要，因为越来越多的团队从人工智能和网络灵感出发，但他们仍然需要专业的设计工作流程。 Buddy 连接这些世界。

这是给谁的？

将任何内容导入到 Buddy 对于任何需要快速移动而又不丢失 Figma 工作流程的人来说非常有用。

设计师 可以将人工智能输出和屏幕截图变成可编辑的起点。
项目经理 可以将 Claude 工件或网站参考带入 Figma，以进行更清晰的产品讨论。
创始人 可以从想法转移到设计文件，而无需手动重建所有内容。
营销人员 可以克隆登陆页面灵感并使其适应他们的品牌。
工程师 可以在HTML或AI工具中进行原型设计，然后将结果返回给设计。

这并不是要更换设计。它是关于消除想法和可编辑画布之间无聊的重建工作。

尝试将您的下一个想法导入 Buddy

下一个伟大的产品屏幕可能会从 Claude Design、克劳德工件、生成的 HTML 原型、屏幕截图或网站 URL 开始。

借助 Buddy，该起点可以成为现有工作流程中可编辑的 Figma 设计。

将其粘贴到Buddy中，在画布上获取图层，然后继续设计。