Figma Make 推出屬性面板與標註:AI 生成的 code,改回用手直接調的設計節奏

選中元素直接在面板調間距、字體、排版,或用標註把意圖講給 agent 聽——Figma Make 把改 code 的手感,拆回設計師熟悉的兩種輸入。

Figma Make 屬性面板與標註
RELEASE NOTES · FIGMA
New - The editing panel in Figma Make
A properties panel and annotations, now in Figma Make. Select any element and adjust it directly in the properties panel, or write in-context prompts with annotations—a more visual, direct way to edit generated code.
Figma Release Notes · 2026.07.30
figma.com/blog →
INTRO · 這次改了什麼節奏

用 AI 生介面的人都有過同一種卡頓:畫面出來了,你一眼看到某個按鈕的間距差了幾像素、標題字重太重、卡片圓角不對,但要把它調好,你得回到對話框,把「這裡再鬆一點、那個字細一點」寫成一段話,送出去,等它跑,再祈禱 agent 理解的跟你腦中的是同一件事。看得到、指得出,卻只能用打字繞一圈。

Figma 這次在 Make 編輯器裡補上的,正是這一段。7 月 30 日上線的屬性面板(properties panel)加標註(annotations),讓你可以選中畫面上任何一個元素,直接在面板裡調間距、字級、排版,或是在元素上貼一張標註、用自己的話交代要改什麼。生成的 code 還在底層跑,但改它的手感,回到了設計師本來熟悉的那一套。

Figma Make 屬性面板與標註
左:屬性面板把 Figma Design 的排版控制搬進 Make;右:標註直接在畫面上標點、用文字向 agent 交代意圖。圖/Figma
01/04屬性面板:把 Figma Design 的控制搬進 Make

屬性面板做的事很直接——把你在 Figma Design 裡早就用慣的控制項,原封搬到 Make 的畫布旁邊。間距、字體、排版、對齊、尺寸,這些過去要靠一句 prompt 描述的東西,現在變回一格一格可以直接點、直接拖的欄位。你在頂端工具列選「Edit」,選中元素,就能試不同的 padding、換幾組圓角、調字重,或是把元素拖著重新排序,一路調到順眼為止。

有一個細節值得設計師特別留意:面板裡吃的顏色與字體,是你 codebase 裡已經定義好的 token,而不是憑空冒出來的新值。也就是說你在面板上調的每一下,都還踩在專案原本的設計規範上。Figma 也預告 Code Connect 即將接上,屆時 Make 會把畫面連回你 Figma Design 裡的元件,讓同一套設計語言在設計檔跟 code 兩邊維持一致。

Figma Make 屬性面板調整 Layout 與間距
選中元素後,Layout、尺寸、間距都在右側面板裡直接調——這次把 padding 拉到 24。圖/Figma
INSIGHT
屬性面板真正的意義,是把「設計 token 是資產」這件事延伸到了 AI 生成的 code 上。面板調的是既有 token 而非隨機值,代表你前期在 variables、typography、design tokens 上花的工,會一路保護到 AI 產出的介面。前面的系統做得越扎實,這裡能直接調的空間就越大。
02/04動手調,為什麼比打字描述省

改成直接操作,省下的除了手感,還有實打實的成本。用文字描述改動時,agent 得先猜你指的是哪個元素、你要的「鬆一點」到底是多少,這中間的搜尋與猜測都要燒 token;直接操作則給了它一個精確的目標,同一個改動用掉的 token 更少、跑得更快。對每天要來回改上百次的人來說,這是會累積的差距。

流程上也更像設計師習慣的方式:你在面板裡調的每一筆,會先堆在對話框裡排隊 staged,讓你一筆一筆看過、確認沒問題再一次套用,看不順眼的隨手丟掉。等你點下套用,Make 才把改動寫回底層 code——你在畫面上看到的樣子,跟實際被改的程式碼是對得上的。改與審分成兩拍,而不是說出口就直接落地。

