- 登入
- 註冊
Figma Make 指南 2026｜用 Figma AI 做互動網站，設計原型與正式上線怎麼分？
內容目錄
顯示
Figma Make 是一套 AI 驅動的 prompt-to-app 工具，可以把文字需求、既有 Figma 設計與其他素材，轉成能操作的原型、Web App 或互動介面。這篇 Figma Make 教學會先回答它是什麼，再逐步拆解功能、操作與公開發布的邊界。
如果你原本就在 Figma Design 裡畫介面，Make 的吸引力很直接：不必只停在靜態畫面，可以進一步測試按鈕、資料與使用流程。不過，能公開一個網址，不代表網站已經完成 SEO、表單收件、權限、安全、數據追蹤與長期維護。
來源：Figma Make 官方頁與Figma Make FAQs（查證 2026-07-24；功能、席次與發布條件以 Figma 官方最新公告及實際帳號為準）。
3 句話看懂 Figma Make
- Figma Make 是把提示詞、設計脈絡與素材轉成可操作介面的 AI 工具，官方定位涵蓋功能原型、Web App 與互動 UI。
- 產出以程式碼為基礎，也能透過提示詞、畫布與程式碼繼續調整，但這不等於每份輸出都已符合正式環境的開發規範。
- 它適合縮短設計到互動驗證的距離；若目標是長期營運官網，仍要另外確認 CMS、SEO、表單、權限、安全與維護責任。
讀者常見的混淆，是「Figma 裡做出來」代表什麼。Figma Make、Figma Design、Figma Sites 與一般 Prototype 都在同一個產品生態中，但解決的任務、交付成果與公開方式不同。本文後面會用一張差異表逐項比較，不用「可以做網站」一句話帶過。
Figma Make 是什麼？
它是從提示詞建立可操作介面的 AI 工具
Figma 官方將 Make 稱為「AI-driven, prompt-to-app tool」。prompt-to-app 若直譯，就是「從提示詞到應用程式」；白話來說，你可以描述使用者要完成的任務，附上既有設計或素材，再讓 AI 建立一個可以操作與修改的介面版本。
既有設計可以成為上下文，但不是自動雙向同步
使用者可以把 Figma frame、component 或其他支援素材附到 Make 的提示詞，讓 AI 參考既有版型與內容。Figma 官方產品頁也說明，Make 可以使用設計系統、圖片與程式碼等脈絡，產出以程式碼為基礎，並可在視覺畫布繼續編輯。
Figma Make 與一般 Figma Prototype 解決的問題不同
一般 Figma Prototype 主要把設計畫面連結成操作路徑，適合示範點擊、跳頁與狀態切換。Figma Make 則進一步產生以程式碼支撐的互動成果，能處理更接近 Web App 的行為。
「prompt-to-app」容易讓人誤會一段提示詞就能正式上線
prompt-to-app 很容易被理解成「輸入一句話，完整應用程式就完成」。實際上，提示詞只能提供起點；需求是否完整，流程是否合理，程式碼能否維護，資料是否安全，以及公開後由誰負責，仍需要人做判斷。
來源：Figma Make FAQs與Figma Make 官方頁（查證 2026-07-24）。官方將 Make 定位為 AI 驅動的 prompt-to-app 工具，可建立 functional prototypes、web apps 與 interactive UI；官方 FAQ 同時說明 Figma Design 工具未直接整合進 Make。
Figma Design、Make、Sites、Prototype 與正式官網差在哪裡？
這五個名稱不在同一個比較層級。Figma Design、Make 與 Sites 是不同產品或工作空間；Prototype 是 Figma Design 裡用來模擬操作流程的能力；正式營運官網則是一種交付狀態，不是 Figma 的產品名稱。
| 項目 | 主要目的 | 常見輸入 | 主要輸出 | 是否以程式碼運作 | 公開與營運邊界 |
|---|---|---|---|---|---|
| Figma Design | 設計介面與建立設計系統 | Frame、component、文字、圖片 | 可編輯設計稿 | 不以交付程式碼為核心 | 通常用於設計與交接 |
| Figma Prototype | 模擬點擊與畫面路徑 | Design 畫面與互動設定 | 可操作的流程示意 | 不等於正式前端程式 | 適合驗證導覽與狀態 |
| Figma Make | 建立功能原型、Web App 與互動 UI | 提示詞、設計、素材、程式碼 | 以程式碼支撐的互動成果 | 是 | 可分享或發布，營運條件另驗收 |
| Figma Sites | 設計並發布響應式網站 | Design frame、元件、內容 | 公開網站與 Sites CMS | 可使用 AI 或程式碼調整 | 2026-07-24 官方仍標示 Beta |
| 正式營運官網 | 長期接單、內容經營或交易 | 商業需求與通過驗證的設計 | 可維護的品牌資產 | 視系統而定 | 還要驗收網域、SEO、資料、安全與維護 |
Figma Design 負責介面，Prototype 負責示範路徑
Figma Design 適合整理版面、元件、字體與設計規則。Prototype 則把這些畫面連成使用路徑，讓團隊示範按下按鈕後會前往哪裡，以及選單、彈窗或頁面切換如何呈現。
Figma Make 負責建立更接近實際操作的成果
Make 會產生程式碼，並提供互動預覽、提示詞修改、局部編輯與程式碼編輯。它適合測試較具體的功能行為，例如資料篩選、狀態改變或多頁 Web App，而不只是示範畫面跳轉。
Figma Sites 的核心任務是建立並發布網站
Figma Sites 官方頁主打把既有 Figma Design frame 轉為彈性版面，加入響應式元件、預設互動與 Sites CMS，再發布為公開網站。它比 Make 更直接對應「製作網站」這個任務。
正式營運官網是一組驗收條件，不是工具名稱
不論使用 Make、Sites 或其他系統，正式官網都要回答相同問題：誰擁有網域與內容，誰能更新，表單資料送到哪裡，搜尋引擎能否正確收錄，追蹤是否有效，以及發生問題時由誰復原。
來源：Figma Sites 官方頁與Figma Make FAQs（查證 2026-07-24）。Figma Sites 官方頁說明響應式網站發布與 Sites CMS，且目前仍標示 Beta；Make FAQ 則說明 Design layers 回貼後不會自動同步回 Make。
Figma Make 目前能做什麼？
以下功能依 Figma 官方產品頁與說明文件整理。實際可用範圍會受方案、席次、管理員設定與 AI credits 影響；本章只確認官方能力，不把尚未實測的輸出品質寫成結果。
提示詞可以搭配設計、素材與外部脈絡
建立 Make 時，可以輸入文字或語音提示詞，也能附上 Figma 設計、圖片與其他支援檔案。官方文件還列出設計資源庫提供的樣式脈絡、外部工具連接器、網路搜尋與網址內容等來源，其中部分能力受付費方案限制。
互動成果可以用對話、局部工具與程式碼修改
Make 完成第一版後會顯示互動預覽。使用者可以繼續對話要求修改，也能選取特定元素調整文字、色彩、間距等屬性，或直接進入程式碼編輯器修改。
可以加入後端，但仍要獨立驗收資料與安全
Figma 的建立文件將「加入後端」列為 Make 的可用能力，用來儲存與管理資料及機密值。這表示 Make 不只限於靜態畫面，但官方提供功能不等於特定專案已完成權限、個資、錯誤處理與資安檢查。
團隊可以留言、共同查看並管理版本
官方資料顯示，部分方案與席次支援多人協作、留言、分享與權限設定。這讓設計、產品與開發角色可以在同一份互動成果上回饋，不必只交換影片或靜態截圖。
來源：Create and edit a Figma Make file、Add a backend to a functional prototype or web app、Add comments in Figma Make、Manage connectors in Figma Make與Figma Make FAQs（查證 2026-07-24）。官方文件列出設計附加、樣式脈絡、外部工具連接器、網路內容、後端、對話編輯、局部編輯、程式碼編輯與版本紀錄；Connectors 適用範圍受 Organization／Enterprise 方案限制，其他功能也應以帳號與官方最新文件為準。
哪些人適合使用，哪些情況不適合只靠 Figma Make？
判斷要不要用 Figma Make，不應只看它能不能產生畫面，而要看團隊想縮短哪一段工作。若目標是把既有設計快速變成可操作版本，Make 很有價值；若目標包含內容經營、交易與敏感資料，Make 比較適合作為驗證工具，而不是唯一的正式系統。
| 使用情境 | 適合程度 | 建議用法 | 還要補的工作 |
|---|---|---|---|
| 已有 Figma 設計系統的產品團隊 | 高 | 附上既有 frame 與 component，驗證互動與流程 | 確認輸出是否符合元件規則與開發架構 |
| 設計師、產品經理或行銷人員需要可操作 Demo | 高 | 先做關鍵任務，提供團隊或客戶操作 | 設定回饋範圍與驗收標準 |
| 新創團隊驗證 MVP | 中高 | 用假資料測試核心價值與使用路徑 | 另評估後端、安全與維護成本 |
| 需要頻繁更新的內容型官網 | 中低 | 可先做版型或互動概念 | 另選合適的 CMS，規劃 SEO 與內容權限 |
| 會員、付款或個資流程 | 低 | 僅用測試資料建立概念驗證 | 需要工程、資安、法遵與正式測試 |
| AI 或公開分享受管制的組織 | 視政策而定 | 先確認方案、席次與管理員規則 | 釐清資料能否上傳，成果能否對外分享 |
已有 Figma 設計系統的產品團隊較容易取得價值
若團隊已經在 Figma 管理元件、版型與品牌規則，就能把既有設計直接當成 Make 的起點。這類用法不是請 AI 從零猜測品牌，而是讓它依可辨識的視覺脈絡建立互動版本。
需要可操作 Demo 的設計師、產品經理與行銷人員適合先用 Make
靜態設計稿常讓討論停在配色與排版，互動 Demo 則能讓參與者實際完成一項任務。設計師可以測試操作細節，產品經理可以確認需求，行銷人員也能先檢查活動概念與內容順序。
內容型官網與 SEO 經營不適合只看公開網址
需要長期寫文章，管理分類與維護搜尋流量的網站，核心不只是頁面能不能公開。團隊還要確認內容管理、標題與描述、結構化資料、轉址、網站地圖、權限與備份。
會員、付款與敏感資料專案需要完整工程驗收
只要流程會處理密碼、付款資訊、客戶個資或公司機密，判斷標準就不能停在「可以操作」。資料如何保存，誰能讀取，異常怎麼記錄，以及發生問題如何復原，都需要獨立驗證。
開始使用 Figma Make 前要準備什麼？
好的提示詞無法替代需求整理。開始前先準備一頁簡短規格，至少寫下使用者要完成的任務，可參考的設計，需要出現的狀態，以及成果最後交給誰，能降低每一輪修改都在重新猜題的情況。
- 使用者要完成的單一任務，例如預約諮詢或比較方案。
- 作為起點的 frame、component、圖片與文字內容。
- 必須遵守的色彩、字體、間距與元件規則。
- 哪些內容是真實文案，哪些只是示意資料。
- 正常、空白、載入、錯誤與完成狀態。
- 手機、平板與桌機需要呈現的差異。
- 哪些資料只供展示，哪些需要後端或外部服務。
- 分享權限、發布方式、驗收人與正式上線邊界。
先選一條使用者任務，不要一次做完整產品
第一輪可以只做一個有開始與結束的任務。例如「從服務頁選擇時段並送出預約」，比「做一個預約平台」更容易讓 Make 理解，也方便團隊測試成功與失敗的條件。
把 Frame、Component 與品牌規則整理成可用上下文
附上設計前，先移除無關草稿，並確認 frame 名稱、文字內容與元件狀態容易辨識。若團隊有設計系統，也應說明哪些 component 必須沿用，以及哪些版面可以讓 Make 探索。
用假資料先定義正常、空白、載入與錯誤狀態
互動成果不能只在「資料剛好正確」時看起來正常。列表沒有內容，連線等待，輸入格式錯誤或送出失敗時，畫面也要告訴使用者發生什麼事，以及下一步可以怎麼做。
在動手前寫清楚權限、發布與正式上線邊界
先確認誰可以編輯 Make 檔案，誰只能查看，以及成果能否公開分享。若組織有 AI 使用政策，還要確認哪些設計、程式碼與資料可以上傳，不能等完成後才發現內容無法交付。
依官方文件規劃從既有設計做出互動 Web App
Figma Make 的流程不是把整份設計稿丟進去，等 AI 一次完成。較可控的作法是先限定任務，提供必要的設計脈絡，再用正常與例外案例逐輪驗證。以下流程依官方操作文件整理，屬於可重現的操作架構，不代表本文已完成指定帳號的第一手測試。
先用一句任務敘述定義完成條件
先把需求寫成「誰要在什麼情境完成什麼事」，例如：「第一次來訪的顧客，要在手機上比較三種方案並送出詢問。」再補上成功條件、不能發生的結果與本輪不做的功能。
附上必要的 Frame、Component 與內容
建立 Make 檔案後，可以在對話中附上 Figma 設計，貼入 frame 或圖片，也能提供設計資源庫的樣式脈絡。只放與當前任務有關的畫面，並說明哪一個是起點，哪些 component 必須沿用。
先檢查計畫，再建立第一個可操作版本
付費方案可使用 Plan mode，先產生結構化計畫並在寫入程式碼前調整。沒有這項功能時，也可以在第一則提示詞要求 Make 先列出畫面、狀態、資料與不處理的範圍，確認後再開始。
用正常、空白、載入與錯誤案例逐項驗證
測試時不要只點過一次順利流程。至少準備正常資料、零筆結果、內容過長、網路等待、輸入錯誤與送出失敗，逐項記錄預期結果、實際結果與待修項目。
來源：Create and edit a Figma Make file與Best practices for optimizing AI credits in Figma Make（查證 2026-07-24）。官方文件說明提示詞、設計附件、樣式脈絡、Plan mode、預覽與程式碼編輯；AI credits 指南則建議縮小第一則提示詞範圍，並依修改類型選擇局部編輯或直接改程式碼。
Figma Make 費用、AI credits、素材權利與上線風險怎麼看？
Figma Make 的成本不能只看「免費或付費」。實際支出由方案、席次、每月 AI credits、額外點數與反覆修改量共同構成；公開後還要把網域、素材授權、資料合規與維護工作算進去。
Figma Make 不是獨立購買的單一產品
截至 2026 年 7 月 24 日，Figma 官方價格頁以美元列價，Full seat 包含 Figma Make 與其他 Figma 產品。Starter 可免費有限使用；Professional Full seat 頁面顯示每月 16 美元，Organization 與 Enterprise Full seat 分別顯示每月 55 與 90 美元，後兩者採年繳。
| 方案與席次 | 官方頁面顯示價格 | 內含 AI credits | 閱讀方式 |
|---|---|---|---|
| Starter | 免費 | 每日 150，上限每月 500 | 適合有限試用，功能依帳號畫面為準 |
| Professional Full seat | 每月 16 美元 | 每月 3,000 | 可選月繳或年繳，實付依結帳畫面 |
| Organization Full seat | 每月 55 美元 | 每月 3,500 | 官方標示年繳 |
| Enterprise Full seat | 每月 90 美元 | 每月 4,250 | 官方標示年繳，採購條件另確認 |
AI credits 不是固定的提示詞次數
AI credits 直譯是「AI 點數」，是 Figma 用來計量 AI 功能用量的單位。這個名稱容易讓人誤會一點等於一次操作，但官方說明每次提示詞的消耗會依模型、任務複雜度與處理的脈絡量改變。
發布前必須確認第三方素材與資料責任
Figma 官方提醒，Make 可能把網路上的字型、程式套件或圖片等第三方內容帶進成果。Make 提供的圖片來自 Unsplash，但使用者仍要依實際用途檢查權利與適用條款，不能因為素材由工具帶入就假設可以商用。
公開發布前要完成 12 項檢查
- 使用到的圖片、字型、程式套件與文案都有適當使用權利。
- 檔案、提示詞與公開成果不包含不該曝光的敏感資料。
- 手機、平板與桌機的主要任務都能完成。
- 鍵盤操作、焦點順序、替代文字與色彩對比已檢查。
- 表單資料的收件位置、保存方式與刪除流程已確認。
- 編輯、查看、公開與內部存取權限符合組織政策。
- 頁面標題、描述、語言、索引設定與網址符合公開目的。
- Google Analytics 或其他追蹤工具已依法告知並完成測試。
- 自訂網域、DNS、HTTPS 與舊網址轉移方式已確認。
- 程式碼、內容、設定與可復原版本有備份或交接方式。
- 空白、錯誤、逾時與服務中斷時有可理解的處理方式。
- 上線後由誰更新，監控，付費與處理問題已有明確責任。
清單全數通過，也不代表每個產業的法規與技術要求都已涵蓋。它的作用是把「可以 Publish」轉成一張可驗收的待辦表，再依專案風險補上工程、資安與法律檢查。
來源：Figma Plans & Pricing、Manage AI credits、Publish, update, or unpublish a Figma Make file（查證 2026-07-24；價格、額度與發布條件可能調整，採購及上線前請重新核對官方頁面與實際帳號）。
同一份需求可以分成哪三種交付層級？
「做出來」不是單一終點。同一份需求可以交付成互動原型、公開 Demo 或正式營運網站，三者的驗收深度、資料責任與維護成本不同。專案一開始就寫清楚層級，能避免收到公開網址後，才發現雙方對「完成」的理解不同。
| 交付層級 | 主要成果 | 可分享方式 | 搜尋收錄 | 資料管理 | 適用情境 |
|---|---|---|---|---|---|
| 互動原型 | 可操作的核心流程 | 團隊或指定對象查看 | 不以收錄為目標 | 使用假資料，不接正式流程 | 需求討論、使用者測試、開發交接 |
| 公開 Demo | 可由網址開啟的展示版本 | 公開網址或自訂網域 | 依設定決定，但不等於已完成 SEO | 只放可公開資料，限制收件與權限 | 提案、活動預覽、概念驗證 |
| 正式營運網站 | 可長期更新與承接業務的系統 | 品牌正式網域 | 依 SEO 策略管理 | 有正式資料流程、權限與合規機制 | 接單、內容經營、會員或交易 |
互動原型用來驗證任務是否成立
互動原型的完成條件，是目標使用者能否理解並走完核心流程。它可以保留未完成的次要頁面，也能使用假資料；重點是讓團隊在投入完整開發前，先確認需求與操作邏輯。
公開 Demo 用來擴大回饋，不代表已承接正式業務
公開 Demo 比互動原型多了一個可直接開啟的網址，適合提供客戶、投資人或測試者體驗。公開前仍要清除敏感資料，確認素材權利，並說明哪些表單、登入或資料只是展示。
正式營運網站要通過持續經營的驗收
正式網站除了介面與功能，還要能穩定更新內容，處理真實資料，追蹤成效並在發生問題時復原。網域與帳號歸屬、權限、備份、SEO、無障礙、安全與維護責任都要有負責人。
內文精華總結
Figma Make 的核心價值是縮短設計到互動驗證的距離
- 它能從提示詞、既有設計與素材建立以程式碼支撐的互動成果。
- 適合先測試關鍵任務、狀態與使用流程，不必只用靜態畫面討論。
既有 Figma 設計是上下文，不是自動雙向同步
- Design frame、component 與樣式脈絡能幫助 Make 理解現有設計。
- 回貼 Design 或修改 Make 後，不應假設兩邊會自動保持一致。
公開發布與正式營運需要兩張不同的驗收表
- Publish 可以提供公開網址、自訂網域與部分發布設定。
- 正式網站還要驗收內容、SEO、資料、安全、分析、備份與維護責任。
費用要把席次、AI credits 與重做成本一起計算
- 每個方案與席次的點數不同，提示詞消耗也會受模型、任務與脈絡影響。
- 清楚的需求、適量的上下文與分階段驗證，能減少反覆修改造成的成本。
Figma Make 值得被視為一套互動驗證工具，而不是「輸入一句話就完成正式網站」的捷徑。若團隊先定義交付層級，再把公開 Demo 與正式營運分開驗收，就能保留 AI 加速探索的優勢，同時避免把尚未完成的責任藏在一個看似可用的網址後面。
想把Figma Make 教學規劃成能長期營運的網站？
先用秒站建立可操作的網站，再依實際內容、功能與營運需求調整。你可以先試用，查看方案，或從真實案例確認適合自己的方向。
- 4 小時免費試用：不必信用卡，先確認後台與編輯流程是否適合。
- 查看秒站方案：標準方案 NT$24,000、專業方案 NT$36,000、輕電商方案 NT$48,000 年費。
- 瀏覽 80+ 真實案例：從不同產業的內容、版型與功能安排找參考。
延伸閱讀
AI 建站工具系列文章
- Google Stitch 指南 2026｜AI 生成 UI 到正式官網，能做到哪一步？
- Replit AI 做網站指南 2026｜從提示詞到部署，哪些情況該換正式官網？
- Bolt.new 指南 2026｜AI 生成網站怎麼做？費用、限制與正式營運檢查
秒站現在不只是一套版型。你可以從現成架構快速開始，用頁面編輯器拖曳、複製與調整版面；需要更高自由度時，也能和 AI 協作，把自製頁面放進 Vibe 畫布。上線速度與設計自由不必二選一。
重點整理
3 句話看懂 Figma Make要注意什麼？
讀者常見的混淆，是「Figma 裡做出來」代表什麼。Figma Make、Figma Design、Figma Sites 與一般 Prototype 都在同一個產品生態中，但解決的任務、交付成果與公開方式不同。本文後面會用一張差異表逐項比較，不用「可以做網站」一句話帶過。Figma Make 是把提示詞、設計脈絡與素材轉成可操作介面的 AI 工具，官方定位涵蓋功能原型、Web App 與互動 UI。
它是從提示詞建立可操作介面的 AI 工具要注意什麼？
Figma 官方將 Make 稱為「AI driven, prompt to app tool」。prompt to app 若直譯，就是「從提示詞到應用程式」；白話來說，你可以描述使用者要完成的任務，附上既有設計或素材，再讓 AI 建立一個可以操作與修改的介面版本。這個產品定位比一般圖片產生工具更接近軟體原型。它處理的不只是畫面外觀，也包括按鈕反應、畫面切換與部分資料互動，讓團隊可以在正式開發前先看見想法如何運作。
既有設計可以成為上下文，但不是自動雙向同步要注意什麼？
使用者可以把 Figma frame、component 或其他支援素材附到 Make 的提示詞，讓 AI 參考既有版型與內容。Figma 官方產品頁也說明，Make 可以使用設計系統、圖片與程式碼等脈絡，產出以程式碼為基礎，並可在視覺畫布繼續編輯。「使用既有設計」不應直接理解成 Figma Design 與 Make 會自動保持雙向同步。
Figma Make 與一般 Figma Prototype 解決的問題不同要注意什麼？
一般 Figma Prototype 主要把設計畫面連結成操作路徑，適合示範點擊、跳頁與狀態切換。Figma Make 則進一步產生以程式碼支撐的互動成果，能處理更接近 Web App 的行為。差別不在於哪一個比較高級，而在於需要驗證什麼。若只想確認使用者從首頁走到預約頁是否順暢，Prototype 可能已經足夠；若要測試較具體的互動或資料呈現，Make 才有更大的發揮空間。
「prompt to app」容易讓人誤會一段提示詞就能正式上線要注意什麼？
prompt to app 很容易被理解成「輸入一句話，完整應用程式就完成」。實際上，提示詞只能提供起點；需求是否完整，流程是否合理，程式碼能否維護，資料是否安全，以及公開後由誰負責，仍需要人做判斷。更精準的理解是「從提示詞開始建立可操作成果」。把 Make 視為設計探索與功能驗證工具，能更清楚地安排後續工作，也不會因為取得公開網址，就漏掉正式營運需要的檢查。
Figma Design、Make、Sites、Prototype 與正式官網差在哪裡？
這五個名稱不在同一個比較層級。Figma Design、Make 與 Sites 是不同產品或工作空間；Prototype 是 Figma Design 裡用來模擬操作流程的能力；正式營運官網則是一種交付狀態，不是 Figma 的產品名稱。
Figma Design 負責介面，Prototype 負責示範路徑要注意什麼？
Figma Design 適合整理版面、元件、字體與設計規則。Prototype 則把這些畫面連成使用路徑，讓團隊示範按下按鈕後會前往哪裡，以及選單、彈窗或頁面切換如何呈現。Prototype 可以有效驗證流程，但它呈現的是操作模型。除非另有技術實作，畫面中的表單、會員與付款不代表資料已被真實處理。
Figma Make 負責建立更接近實際操作的成果要注意什麼？
Make 會產生程式碼，並提供互動預覽、提示詞修改、局部編輯與程式碼編輯。它適合測試較具體的功能行為，例如資料篩選、狀態改變或多頁 Web App，而不只是示範畫面跳轉。這不代表 Make 一定要取代 Design。實務上可以從既有 Design frame 開始，讓 Make 取得設計脈絡；也可以先用 Make 探索，再把預覽複製成設計圖層（design layers）回到 Design。
