Figma

Figma 是一個連接器：它把 MeDo 應用程式連接到一個 Figma 帳戶，讓應用程式讀取該帳戶能開啟的設計檔案。MeDo 會讀取頁面與畫框樹、元件與元件集、樣式、設計 token、節點渲染圖、圖片填充和原型互動，並把它們作為建立應用程式的上下文。這個連接是唯讀的：應用程式不會在你的 Figma 檔案中建立、修改或刪除任何內容。

#可以建立什麼

• 由設計稿建立應用程式。 把 MeDo 指向一個設計檔案，讓它依照檔案的版面、顏色、字體和間距建立頁面。
• 設計系統展示頁。 列出檔案或團隊資源庫中的每個元件、元件集和樣式，並附上預覽。
• Tailwind 或 CSS 設定。 抽取檔案的設計 token——顏色、字體、間距、陰影和圓角——轉成應用程式使用的 Tailwind 設定。
• 原型流程重現。 讀取檔案中的原型流程與元件變體狀態，把可點擊的流程重建成可運作的多頁面應用程式。

當設計已經存在於檔案中，而應用程式應該跟隨這份設計時，Figma 很合適。它不是設計編輯器，也不能代替你檢查成品，見限制。

#建立範例

把以下其中一段複製到提示詞輸入框。第一段是最小而實用的起點。

Use @Figma to turn my design file into a responsive landing page that matches its layout, colors, and fonts.

Use @Figma to build a component gallery page that lists every component and style in my design system file.

Use @Figma to generate a Tailwind config from my file's design tokens and use it in the app it builds.

Use @Figma to recreate the click-through prototype of my checkout flow as a working multi-page app.

#準備與連接

你需要一個已經能開啟目標檔案的 Figma 帳戶，另外不需要其他準備：不用建立 API token，也不用註冊 Figma 應用程式。MeDo 使用自己的 Figma 整合，應用程式能看到哪些檔案，由你連接的帳戶權限決定。

1. 在側邊欄開啟 Skills & Connectors（技能與連接器），搜尋 Figma。
2. 開啟卡片並點擊 Connect（連接）。
3. 登入 Figma，在授權頁面點擊 Allow access。
4. 按鈕會變成 Connected（已連接）。

如果你在連接前就開始建立，MeDo 會在回覆下方顯示 Figma 連接按鈕；編輯器左側欄的 Skill（技能） 分頁也有同一張卡片。兩個入口都可以。

#在應用程式中使用

• 應用程式使用的是你連接的帳戶，而不是每位訪客自己的 Figma 登入。 所有開啟頁面的人都看到同一份設計資料。請把設計檢視放在應用程式自己的登入機制之後，並只開放給指定人員。
• 刻意維持唯讀。 應用程式可以檢視檔案、專案或團隊資源庫，但不能更改、移動或刪除 Figma 中的任何內容。設計變更仍然要在 Figma 中手動完成。
• 檔案以連結或 key 定位。 每個檔案有一個 key，檔案內的節點有節點 ID（例如 1:5）。應用程式會把 Figma 連結解析成這些位址，再讀取節點或其子樹。
• 設計 token 是一個轉換步驟。 顏色、字體、間距、陰影和圓角會被抽取成 token，應用程式再把 token 轉成 Tailwind 設定與 CSS 變數。想先檢查內容時，可以先請應用程式輸出 token。
• 渲染圖是臨時連結。 畫框或節點的渲染結果是一條有期限的 URL，而不是存進應用程式的檔案。如果頁面要顯示大量預覽，請應用程式把渲染圖快取在自己的儲存空間，只在檔案版本變更時重新渲染。
• 原型互動描述的是流程，不是行為。 應用程式讀取檔案中定義的連線、動畫和元件變體狀態。沒有定義原型連線的檔案會回傳空結果，這對只用於版面與樣式的檔案是正常的。
• Figma 的方案與席位決定呼叫額度。 Figma 對 API 讀取有速率限制，額度取決於你的方案與席位類型。請應用程式以檔案和節點為鍵快取設計資料，避免每次載入頁面都重讀同一份檔案。

#限制與排障

應用程式顯示「需要連接」。 請應用程式擁有者開啟連接器卡片並點擊 Connect（連接），然後重新載入。MeDo 回覆下方的連接按鈕與編輯器左側欄的 Skill（技能） 分頁指向同一個地方。

找不到檔案、節點或團隊。 連接的帳戶可能沒有存取權，或連結指向該帳戶並非成員的團隊。請用該帳戶在 Figma 中開啟檔案確認，然後重試。

應用程式回報速率限制。 Figma 依方案與席位限制 API 讀取，免費方案每個檔案每月可讀次數很少。請等待額度重置、降低應用程式讀取同一份檔案的頻率，並請應用程式快取設計資料，而不是重複讀取。

圖片預覽不再載入。 渲染圖連結會在一段時間後失效。請重新渲染節點，或請應用程式為經常顯示的圖片保留自己的副本。

原型流程回傳空結果。 檔案中沒有定義原型連線。元件變體狀態仍會回傳，只是缺少流程連線。

#相關內容

• 連接器目錄——其他連接器及其用途。
• 技能與連接器——技能的調用方式、收費與限制。
• 管理存取權與角色——限制誰可以讀取已連接的資料。