兩種改法 · 同一個目標
打字描述
寫一段話交代改動
agent 先猜元素與幅度
搜尋+猜測燒較多 token
結果不一定是你要的
直接操作
選中元素直接拖、直接調
agent 拿到精確目標
更少 token、更快完成
staged 後檢查再套用
03/04標註:處理那些不是視覺屬性的改動

有些改動調不出來——像互動、動態、一段行為邏輯,這些沒有一個「間距」欄位可以拖。標註就是為這類情況準備的。你在工具列選「Annotate for agent」,在畫面上標出位置,再用自己的話把意圖寫下來。它對「改哪裡」很精確,對「怎麼改」卻給你留白,讓你用講的,而不是用點的。

Figma 給的例子很有畫面:你想讓某一區「感覺再安靜一點」——這種話用講的一秒就到位,真要拆成一格一格的屬性反而彆扭。你把這個意圖標在那一區上,agent 就在原地把改動做出來。標註還能一次涵蓋好幾個元素,適合那種「這一整塊的行為我想調」的整體性指令。

Figma Make 標註功能
在畫面上標出 1、2、3 個位置,再用一句話交代要 agent 做什麼——例如「點選單時開一個全螢幕導覽層」。圖/Figma
INSIGHT
屬性面板負責「指得出、也調得動」的視覺層,標註負責「講得清、但不好點」的行為層——兩者一起,把改 code 這件事從單一的 prompt 對話,拆成了貼近設計師直覺的兩種輸入。你會依改動的性質選工具,而不是所有事都塞進同一個對話框。
04/04上線範圍、額度,跟一個要記住的限制

這兩個功能現在正在推送,Figma Make 的所有席次與方案都會拿到。兩者都會消耗 credits,所以真正頻繁操作前,值得先掂量一下自己的額度節奏。還有一個限制要先記著:屬性面板目前只對「新建的 Make 設計」生效,你之前已經做好的檔案不會套用這套面板,仍走原本的方式。想試面板手感,開一個新的 Make 檔會最順。

上線重點 · 三件事先知道
全方案開放
所有席次與方案都會陸續拿到,不限特定版本
會吃 credits
面板與標註都消耗額度,頻繁操作前留意用量
僅限新檔
屬性面板只對新建的 Make 設計生效,舊檔走原本流程
整體觀察

把這次更新拉高一層看,值得記住的是 AI 設計工具正在收斂的方向:它們慢慢不再要你全程用嘴巴指揮,開始把設計師本來的手——拖、調、標、審——放回生成 code 的最上層。Make 這一步,等於承認純 prompt 有它的天花板,該用手的地方就把手還給你。

這也回頭提醒了一件事。當你能直接在面板上調 token、標註能一次規範一整塊行為,你前期在系統上下的工——命名清楚的 variables、成套的 typography、有邏輯的元件結構——才是讓 AI 幫得動你的地基。工具會一直換,把設計系統練扎實這件事不會。

KEY POINTS · 重點整理
Figma Make 7/30 上線屬性面板與標註:選中元素直接在面板調間距、字體、排版,或用標註向 agent 交代意圖。
屬性面板吃的是 codebase 既有的顏色與字體 token,Code Connect 即將接上、連回 Figma Design 元件。
直接操作給 agent 精確目標,同一改動比打字描述用更少 token、更快完成;改動先 staged、檢查後再寫回 code。
標註處理互動、動態這類非視覺屬性的改動,對位置精確、對做法留白,能一次涵蓋多個元素。
全席次全方案陸續開放、兩者都消耗 credits;屬性面板目前僅對新建的 Make 設計生效。
100 種 Figma 設計的方法|UI/UX 線上課程
FIGMA 全攻略
面板能直接調 token,前提是你的 variables 本來就成系統
Figma 全攻略把 variables、typography、design tokens 與元件結構一次練扎實——這正是 AI 幫得動你的地基。
AI 覺醒設計應用攻略|RAR 設計攻略訂閱方案
AIWAKEN 訂閱制
AI 覺醒設計應用攻略
✦ AI 工具實測與工作流分享
✦ 設計師角度的 Prompt 技巧
✦ 每週精選 AI × 設計新知