好想被顧客記住？UIUX 設計師幫你打造無可取代的記憶點！(下)
2023 年 8 月 10 日
給設計師和工程師的 Figma – Dev Mode 開發模式使用指南(下)
2023 年 8 月 21 日
(2024最新版) 給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (上)
身為工程師，除了精進開發技術、學習新框架、看更多的範例、刷更多的題，為了與其他團隊成員有效合作，也需要學習使用其他協作軟體，例如 Trello, Notion。 而如果是要跟設計師合作，目前最主要的就是使用 Figma了！
Figma 是現在最主流的 UIUX 設計軟體，自從開創了「協作功能」之後，幾乎就是把 Adobe XD 和 Sketch 遠遠甩在後頭！
Figma 在 2023 年有一個重大改版，除了設計模式新增加了 Variable，對於工程端來說，更是直接創立一個開發模式 (Dev Mode)。開發模式整合了舊有的 Inspect 面板、增加設計修改歷史紀錄 (類似 Github)、可同時瀏覽一個元件的不同樣式 (不會動到設計稿)、可加入其他開發軟體/協作軟體的連結、可以使用工程端的 Plugin 等等，目的當然就是為了讓設計師與工程師的合作更加無縫接軌～
本篇文章的主要目的，就是介紹給工程端開發用的開發模式，也會提到一些 Figma 在設計模式中的邏輯 。
Figma 官方公布 2023 年可以免費使用開發模式 (順便請大家一起 debug)，但 2024 年就要開始收費了！(官方已於 2024 年 1 月宣布，免費試用至 2024 年 1 月底，2 月起開始收費)
開發模式 (Dev Mode) 亮點整理
以下列出幾個這次更新很厲害的功能！
亮點一：可以看到設計組件裡使用到的元件、色碼、屬性，游標移上去可以複製 code
(下方圖片點擊可放大)
亮點二：選擇第一層圖層，若裡面的設計有改變過，可查看前後設計差異
詳細介紹在「右側面板教學 → Inspect → Layer name」
(下方圖片點擊可放大)
亮點三：狀態改成「Ready for development」的設計稿，可追蹤最近修改時間
詳細介紹在「左側面板教學 → Ready for development」
亮點四：可以針對每一個物件，添加開發資源連結
詳細介紹在「右側面板教學 → Inspect → Dev resources」
亮點五：可以一次性看到所有相似的設計元件，且不會更動到設計稿
詳細介紹在「右側面板教學 → Inspect → Props」
亮點六：開發端專用的 Plugins
詳細介紹在「右側面板教學 → Inspect → Plugins」
Figma 使用權限
我們簡單把使用權限分成「訪客權限、開發權限、免費設計權限、完整設計權限」。
若設計師使用付費版的 「完整設計權限」 ，則可同時使用「設計模式＋開發模式」。
另外，在開發模式釋出 beta 版之前，「Inspect」是在設計模式中就看得到的功能。後來出現開發模式，官方就把「Inspect」移到開發模式中。對使用者沒什麼很大的改變，反正還是可以用。
但現在開發模式需要收費，所以不付費就看不到 Inspect 面板了。
使用權限表
以下是目前 Figma 官方制定的權限，未來有可能還會有變動。 相關原文可參考：Dev Mode Guide
模式切換
一般而言進入 Figma，預設都是「設計模式」，點擊右上方的 switch，即可切換成「開發模式」。
如果你的權限沒有支付開方模式費用，點擊 switch 後可能跳出視窗，要求你支付費用。若是你的權限是由管理者給予，則可以有 14 天的適用期。
後面有關於「14天適用期」更詳細的說明。
以下以工程師的視角描述兩個模式的主要功能分類：
- 設計模式 (Design Mode)
- 主色是藍色
- 網址內的參數包含“mode=design”
- 左側面板有 Search, Pages, Layers
- 右側面板可切換 Comment, Properties, Export
- 開發模式 (Dev Mode)
- 主色是綠色
- 網址內的參數包含“mode=dev”
- 左側面板預設有 Search, Pages, Ready for development, Layers
- 右側面板可切換 Inspect, Plugins
- 點擊左上方的對話 icon，會於右側面板開啟 Comment
開發模式 (Dev Mode) 費用
根據官方資料，目前的開發模式費用：
- 公司方案 (Organization plan) 每月一個使用帳戶收費 25 美金
- 大型企業方案 (Enterprise plan) 每月一個使用帳戶收費 35 美金
收費標準可能還會變動，可隨時瀏覽官網資訊：Figma beta features
付費的設計師帳戶，兩個模式（設計模式加開發模式）都可以使用，價格比工程師帳戶高上許多。
免費的設計師帳戶，就有比較多限制。
- 入門方案 (Starter plan) 免費，設計模式有限制，且不能使用開發模式
- 專業方案 (Professional plan) 每月收費 12 美金
- 公司方案 (Organization plan) 每月收費 45 美金
- 大型企業方案 (Enterprise plan) 每月收費 75 美金
設計師帳戶的收費標準，可以參考這裡：Design and Dev Mode
原本不用付錢的功能，現在突然要收費，應該覺得荷包很痛吧！
也有些潛在使用者覺得，不知道有多好欸，可以先試用再決定要不要付費嗎？
官方其實有提供一個緩衝機制，就是「14天的開發模式適用期/緩衝期」。
可能情境如下：
- 你是工程師，不知道開發模式好不好用，想試用看看。
- 向檔案管理者提出申請，獲得 14 天的免費試用期
- (合理猜測管理者一直沒有按同意，就可以免費用 14 天 XD) - 你是工程師，已經在用開發模式，原本不用收費，現在要收費了，沒即時支付害怕檔案開不了
- 自動獲得 14 天的緩衝期。檔案管理者必須在 14 天內支付開發模式費用。 - 你是設計師，目前是免費的設計權限，想使用看看開發模式
- 必須升級該檔案為專業方案/公司方案/大型企業方案，也就是說檔案管理者本人如果本來就是用免費設計權限，就無法免費享有 14 天的適用期。 - 你是設計師，使用付費的設計權限
- 對你來說完全沒有影響，繼續使用即可～
雖然有「14 天的適用期/緩衝期」，但一個設計檔案，Figma 費用是「每月」按照帳戶數量計算，所以不能輕易的 14 天後換另一個帳戶繼續免費試用。
如果想省錢，體感上最好的方法是購買工程師共用的開發模式帳戶，但壞處就是無法判斷實際的使用者是哪一位，討論設計時可能會找不到實際負責的工程師QQ
開發模式 (Dev Mode) 左側面板教學
左側面板的內容，比舊版本多了一個主分類「Ready for Development」，其他功能都和原本的一樣。
以下依照左側面板的排版，由上至下依序說明：
1. Search (搜尋功能)
Figma 於 2022 年 10 月增加搜尋功能，只要在左側面板最上方的搜尋框內輸入關鍵字，就會找出該設計檔案中，包含該關鍵字的所有圖層、元件、文本。
2. Pages (頁面)
- 列出該設計檔案中的所有頁面。下方的 “Ready for development (準備開發)” 和 “Layers (圖層)” 內容，會根據選擇到的頁面而自動切換。
- 有些設計師在命名頁面時，會根據功能、日期、狀態等方式命名，有時也會加上一些 emoji ，讓工程師快速知道每個頁面的狀態和內容。
- 目前頁面沒有收合功能，所以每一頁都是獨立存在，沒有隸屬關係。有些設計師會為了在視覺上有階層的感覺，而在名稱前面加上空格、符號、底線等。
- 如果該頁面內有包含「準備開發」 狀態的設計稿，系統會自動在頁面的名稱前面加上一個綠色的開發 icon。且預設不會展開圖層，需手動展開。
- 若該頁面內沒有包含「準備開發」 狀態的設計稿，則圖層預設展開。
3. Ready for development (準備開發)
- 這個分類是開發模式的新功能，但不是每個設計檔案都會有。「準備開發」區塊內有沒有內容，取決於設計師在設計模式中，有沒有把設計稿改成 “Ready for development” 狀態。
- 如果設計師有切換狀態，那就會在這個區塊內出現，並會顯示該設計稿最近的更新時間。工程師就可以追蹤更新時間，知道哪個設計稿有進行更新。
- 不論設計師有沒有把設計稿切換成 “Ready for development” 狀態，工程師都看得到設計稿，這不影響工程師的開發，只是就看不到修改的時間紀錄。
- 設計師可以隨時開啟或關閉設計稿的 “Ready for development” 狀態，但工程師無法操作。
- 如果設計師想切換狀態，但做不到，工程師可以很 nice 的跟設計師說：請把你的設計稿用 Section 包起來，就可以切換囉！（後面再介紹 Section 是什麼東西）
- 點擊 「準備開發」區塊內的任何一個設計稿，下方的圖層會自動展開，且工作區會自動移動至該設計稿的位置。
4. Layers (圖層)
- 根據上方選擇到的頁面，顯示該頁面裡的第一層圖層。
- 若點擊「準備開發」裡的設計稿，則只會展開該設計稿的第一層圖層。
- 如果是圖片，會在圖片名稱旁邊直接顯示該圖片的尺寸
- 點擊任何一個圖層，工作區會自動移動至你選擇的圖層位置。
(下方圖片點擊可放大)
Figma 物件符號教學
工程師一定會覺得 Layers (圖層) 裡的物件符號沒有什麼好學的吧？ 但你是否有曾經疑惑過，為什麼設計稿裡的物件，前面的符號有這麼多種？
就好像開發上會使用 Emmet 來加快程式碼的編寫速度，設計上則是會用很多視覺上的小符號，來代表不同的功能與邏輯。 看到這些符號，就可以知道這些物件是什麼屬性、在開發上有什麼差異，對於後續講解右側面板時也很有幫助！
(下方圖片點擊可放大)
上述所有物件，不論是什麼類型，都可以於右側面板選擇尺寸倍數和副檔名後輸出圖片檔或 PDF。
Component 特別說明
Component 如果用程式碼譬喻，就像是你寫一個 function，然後可以重複呼叫多次，只要 function 有修改，其他用到 function 的地方就會同步修改一樣。
所以最初的 function，就可以視為母組件，物件符號是四個實心紫色菱形 
，英文是 Main component。
母組件可以被複製出無數個子組件使用，只要母組件有修改，子組件就會同步變動。
但除了 Main component 之外，還有一種 Component，可以視為母組件的各種變體，物件符號也是四個實心紫色菱形 ，英文是 Component set。 例如工程師一定看過按鈕有填滿、只有邊框、有無icon、icon在左邊或右邊、有無加底線……之類的不同樣式，這些看起來很像，但都有些微差異的設計，在設計系統中就會被設定成 Component set。 假設 Component set 中有三種按鈕，分別是藍色填滿、藍色邊框、無邊框等三種設計。設計師可以複製出任何一個按鈕當成子元件，然後這個子元件就可以任意改成「藍色填滿、藍色邊框、無邊框」等三種設計。
在 Component set 之中的所有母組件變體，物件符號是一個實心紫色菱形 
，英文是 Varient。
最後就是子組件了，不論是從 Main component 或是 Component set 複製的子組件，物件符號都是一個空心紫色菱形 
，英文是 Component instance。
有了以上的知識，下面講到開發模式的右側面板裡的 Props 區塊時，你就知道為什麼有的子組件有 “Open in playground” 可以點擊，有的子組件卻沒有。
因為只有從 Component set 來的子組件，才能使用「Open in playground」看其他樣式的設計。
(下方圖片點擊可放大)
* 封面照片取自 Figma blog
拍拍設計有著多年設計實戰經驗
從 0 到 1 的產品上市開發，或是從 1 到 100 分的產品迭代過程，讓我們助你一臂之力！！
