Embedded Files
可點擊按鈕，前往瀏覽本單元練習檔案
單元介紹
單元介紹
概述
概述
本單元分享關於設計稿管理與交付技巧，雖然每個團隊都可能有自己的獨特管理模式，不過許多團隊都可能會使用到本單元所規劃的五項實作，分別是：「設計稿管理技巧」、「建立 UI Flow 全覽圖」、「進行資訊標注」、「多人共編」、「切版與輸出」；期許相關技巧能夠引導團隊中的設計師、工程師、或是相關專案成員，透過 Figma 建構良好的溝通與設計環境。
重點學習技巧
重點學習技巧
技巧一：熟悉 Figma 建構 UI-Flow 的技巧
技巧二：檢視、回朔、命名歷史修訂紀錄
技巧三：透過 Figma 進行設計協作
技巧四：檢視元件的程式碼（CSS、iOS、Android）
技巧五：進行物件資訊標注（Annotation）
技巧六：透過 Figma 切版與輸出
單元實作範例
單元實作範例
實作1：設計稿管理技巧練習（練習設計稿物件整理、版本回朔、群組管理等）
實作1：設計稿管理技巧練習（練習設計稿物件整理、版本回朔、群組管理等）
ps. Figma 可以回朔到自動儲存的任一時間點之版本（來源：https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history）
實作2：建立 UI Flow 全覽圖（透過 Autoflow 工具，拉出整體 UI 架構圖）
實作2：建立 UI Flow 全覽圖（透過 Autoflow 工具，拉出整體 UI 架構圖）
實作3：標註與檢視物件屬性（CSS / iOS / Android Code）
實作3：標註與檢視物件屬性（CSS / iOS / Android Code）
圖：自動進行設計稿標記
圖：檢視程式碼
實作4：進行多人共編（包括非同步溝通、分享等）
實作4：進行多人共編（包括非同步溝通、分享等）
實作5：用 Figma 切版與輸出（可輸出不同解析度的 PNG / JPG / SVG / PDF 等格式圖片）
實作5：用 Figma 切版與輸出（可輸出不同解析度的 PNG / JPG / SVG / PDF 等格式圖片）
Page updated
Google Sites
Report abuse