PM 的 PRD 文件在 Artifact, Confluence, Jira 等地方，產品 (UXUI) 設計師寫好的設計 Spec 也放在 Figma 介面旁邊一串文字，工程師要對規格時可能因此沒顧及到寫在設計旁邊的內容？設計師改了畫面忘了改文件，文件裡的截圖永遠是三個版本前的樣子？
分享一個近期我很喜歡的 Figma 新功能！在 2026 年 10 月推出新功能 Figma Spec，讓你可以把規格文件直接寫在設計稿旁邊。帶你看它的兩種檢視模式、裡面可以放哪些元素，再用我自己模擬的「Property List」頁面示範一份簡單的 Design Spec。最後分享我現在最常用的做法：請 Claude 幫我寫、幫我改 Spec，一起來看看吧！
Figma Spec 是什麼？
Figma Spec 是一份放在 Figma 畫布上的 Markdown 文件。你可以在裡面寫標題、段落、清單、表格、程式碼、圖片，就像在 Notion 或 GitHub 寫文件一樣，差別在於它就住在設計稿旁邊。
Figma 在 2026 年 10 月 15 日的 Config India 正式發表 Specs，目前是 open beta，正陸續開放給帳號使用。它有兩種存在方式：
- 嵌在畫布上：在 Figma Design 或 FigJam 檔案裡，跟你的 Frame 並排放。一個檔案可以放好幾份 Spec。
- 獨立的 Spec 檔：像一份單獨的文件，寫完再拖進設計檔裡使用。
上圖就是我隨意做的包租代管 SaaS 的實際檔案：左邊是 Spec，右邊是它描述的 Property List 畫面。打開檔案的人就知道「這個畫面的規格在哪裡」，給工程師時，他們也更好讓 Agent 讀我的產品時可以讀到 Spec 裡的所有細節，現在 AI Agent (Claude, ChatGPT 等) 至今（2026.11.2）在讀取跟繪製 Figma 畫面的成熟度已經大幅成長非常多，在Design system 的 AI 基礎設施建立好之後，餵給他設計檔還有語意以及產品需求後，都能產出可用的介面了來提供你做判斷跟微調，因此寫出 Spec 放在對應的畫面旁邊更是輕而易舉的步驟。
好處：文件和設計稿在同一個地方更新，且文件用了更方便 Agent 與人讀的格式，加速產品設計的細節。
兩種檢視模式：縮小版 vs 放大全畫面，還能分享 Link
同一份 Spec 有兩種看法，內容完全一樣，只是畫面大小和用途不同。
縮小版：在畫布上跟設計稿並排
就是上面那張圖的樣子。Spec 是畫布上的一個區塊，左上角有文件圖示和名稱，可以跟其他 Frame 一樣拖曳、縮放、排位置。適合邊看畫面邊對規格，例如確認「Table columns 寫的寬度跟畫面一不一樣」。
放大全畫面：像打開一份文件
點選 Spec 區塊（或把滑鼠移上去），區塊右上角會出現一個放大圖示（↗），點下去就會切換成全畫面。畫面只剩文件本身，字變大、版面變寬，就像在看一份 Notion 文件。適合從頭到尾讀完、或專心寫長段內容的時候用。
看到什麼算成功：畫面最上方會出現「檔案名稱 / Spec 名稱」的路徑。想回到畫布，點左上角的「< 檔案名稱」就好。
| 模式 | 怎麼進去 | 適合做什麼 |
|---|---|---|
| 縮小版（畫布） | 打開設計檔就看得到 | 對照畫面檢查規格、調整 Spec 擺放位置 |
| 放大全畫面 | 點 Spec 右上角的放大圖示 | 專心閱讀、寫長內容、開會時投影給大家看 |
分享連結
和其他的 Frame, section 一樣，Spec 功能也能分享連結，目前我最常用的還是指定這個連結的位置給 Claude，請他幫我修改裡面的內容等等的，但當然分享給你的團隊成員也都沒問題！
Figma Spec 跟 Dev Mode、Annotation 差在哪？
剛開始用很容易搞混，我自己是這樣分的：
| 工具 | 回答的問題 | 適合放什麼 |
|---|---|---|
| Dev Mode | 這個元素長怎樣？ | 尺寸、顏色、字級、間距等「看得到」的數值 |
| Annotation | 這個地方要注意什麼？ | 貼在單一元素上的短提醒 |
| Spec | 這個畫面為什麼這樣做、要怎麼運作？ | 目的、使用者、篩選邏輯、互動、邊界情況、待決問題 |
簡單說，Dev Mode 跟 Annotation 處理「畫面上的東西」，Spec 我把它定位在畫面背後的決定，以及更完整的設計規則。像是「切換分頁時要不要重設頁碼？」這種問題，畫面上看不出來，就是要寫進 Spec。
如何建立 Figma Spec？3 種方式
以下三種方式擇一就好。如果你是第一次用，建議從方式一開始。
方式一：在設計檔的畫布上新增 Spec
- 打開你的 Figma Design 檔案，切到要寫規格的那個頁面。
- 在畫面下方的工具列找到 Spec 工具（文件形狀的圖示），點一下。
- 在畫布上點一下空白處，就會出現一份空白的 Spec。建議放在對應畫面的左邊或右邊，之後比較好對照。
- 先打標題，例如「Property List — Design Spec」，再往下寫內容。
看到什麼算成功：畫布上多了一個白色的文件區塊，左上角有文件圖示和 Spec 名稱。點進去可以直接打字，他整體的介面操作起來非常直覺，有些功能也和 Notion 的編輯器很像，所以非常好上手。
方式二：請 AI Agent 幫你寫
- 打開你的 Figma Design 檔案，切到要寫規格的那個頁面。
- 可在畫面下方的工具 Spec 點一下，在畫布上點一下空白處，點擊 Share，把 Link 貼到 Claude or ChatGPT，再把你想要描述的設計範圍 Link 也 Share 到Claude or ChatGPT
- 請他針對你的需求或是畫面直接寫出設計 Spec，或是你有明確的 Spec 方向也可以定義給他。
- 有些內容需要表格化、或是圖像化，通通都能直接請他放入。
- 你做最後的檢查，甚至AI Agent會幫你補上一些沒想到的狀態等，你都能在回過來請 AI Agent 幫你把設計畫面補齊！
方式三：把現成的 .md 檔拖進畫布
如果你已經有用 Markdown 寫好的 PRD（例如從 GitHub、Notion 匯出，或請 AI 幫你起草的），直接把 .md 檔從電腦資料夾拖曳到 Figma 畫布上，放開滑鼠，它就會變成一份 Spec。標題、清單、表格的格式都會保留，不用重新排版。
方式四：建立獨立的 Spec 檔
在 Figma 的檔案瀏覽頁（就是你看到所有檔案列表的地方）新增一份 Spec，它會是一個獨立的文件。適合還在發想、還沒有設計稿的階段，等討論得差不多了，再把它放進設計檔裡。
找不到 Spec 工具怎麼辦？
Specs 目前還在 open beta，Figma 是分批開放的，所以有些帳號會比較晚看到。如果工具列上還沒有 Spec，可以先確認：
- Figma 桌面版有沒有更新到最新版（網頁版重新整理一次）。
- 你在這個檔案是不是有編輯權限。只有檢視權限的話，只能看別人寫的 Spec，不能新增。
- 都確認過還是沒有，就再等幾天，官方說明是會在接下來幾週陸續開放。
Spec 裡可以寫哪些東西？
Spec 支援常見的 Markdown 格式。我在練習檔裡做了一份「元素示範」，把每一種都放進去，下面一個一個看。先給你一張總表，之後要找哪個元素直接查：
| 元素 | Markdown 寫法 | 在 Spec 裡適合放什麼 |
|---|---|---|
| 標題 H1／H2／H3 | # 、## 、### | 文件名稱、章節（Purpose、Layout…） |
| 粗體／斜體／刪除線 | **粗體**、*斜體*、~~刪除~~ | 強調關鍵字、標出已作廢的決定 |
| 底線 | <ins>底線</ins> | 需要特別注意的字 |
| 行內程式碼 | `Table-cell/Primary` | 元件名稱、變數名稱、欄位 key |
| 連結 | [文字](網址) | PRD、Jira 單、參考文件 |
| 項目符號清單 | - 項目（前面空兩格就是第二層） | 規則、注意事項 |
| 編號清單 | 1. 步驟 | 操作流程、待決問題 |
| 待辦清單 | - [ ] 待辦、- [x] 完成 | 還沒補完的規格、交付前檢查 |
| 表格 | | 欄 | 欄 | | 欄位規格、篩選邏輯、觸發／結果 |
| 引言 | > 文字 | 原則、使用者原話、重要提醒 |
| 程式碼區塊 | ```json … ``` | API 範例、設定值 |
| 圖片 |  | 參考截圖、流程圖 |
| 分隔線 | --- | 分開正文與附錄、備註 |
好處：如果你習慣 Markdown，可以直接在外面寫好 .md 拖進來；不習慣也沒關係，在 Spec 裡直接打字排版就好。
1. 文字格式與標題
大標題用來放文件名稱，H2、H3 分章節。內文可以混用粗體、斜體、刪除線、底線、連結。我最常用的是行內程式碼，用來標元件名稱（例如 Table-cell/Primary），工程師一看就知道要拿哪個元件。
2. 清單：項目符號、編號、待辦
項目符號清單可以縮排成第二層；編號清單適合寫步驟或待決問題。待辦清單可以直接打勾，勾完會自動變灰加刪除線，很適合拿來追「還有哪些規格沒補」。
3. 表格
表格是 Spec 裡最好用的元素。欄位規格、篩選邏輯、互動對照，用表格寫都比一大段文字清楚。儲存格裡也可以放粗體和行內程式碼。
4. 引言與程式碼區塊
引言適合放設計原則或使用者訪談的原話。程式碼區塊可以標示語言（例如 json），會自動上色，適合放 API 範例或設定值，像是「每頁 20 筆、搜尋延遲 300ms」。
5. 圖片與分隔線
圖片下方會顯示你寫的說明文字，可以當圖說。分隔線用來把正文和附錄、備註分開。
還有：直接嵌入 Figma 畫面
除了貼截圖，Figma 官方也說明 Spec 可以直接嵌入畫布上的 Frame、任何圖層或 FigJam 檔案，讓文字跟設計並排，不用再擔心截圖過期。這個功能還在陸續開放中，如果你的帳號已經有了，會比貼截圖更好維護。
實戰範例：Claude 幫「Property List」頁面寫一份 Design Spec
知道有哪些元素之後，來看一份真的拿來用的 Spec。我用自己隨意做的包租代管 SaaS「Sublease & Management」示範，這是物件列表頁 Property List，我用 Claude 幫我寫出來的 Spec 示意：
（內容只是個 Demo 示意，不是真實產品，真實情境的 Spec 會寫得更細唷！）
畫面上有分頁、篩選、表格、房間狀態色塊、分頁器……每一個都藏著設計決定。下面我把這份 Spec 拆成 6 個區塊，一塊一塊說明「為什麼要寫」和「怎麼寫」。
1. 開頭先交代：目的、使用者、版面
Spec 的第一段寫這個畫面要幫誰完成什麼事。對應的畫面節點（Screen node）、產品名稱、使用的元件庫（Daydayding | DS Library）。接著寫 Purpose：讓分店人員一眼看到所有物件的狀態，並能點進單一物件處理。
再往下是 Layout 表格，用「區域／內容／規格」三欄，把 Sidebar 寬度、內容區圓角、各區塊高度一次列清楚。
好處：工程師、PM 或新加入的設計師打開檔案，第一屏就知道這個畫面在解決什麼問題，後面的細節才有脈絡可循。
2. 狀態分頁：把「篩選邏輯」寫成表格
畫面上只看得到「All 20、Master lease 8、Managed 3」這些分頁，但每個分頁背後篩的是什麼條件，工程師沒辦法從畫面猜出來。所以用「分頁／篩選邏輯／設計稿數量」三欄寫清楚，下面再補三條規則：
- 分頁只能單選，和下方篩選器是 AND 關係。
- 切換分頁時，頁碼回到第 1 頁，但搜尋和篩選條件保留。
- 「包租／代管」是業務類型，「整修中／有空房／即將到期」是營運狀態，所以同一個物件可能同時出現在好幾個分頁。
3. 表格欄位：一欄一列，元件、寬度、對齊都寫上
表格是後台最常見、也最容易出錯的地方。我把 8 個欄位各寫一列，標上用哪個 DS 元件、寬度多少、靠左還是靠右、內容格式長怎樣。例如「本月租金」要靠右對齊、格式是「$ 148,400」、沒有金額時顯示「—」。
好處：元件名稱直接對應設計系統，工程師可以照著拿元件；格式寫清楚，就不會出現有的欄位寫「0」、有的空白的狀況。
4. 視覺規則：把「看得懂」變成「說得清」
房間狀態那一排小色塊，設計師自己看當然懂，但別人不一定。所以我把每種樣式的意思寫成對照表：實心藍是已出租、實心米色是空房可租、虛線框是還不能出租（改建中或規劃中的房間）。下面再用畫面上的真實資料當例子，例如「中山路二段 XX 號：1 藍＋7 米＋2 虛線，入住數顯示 1/10」，讓讀的人可以直接對照設計稿驗證。
好處：有例子的規則比只有定義好懂很多，也能順便確認設計稿本身有沒有畫錯。
5. 互動：觸發什麼、發生什麼
互動用最簡單的兩欄表格就夠了：觸發（Trigger）／結果（Result）。例如「點物件地址 → 開啟該物件的 Property Detail」、「點 ⋯ → 打開更多操作選單」、「分頁器每頁 20 筆」。不用畫流程圖，一行一個互動，掃一眼就知道。
6. Open questions：把還沒決定的事攤開來
有 open question 也常常會是我們設計到中途會逐步累積的問題想和 PM and RD 確認的地方，統一列出來也可以在會議上更好一次性的盤點跟討論清楚，例如：
- 「即將到期」的門檻：設計稿寫「30 days left」，那到底幾天內算即將到期？30、60 還是 90 天？
好處：待決問題寫在 Spec 裡，團隊可以直接在 Spec 上留言討論，決定好了就改掉那一條，不會散落在各個聊天群組裡。
我現在最常用的做法：請 Claude 幫我寫、幫我改 Spec
老實說，現在我很少從空白頁開始寫 Spec 了。我最常做的是讓 Claude 讀 Figma 畫面寫初稿，我負責判斷和修正，之後要改也是直接請 Claude 改。Spec 是 Markdown，本來就很適合 AI 讀寫，這樣分工下來，我的時間可以花在真正需要設計師判斷的地方。
事前準備：讓 Claude 連上你的 Figma
- 在 Claude 裡連接 Figma：到 Claude 的連接器（Connectors）找到 Figma，點連接並用你的 Figma 帳號登入授權。
- 確認你的 Figma 方案已經開放 Specs：如果 Figma 裡還看不到 Spec 工具，Claude 也沒辦法幫你建立。
- 複製 Figma 畫面的連結：在 Figma 選取要寫規格的 Frame，按右鍵 → Copy link，等一下貼給 Claude。
看到什麼算成功：在 Claude 對話裡貼上 Figma 連結，問它「這個畫面有哪些元件？」，它能正確回答出畫面內容，就代表連上了。
請 Claude 寫初稿
把畫面連結貼給 Claude，告訴它你要哪些段落。 prompt 基本款可以長這樣：
Figma mockup (section) link
這是我的畫面，你針對我的畫面，幫我用Figma spec 寫出完整的設計 Spec
當然你若有越明確的需求，例如你的區塊裡的介面越多，就會有越多需要寫的，都能在用一般語意方式告訴他，他就是你的設計同事，你把事情給他幫你做完，你最後去檢查成果。
等 Claude 跑完，回到 Figma，就會看到畫面旁邊多了一份 Spec。最後一句很重要：讓 Claude 把不確定的事列成問題，而不是自己亂猜答案。我這份 Property List Spec 裡「即將到期幾天算」這些問題，就是這樣被整理出來的。
請 Claude 幫我改
初稿出來之後，我會自己從頭讀一遍，把決定好的事告訴 Claude，請它改，除了改 Spec，我也會同步請他調整設計稿若有不夠好的地方，例如：
把 Open questions 第 3 點改成定案：「即將到期」定義為租約到期前 60 天內，
並同步更新 Status tabs 表格裡 Expiring soon 的篩選邏輯。我改了 Figma 畫面，Rent this month 欄寬從 140 改成 160。
請只更新 Table columns 表格裡那一格，其他內容不要動。
好處：改小地方時，我會特別寫「其他內容不要動」，Claude 就只改那一格，不會把整份重寫。不確定的地方請它用留言標出來，我看過再決定要不要改，Spec 的內容主導權還是在自己手上。
Claude 是怎麼改 Figma 裡的 Spec 的？
Claude 透過 Figma 的 MCP Server 連到你的檔案。Figma 這次也把 Spec 開放給 MCP：外部 AI 工具接上之後，可以讀取、建立、修改 Spec。Claude 改內容時會先讀整份 Spec，找到你指定的那一段再替換，改完再讀一次確認有改到。
另外，Figma 也有內建的 agent 可以幫你起草 Spec，但在 Spec 裡使用 Figma 的 agent 會消耗 Figma AI credits。
Claude 寫的初稿可以直接交給工程師嗎？
我不會直接交。Claude 很擅長把畫面「看得到的東西」整理清楚，但商業規則、例外狀況、優先順序這些，還是要設計師跟 PM 判斷。我的習慣是：初稿交給 Claude，Open questions 一條一條自己決定，決定完再請 Claude 更新，最後自己從頭讀一次才交出去。
Figma Spec x Claude 我另類的滿意，是逼我看見設計稿的漏洞
在我開始使用 Figma spec 搭配 Claude 時，原本只是抱持著好玩試試 Figma 新功能的心態，結果整理到一半就發現，有些設計改了 A 畫面忘了 B 畫面，或是Spec和畫面差一點點正確性，又或是多種狀態跟 Edge case 還沒考慮到。這些問題在畫面上都很容易被忽略，但一旦要用文字把規則寫清楚，就藏不住了。
有了 AI 之後，寫 Spec 的門檻變得很低，讓你可以更快看見所有缺漏、更快補齊細緻的 Spec 內容，讓你可以有更多時間去判斷跟執行更有價值的產品設計！
下次做完一個畫面，不妨開一份 Spec，自己寫或請 Claude 寫都好，你會發現設計稿裡有好多值得再想一次的地方。
想看更多 UIUX × AI 的實戰技巧和 Figma 教學，歡迎追蹤 IG @daydayding，也可以到 YouTube @yokowei_designer 看影片版教學唷！近期準備要來開始做 YouTube 影片了！
參考資料
- Figma Blog：Introducing Specs: Markdown as a medium
- Figma Help Center：What’s new from Config India 2026
