匯入到 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中，在畫布上取得圖層，然後繼續設計。