1. 為什么“從白稿開始”是改版效率的最大陷阱做過中后臺系統(tǒng)改版的人大概都有這種經(jīng)歷產(chǎn)品經(jīng)理丟過來一句“這個頁面太舊了重新設(shè)計一版”然后設(shè)計師打開 Figma新建一個 1440 寬的 Frame從零開始擺導(dǎo)航、擺表格、擺按鈕。三天后交稿開發(fā)一看說“這個布局跟我們現(xiàn)在的組件庫對不上”于是又改兩天。最后上線時發(fā)現(xiàn)真正被用戶感知到的變化可能只有配色和圓角。問題出在哪出在起點選錯了?！鞍赘濉敝傅氖峭耆瞻椎漠嫴紱]有任何現(xiàn)有界面的約束。從白稿開始做改版本質(zhì)上是在做一次“重新發(fā)明”而不是“重新設(shè)計”。重新發(fā)明的問題在于你會不自覺地按照理想狀態(tài)去畫而不是按照系統(tǒng)實際運行的狀態(tài)去畫。理想狀態(tài)下的表格列寬是均勻的實際運行中某一列因為數(shù)據(jù)太長被撐開了理想狀態(tài)下的彈窗是居中的實際運行中因為父容器 overflow 設(shè)置不對彈窗被裁掉了一半。這些差異白稿里全都看不見。所以我的做法是反過來的改版的第一步不是打開 Figma而是把當(dāng)前正在運行的界面“帶回去”。帶回去的方式有很多種截圖是最基礎(chǔ)的但截圖是靜態(tài)的、扁平的丟失了層級關(guān)系和交互狀態(tài)。更好的方式是用工具把運行界面的 DOM 結(jié)構(gòu)、樣式、甚至組件樹抓下來轉(zhuǎn)成 Figma 可以識別的圖層。這就是標(biāo)題里說的“先把運行界面帶回去”的真正含義。它不是讓你把截圖貼進 Figma 當(dāng)參考圖而是讓運行界面成為設(shè)計稿的基底。你在真實結(jié)構(gòu)上做修改而不是在空白畫布上做想象。這個思路的轉(zhuǎn)變帶來的效率差異是數(shù)量級的。我做過一個對比同一個列表頁改版從白稿開始平均需要 2.5 天出第一版可評審稿從運行界面導(dǎo)入開始只需要 0.5 天。省下來的時間不是偷懶省出來的是因為你不需要再畫一遍已經(jīng)存在的東西。注意這里說的“帶回去”不是讓你照抄現(xiàn)有界面?，F(xiàn)有界面是起點不是終點。你要做的是在真實結(jié)構(gòu)上做減法、做重組、做視覺升級而不是從零搭建一個看起來很像但結(jié)構(gòu)完全不同的東西。2. 把運行界面搬進 Figma 的三種路徑與選型邏輯“把運行界面帶回去”這句話說起來簡單但具體怎么帶有不同的技術(shù)路徑。我實際用過的主要有三種各有各的適用場景和坑。2.1 截圖 手動描摹最笨但最可控這是最原始的方式截一張運行界面的圖拖進 Figma降低透明度然后在上面手動描圖層。聽起來很蠢但它在某些場景下反而是最優(yōu)解。什么時候用當(dāng)運行界面的結(jié)構(gòu)極其復(fù)雜但你需要改動的部分很局部的時候。比如一個數(shù)據(jù)看板上面有十幾個圖表組件你只想改頂部的篩選欄。這時候用工具把整個頁面導(dǎo)入 Figma反而會帶來大量無用的圖層拖慢文件性能。截圖描摹只針對你要改的區(qū)域干凈利落。手動描摹的關(guān)鍵技巧是不要描得太細。你是在做設(shè)計稿不是在復(fù)刻像素。把主要的容器邊界、間距關(guān)系、層級關(guān)系描出來就夠了。文字內(nèi)容可以直接用截圖上的不需要重新打字。這種方式的問題也很明顯不可復(fù)用。下次改另一個頁面你得重新描一遍。所以它只適合一次性、局部性的改版任務(wù)。2.2 瀏覽器插件導(dǎo)出速度最快但結(jié)構(gòu)會失真市面上有一些瀏覽器插件可以把當(dāng)前頁面的 DOM 結(jié)構(gòu)導(dǎo)出成 Figma 文件。原理大概是遍歷 DOM 節(jié)點讀取計算樣式然后生成對應(yīng)的 Figma 圖層。我用過幾個導(dǎo)出速度確實快點一下按鈕幾秒鐘就能在 Figma 里看到頁面結(jié)構(gòu)。但問題在于“結(jié)構(gòu)會失真”。DOM 是嵌套的Figma 的圖層也是嵌套的理論上可以一一對應(yīng)。但實際上CSS 的布局模型flex、grid、absolute和 Figma 的自動布局Auto Layout并不是完美映射的。一個用 flex 實現(xiàn)的水平排列導(dǎo)出后可能變成一堆絕對定位的圖層你一動就全亂了。還有一個更隱蔽的問題偽元素和背景圖。很多界面的裝飾性元素是用::before、::after或者background-image實現(xiàn)的這些在 DOM 遍歷中往往會被忽略或者處理不當(dāng)。導(dǎo)出后的 Figma 文件看起來“少了點什么”但你一時半會兒說不清楚少了什么。所以這類工具適合什么場景適合結(jié)構(gòu)簡單、以文本和基礎(chǔ)容器為主的頁面。比如一個設(shè)置表單頁全是 label input 的垂直排列導(dǎo)出效果就很好。但如果是復(fù)雜的儀表盤或者帶有大量自定義繪制的頁面導(dǎo)出結(jié)果基本沒法直接用。2.3 設(shè)計系統(tǒng)反向映射最理想但前提是你有設(shè)計系統(tǒng)這是最理想的方式如果你的項目已經(jīng)有一套完整的設(shè)計系統(tǒng)組件庫 設(shè)計令牌那么運行界面上的每一個元素都可以反向映射到設(shè)計系統(tǒng)里的組件。你不需要導(dǎo)出圖層你只需要知道“這個頁面用了哪些組件、哪些變體、哪些令牌”然后在 Figma 里用對應(yīng)的組件重新拼裝一遍。這種方式的好處是產(chǎn)出的設(shè)計稿天然與代碼實現(xiàn)對齊。開發(fā)看到設(shè)計稿直接就能對應(yīng)到組件庫里的組件不需要再做“翻譯”。而且因為用的是組件實例改起來也快改一個主組件所有實例同步更新。但它的前提條件很苛刻你得有設(shè)計系統(tǒng)而且設(shè)計系統(tǒng)和代碼實現(xiàn)得是同步的。很多團隊號稱有設(shè)計系統(tǒng)但實際上 Figma 里的組件庫和代碼里的組件庫是兩套東西各走各的。這種情況下反向映射就無從談起。我的建議是如果你所在團隊有維護良好的設(shè)計系統(tǒng)優(yōu)先用這種方式。如果沒有先用第二種方式快速導(dǎo)入然后在 Figma 里手動把關(guān)鍵組件替換成設(shè)計系統(tǒng)里的組件。這個過程雖然麻煩但一次投入后續(xù)所有頁面改版都能受益。路徑適用場景速度結(jié)構(gòu)保真度可復(fù)用性截圖描摹局部改版、復(fù)雜頁面慢高人工控制低插件導(dǎo)出簡單頁面、快速原型快中低中設(shè)計系統(tǒng)映射有成熟設(shè)計系統(tǒng)的團隊中高高3. 運行界面導(dǎo)入后的圖層清理與結(jié)構(gòu)重建不管你用哪種方式把運行界面帶進 Figma導(dǎo)入后的第一件事都不是開始設(shè)計而是清理圖層。這一步很多人會跳過覺得“反正能看就行”但后面會吃大虧。3.1 為什么導(dǎo)入后的圖層必須清理插件導(dǎo)出的圖層結(jié)構(gòu)反映的是 DOM 的嵌套關(guān)系而不是設(shè)計的邏輯關(guān)系。DOM 里為了布局方便會加很多無意義的包裹層。比如一個按鈕DOM 結(jié)構(gòu)可能是div div button span導(dǎo)出到 Figma 就變成四個嵌套的 Frame但實際上你在設(shè)計時只需要一個按鈕組件。這些多余的嵌套層會帶來三個問題第一文件體積膨脹打開和操作變卡第二自動布局難以應(yīng)用因為層級太深第三開發(fā)看設(shè)計稿時會被誤導(dǎo)以為需要那么多層嵌套。清理的原則很簡單合并視覺上無差別的圖層刪除純布局用的空容器把語義相關(guān)的元素歸組。具體操作上我會按這個順序走先看最外層把頁面級的容器保留刪除多余的 wrapper。再看每個區(qū)塊把區(qū)塊內(nèi)的元素按功能分組比如“搜索區(qū)”“表格區(qū)”“分頁區(qū)”。最后看單個組件把組件的內(nèi)部結(jié)構(gòu)簡化到最小必要層級。這個過程大概會花掉 10 到 15 分鐘但后續(xù)所有操作都會因此順暢很多。3.2 用命名規(guī)范把“運行結(jié)構(gòu)”翻譯成“設(shè)計結(jié)構(gòu)”清理完圖層之后下一步是重命名。導(dǎo)入的圖層名字通常是Frame 123、Group 456這種完全不可讀。你需要把它們改成有語義的名字。命名規(guī)范我建議直接用設(shè)計系統(tǒng)里的組件名。比如Button/Primary/Default、Input/Text/Default、Table/Header/Cell。這樣做的好處是當(dāng)開發(fā)拿到設(shè)計稿時看到圖層名就知道對應(yīng)哪個組件減少溝通成本。如果團隊沒有設(shè)計系統(tǒng)命名規(guī)范那就用最直白的業(yè)務(wù)命名搜索欄、數(shù)據(jù)表格、操作按鈕組。關(guān)鍵是一致同一個東西在所有頁面里叫同一個名字。提示Figma 的“重命名圖層”功能支持批量操作。選中多個圖層按CmdRMac或CtrlRWindows可以用正則表達式批量替換名字。比如把所有Frame前綴去掉或者把Group統(tǒng)一改成Section。3.3 把靜態(tài)圖層轉(zhuǎn)成自動布局的時機判斷自動布局是 Figma 里最核心的功能之一但并不是所有圖層都適合立刻轉(zhuǎn)成自動布局。我的經(jīng)驗是先清理和命名再考慮自動布局。因為自動布局會改變圖層的父子關(guān)系和排列方式如果在圖層還很亂的時候強行轉(zhuǎn)只會更亂。判斷一個區(qū)塊是否適合轉(zhuǎn)自動布局看兩個條件第一這個區(qū)塊內(nèi)的元素是否有明確的排列方向水平或垂直第二這個區(qū)塊是否需要響應(yīng)式伸縮。如果兩個條件都滿足那就轉(zhuǎn)。如果只是固定尺寸的裝飾性元素保持絕對定位反而更簡單。轉(zhuǎn)自動布局的時候注意間距的設(shè)置。導(dǎo)入的圖層間距往往是靠 margin 或 padding 實現(xiàn)的轉(zhuǎn)成自動布局后要用 Auto Layout 的 gap 和 padding 來還原。這里有個小技巧先用截圖量一下實際間距然后在 Figma 里設(shè)置對應(yīng)的數(shù)值。不要憑感覺設(shè)憑感覺設(shè)出來的間距開發(fā)實現(xiàn)時會對不上。4. 在真實結(jié)構(gòu)上做改版的實操節(jié)奏把運行界面帶回來、清理好、命名好之后才真正進入“改版”環(huán)節(jié)。這時候你的畫布上是一個結(jié)構(gòu)清晰、命名規(guī)范、與線上實現(xiàn)對齊的基底。在這個基底上做修改和從白稿開始做修改體驗完全不同。4.1 先做減法刪掉不需要的元素改版最容易犯的錯誤是“只加不減”。看到舊界面覺得這個也要保留那個也要保留最后改出來的東西比原來還臃腫。正確的做法是先做減法。具體怎么減我會問三個問題這個元素用戶真的需要嗎這個元素的信息能否合并到其他地方這個元素刪掉后用戶完成任務(wù)會不會受阻如果三個問題的答案分別是“不確定”“能”“不會”那就刪。比如一個后臺列表頁頂部有六個篩選條件。實際上根據(jù)數(shù)據(jù)80% 的用戶只用其中兩個。那改版時就可以把另外四個收進“高級篩選”里默認只展示兩個。這就是減法。減法的好處是頁面變清爽了剩下的元素有更多呼吸空間視覺升級也更容易做出效果。而且刪元素比加元素的風(fēng)險低因為刪掉的東西如果用戶真的需要反饋會很快上來加回去也容易。4.2 再做重組調(diào)整信息層級和操作路徑減法做完之后剩下的元素需要重新組織。重組的目標(biāo)是讓信息層級更清晰操作路徑更短。信息層級方面我會用“三秒測試”把設(shè)計稿給一個沒用過這個系統(tǒng)的人看三秒然后問他“這個頁面是干什么的”“最重要的信息是什么”“下一步該點哪里”。如果答不上來說明層級有問題。操作路徑方面核心原則是“高頻操作前置低頻操作后置”。比如一個訂單管理頁面最常用的操作是“查看詳情”和“發(fā)貨”那這兩個按鈕就應(yīng)該放在列表項最顯眼的位置而不是藏在“更多”菜單里。重組的時候可以借助 Figma 的“內(nèi)容比例”功能來測試不同屏幕寬度下的表現(xiàn)。把 Frame 拉寬拉窄看布局是否還能保持合理。這一步能提前發(fā)現(xiàn)很多響應(yīng)式問題避免開發(fā)階段再返工。4.3 最后做視覺配色、間距、圓角的統(tǒng)一升級視覺升級是改版里最直觀的部分但也是最容易做過頭的地方。我的建議是視覺改動要有節(jié)制一次只改一個維度。比如這次改版只調(diào)間距體系把所有間距統(tǒng)一到 4 的倍數(shù)4、8、12、16、24、32。下次改版只調(diào)圓角把按鈕、卡片、輸入框的圓角統(tǒng)一到一套值。再下次調(diào)配色把主色、輔助色、語義色重新定義。為什么不要一次全改因為一次全改你無法判斷哪個改動帶來了正面效果哪個改動帶來了負面反饋。而且全改的工作量巨大評審時也很難聚焦。如果非要一次全改那就用設(shè)計令牌Design Token來管理。在 Figma 里用 Variables 定義好顏色、間距、圓角的令牌然后批量應(yīng)用到所有圖層。這樣改一個令牌值所有引用它的地方同步更新。這是目前效率最高的視覺升級方式。5. 從 Figma 到代碼讓改版稿真正可落地設(shè)計稿做得再漂亮如果開發(fā)實現(xiàn)不出來或者實現(xiàn)出來走樣那改版就是失敗的。所以從 Figma 到代碼的銜接必須在設(shè)計階段就考慮進去。5.1 標(biāo)注不是萬能藥結(jié)構(gòu)對齊才是關(guān)鍵很多設(shè)計師習(xí)慣在交付時寫一大堆標(biāo)注這里間距 16px那里字號 14px這個按鈕圓角 8px。但開發(fā)真正需要的不是這些數(shù)值而是結(jié)構(gòu)對應(yīng)關(guān)系。什么意思開發(fā)看到設(shè)計稿第一反應(yīng)是“這個頁面由哪些組件組成”。如果設(shè)計稿里的組件和代碼里的組件能一一對應(yīng)開發(fā)實現(xiàn)起來就很快。如果設(shè)計稿里是一個自定義的復(fù)雜布局代碼里沒有對應(yīng)的組件開發(fā)就得從頭寫這時候標(biāo)注再詳細也沒用。所以我在做改版稿的時候會盡量使用設(shè)計系統(tǒng)里的組件實例。如果某個地方必須自定義我會在設(shè)計稿里明確標(biāo)注“此區(qū)域為自定義布局建議實現(xiàn)方式為……”。這個建議不是命令而是給開發(fā)一個參考減少他們的決策成本。5.2 用 Figma 的 Dev Mode 減少溝通損耗Figma 的 Dev Mode 是近幾年對開發(fā)最友好的功能之一。它可以把設(shè)計稿里的圖層直接映射到代碼片段顯示間距、顏色、字體等屬性的具體值還支持導(dǎo)出資源。但 Dev Mode 的效果取決于設(shè)計稿的規(guī)范程度。如果圖層命名混亂、結(jié)構(gòu)嵌套過深、用了大量自定義樣式Dev Mode 給出的代碼片段也是混亂的。反過來如果設(shè)計稿結(jié)構(gòu)清晰、命名規(guī)范、使用了設(shè)計令牌Dev Mode 就能給出接近可直接使用的代碼。我實測下來的經(jīng)驗是在設(shè)計階段就把 Dev Mode 的預(yù)覽打開一邊設(shè)計一邊看它給出的代碼提示。如果發(fā)現(xiàn)某個地方的代碼提示很離譜說明設(shè)計稿的結(jié)構(gòu)有問題當(dāng)場調(diào)整。這樣交付時開發(fā)拿到的就是一份“代碼友好”的設(shè)計稿。5.3 改版上線后的驗證用真實數(shù)據(jù)反哺下一輪設(shè)計改版上線不是終點。上線后一周我會做一次數(shù)據(jù)驗證對比改版前后的關(guān)鍵指標(biāo)比如任務(wù)完成率、平均操作時長、錯誤率、用戶反饋。這些數(shù)據(jù)會直接反哺下一輪設(shè)計。比如發(fā)現(xiàn)某個按鈕的點擊率遠低于預(yù)期可能是位置不對或者文案不清晰發(fā)現(xiàn)某個頁面的跳出率很高可能是信息層級有問題。更重要的是這些數(shù)據(jù)會告訴你“哪些改動是有效的”。有效的改動可以沉淀到設(shè)計系統(tǒng)里成為后續(xù)改版的默認選項。無效的改動則記錄下來避免下次再犯。這個閉環(huán)一旦建立起來改版就不再是“拍腦袋想出來的”而是“有數(shù)據(jù)支撐的迭代”。從運行界面帶回來在真實結(jié)構(gòu)上改用真實數(shù)據(jù)驗證這才是一個完整的改版循環(huán)。6. 幾個容易踩的坑和我的處理方式最后分享幾個我在實際項目中踩過的坑以及后來怎么處理的。第一個坑導(dǎo)入的圖層太多Figma 文件卡到無法操作。處理方式是分批次導(dǎo)入不要一次性把整個頁面導(dǎo)進來。先導(dǎo)你要改的區(qū)域改完再導(dǎo)下一塊。另外導(dǎo)入后立刻把不需要的圖層刪掉不要留著“以后可能用得上”。Figma 文件超過 5000 個圖層就會明顯變卡控制圖層數(shù)量是保持流暢的關(guān)鍵。第二個坑設(shè)計稿和線上實現(xiàn)不一致開發(fā)說“這個效果實現(xiàn)不了”。處理方式是在設(shè)計階段就用真實數(shù)據(jù)填充。Figma 支持通過插件填充真實數(shù)據(jù)比如用真實的用戶名、訂單號、金額來替換占位符。這樣你能提前看到極端情況下的表現(xiàn)比如超長文本會不會撐破布局大數(shù)字會不會換行。提前發(fā)現(xiàn)提前調(diào)整。第三個坑改版后用戶不買賬說“還是舊版好用”。處理方式是保留舊版入口給用戶一個過渡期。同時在改版上線時用引導(dǎo)提示告訴用戶“哪些地方變了為什么變”。用戶抵觸往往不是因為新版不好而是因為不習(xí)慣。給一點適應(yīng)時間配合清晰的引導(dǎo)抵觸會小很多。第四個坑設(shè)計系統(tǒng)組件和實際需求不匹配強行用組件導(dǎo)致設(shè)計受限。處理方式是允許“合理的例外”。設(shè)計系統(tǒng)是工具不是枷鎖。如果某個場景確實需要自定義組件那就自定義但要在設(shè)計稿里標(biāo)注清楚并考慮是否值得把這個自定義組件沉淀到設(shè)計系統(tǒng)里。設(shè)計系統(tǒng)本身也需要迭代。這些坑的共同點是它們都不是技術(shù)問題而是流程和協(xié)作問題。把運行界面帶回來本質(zhì)上也是在解決流程問題——讓設(shè)計從真實出發(fā)而不是從想象出發(fā)。這個思路一旦建立起來改版的效率和質(zhì)量都會有明顯的提升。