當 code 變便宜：Figma 工程師拆解 design-to-code 新工作流

過去設計師快、工程師慢。畫 50 個靜態 frame 不貴，寫 5 行能跑的 code 才是奢侈。

Alex Kern 跟 Gui Seiz——Figma 一個 AI 軟體工程師、一個 AI 設計總監——在 Story Studio 新訪談裡直接說 AI 把這條軸線倒過來了。Code 變成創作媒材，設計師可以跳過 50 個 mockup，做一個能跑的 functional wireframe，從「行為」迭代而非從「版面」迭代。

這篇拆解他們對 design-to-code 新工作流的六個觀察：成本反轉、bidirectional 思考、學習曲線、curiosity 差異化、semantic translation、模型沒有時間感。

§1：當 code 比 mockup 還便宜

Gui 描述的轉變最有畫面感：「過去 code 很貴——複雜、繁瑣、難改。design exploration 對比起來反而便宜。你可以拉很開、動很快、再慢慢收斂。AI 把這個動態倒過來了。」

倒過來的意思是：與其畫 50 個靜態 frame，你直接做一個 functional wireframe，從行為迭代——點下去會怎麼動、資料怎麼帶、不同 state 怎麼切。靜態 frame 騙得到自己，拿給 PM 看才發現流程有洞；行為原型一開始就逼你想清楚。

Gui 補了一句更白的觀察——歷史上把 code 帶進設計流程很 tedious，要同步 codebase、維持結構一致、對齊兩邊決策。AI 把這層 friction 拆掉了。模型現在可以把 code 當成創作媒材在處理。

§2：bidirectional 才是真正的解鎖

Alex 講 code 的侷限很精準：「Code 適合 single-player 環境，你朝一個方向一直走。但如果想探索一個非常不同的方向，模型會傾向 codebase 裡已經存在的東西。那會限制你。」

Figma 把這個 lock-in 拆掉了。Canvas 變成可以橫向跳的地方——把 production code 拉進 Figma 變成可編輯 frame，邊改邊看 code 怎麼跟著動。Gui 補一句更白：「沒有 design system 權限的人，也可以把 live product 拉進 Figma 開始改稿。有時候 shift 其實在 access，沒那麼 philosophical。」

對轉職設計師很關鍵的一句：barrier to entry 變低了。以前要先拿到內部 design system 才能參與，現在直接從正在跑的 product 開始拆。

§3：學習曲線變成坡道

「過去學新東西是 big learning curve。AI 讓它變成 ramp。」

Alex 說自己以前上過好多 code bootcamp，沒一個 click——「都是抽象的」。現在工作裡碰到問題就問 AI「在我正在做的這個東西的脈絡下解釋給我聽」。

具體脈絡讓抽象知識落地。Alex 說他現在會碰 shader、做 3D、寫自己的工具：「以前我連想都不會想。」這對轉職設計師最有用——學 React、學 prototyping、學 design-to-code，從你手上正在做的真實任務切入，先建立 baseline，要往深處走再說。

§4：curiosity 跟 taste 一樣，是新的差異化

「Curiosity，跟 taste 一樣，會是真正的 differentiator。」

Gui 把這句放在訪談中段，但它是整篇最值得抄下來的觀點。當所有人都拿到同一套 AI 工具、AI 對你越像 patient tutor，你跟別人的差別就越不在「會不會用工具」，而在「願不願意往一個你以前不敢碰的方向延伸」。

Gui 接著畫一個未來的 picture——軟體會更靠設計來區隔自己，不再是把過去 carbon copy 一份；資料視覺化、即時意圖辨識、generative UI、ephemeral tools、隨手叫的 on-demand compute——技術已經到位，缺的是「有觀點的創作者」來定義下一步長什麼樣。

§5：semantic translation，而非 mechanical translation

Alex 從工程角度補的觀察最容易被忽略：「過去 design translation 是非常 mechanical、tedious、容易出錯的——AI 讓這個翻譯變得更 semantic。」

Code 的生命週期是幾年、幾十年。messy code 是長期問題——所以工程師眼中能跑的 code 只是起點，真正在乎的是 ergonomic code：讀得懂、改得動、能交接給下一個工程師。設計工具現在能做到「把 design intent 翻譯成符合 codebase 慣例的結構」，這個 semantic 翻譯能力，才是 design-to-code workflow 真正的解鎖點。

對設計師的意思是：你交給工程師的東西換了——從「最終視覺」變成「結構意圖」。這份意圖在 AI 翻譯下會變成 component、props、state 結構，工程師接到的是「跟我們 codebase 對得起來的骨架」，不再是一張 PNG。

§6：模型沒有時間感

整篇訪談最有畫面感的細節在末尾。Alex 描述跟 Claude Code 互動的一幕：

「Claude Code 會給我一個三個月的估期。我跟它說——『不，你五分鐘做完。』」

模型沒有時間感——這對工程節奏的衝擊比聽起來深。當 agent 可以五分鐘做完原本三個月的事，「估期」這個動作本身就被廢掉了。Alex 的原話：「現在沒人在估期了。你直接試。所以問題從『這要多久』變成『我們想做什麼』。」

對設計師也一樣。當生原型只剩五分鐘成本，你的選題能力跟方向感變成主要瓶頸，執行速度反而退到後面。

整體觀察

訪談裡 Alex 跟 Gui 反覆繞回同一個問題：工作的 unit 在變。

以前設計師交付 mockup、工程師交付 code、PM 交付 spec——三個角色拿各自的 artifact 開會討論。當 design-to-code loop 雙向打通，artifact 變成同一個東西的不同切片：canvas 是它的視覺面、code 是它的執行面、agent 在中間翻譯。

對轉職設計師最直接的訊息：學 Figma 早就不該停在「畫得出畫面」，要練的是「把設計意圖寫成 AI 跟工程師都讀得懂的結構」。Auto Layout 的層級紀律、component property 的命名、design tokens 的維護——這些原本算「進階技能」的東西，正在變成這個 loop 裡的基本門檻。