Figma 讓 code 畫面回畫布自動接上變數：舊螢幕拉回來直接改，不用重畫

過去這一兩年，Figma 和程式碼之間的交通幾乎是單向的。你在畫布上把版型畫好，透過 Dev Mode、MCP server 送進 IDE，變成 code。反方向——把已經寫成 code 的畫面拉回 Figma——技術上一直做得到，但拉回來的東西像具標本：像素對、版型對，可是每個顏色都是寫死的 #hex，每個間距都是硬邦邦的數字，跟你檔案裡辛苦建起來的 design system 一點關係都沒有。

7 月 16 日這則更新，改的就是「拉回來的東西長什麼樣」。當你把 code-backed 的畫面帶進 Figma 畫布，顏色、字體、間距現在會自動去比對、綁上你檔案裡既有的變數；換作以前，它們只會硬邦邦地落地成一堆 hardcoded 死值。聽起來像小數點後的優化，動到的卻是設計與工程之間那條邊界該怎麼跨。

三個入口，同一個改動

這次一次涵蓋三種把 code 畫面帶進畫布的路徑。第一，把 Figma Make 的 preview 當成 design layers 複製到畫布上；第二，透過 Figma MCP server 從 code 直接 generate 出設計；第三，用 Chrome extension 把一個線上網頁整頁抓成可編輯的 layers。這三條路以前都會把值寫死，現在都會去接你既有的變數。

除了值會綁變數，更多 frame 現在也會帶著 auto layout 一起回來。這句話的份量比它看起來重——auto layout 決定了元素會不會隨內容 resize、reflow。以前拉回來的是一塊塊釘死的畫面，你改一個字、換一張圖，旁邊全部要手動推位；現在它們會自己撐開、自己重排。

為什麼「綁上變數」是整件事的重點

差別具體長這樣。一個寫死的畫面裡，主色是 #3B82F6，那就是 #3B82F6，跟你 library 裡那顆叫 color/brand/primary 的變數毫無關聯。你改了 token，這個畫面不動；你切 dark mode，它原地不動。綁上變數之後，這個顏色指向的是你的 token 本身——設計系統一改，它跟著改。

auto layout 一起回來，改的是「改稿」這件事

這也是 auto layout 一起回來的意義所在。拉回畫布的畫面帶著結構化的圖層——你會在圖層面板看到 Container、ImageWithFallback、Primitive.div 這類從 code 沿用下來的命名——而且外層框帶著 auto layout。於是改稿從「搬積木」變回「調設計」：換一段長文案，容器自己撐高；抽掉一張卡片，下面自己補位。你花的時間回到打磨本身，省下收拾位移的功夫。

誰真的因此受益

最直接受惠的是兩種人。一種是手上有「只活在 code 裡的舊畫面」的團隊——那些早期用工程做掉、Figma 檔案早就對不上的產品介面，現在能整批拉回來，變成能改、還連著系統的 layers。另一種是每天在 design 與 dev 之間來回的人：工程實作完的東西想搬回 Figma 迭代，起點不再是一堆得逐一手動接線的死值。

有個前提值得先說清楚。官方的用字是綁上你檔案裡「大部分」的變數——bind to most of the variables。這是一場 best-effort 的比對：系統拿進來的值去猜該對應哪顆變數，猜得準不準，取決於你既有的變數庫整不整齊。變數命名亂、根本沒建 token 的檔案，不會因為這個功能就長出一套乾淨系統。它獎勵的，是已經把 design token 功課做完的團隊。

回程那一段路

把這則更新放回 Figma 這一年的大圖裡——Config 2026 讓 code、motion、shaders 直接長在畫布上，MCP server 打通 design 到 code 的自動化——方向愈來愈清楚：Figma 想讓「畫布」和「codebase」變成同一套設計系統的兩個視圖，兩邊都能自由過橋、不掉東西。今天補上的，是回程那一段路。過去你把畫面送出去，就等於送走了；現在它還認得回家的路，回來時手上還握著你的變數。