（二）從 Wireframe 繪製到 Prototype 輸出的流程認識 Figma 功能若想要了解 Figma 元件功能，就需要從產品設計流程說起。產品設計流程依序可從線框圖（Wireframe）、視覺稿（Mockup），到原型（Prototype）等作分類，而 Figma 幾乎可以完成全部。藉由這項流程，我們可以認識 Figma 具備的設計元件功能：
Figma Wireframe 教學使用之元件工具
為最粗略的設計，主要是釐清此次產品需求，確認最終應該留在上面的主要功能。也因為這是以功能為導向的階段，必須先忽略所有視覺相關要素，聚焦在功能區的規劃，在 Figma Wireframe 的部分可運用到以下元件：
框架（Frame）：
設計的基礎元素也是第一步，創建大多數物件的最頂層容器。可以自訂尺寸、Figma 也提供一系列適用在不同裝置的框架大小，也可以在一個大的框架裡面放更多的小框架。
約束條件（Constraints）：
只要選擇要對齊的位置，就算任意調整框架，元件也會自動移動到相對應位置。可以定在左或右、置中、左右兩端則類似 RWD，從此不用在手動調整尺寸或是擔心物件跑位。
組件（Components）：
當設計某些經常重覆出現的元素時，需要確保它們的一致性，如果設計師需要一個一個修改這些分散各處的元素非常容易出錯且要花費很多時間，Figma Component 就是為了解決這個問題誕生。首先需要先設計出 Main Componet，在從它身上拉出所謂的分身（Instance），轉化成組件的物件也會保留在剛剛看見的 Assets 區，以便下次使用。一旦 Main Component 有變化，其餘分身也會隨之修改，如此一來更方便檢視一致性也提高設計效率。
詳細的 Figma Component 教學建議至 Figma 官網檢視或是以影片的方式參照。
Figma Mockup 教學使用之元件工具
UI 設計師會在此階段根據確定好的 Wireframe 介面使用繪圖軟體進行視覺上的設計，像是配色、動畫、版面配置等，加強使用者體驗產品功能的效果，基本上 Mockup 會和最終產品樣貌一樣，只是還無法操作功能。簡單來說，Mockup 就是經過視覺設計的 Wireframe。
圖標（Icon）：
圖標是 Mockup 很重要的第一步，用以豐富畫面設計。起初 Figma Icon 多數依賴外掛程式尋找，但也因為 Figma 布局與一般設計軟體很像，漸漸有許多設計師選擇在 Figma 自行繪製 Icon，出現許多進階版的 Figma Icon 教學能夠參照。
樣式（Styles）：
Styles 主要運用在顏色及文字的樣式儲存，以便在團隊設計中重複使用，像是固定的品牌配色或是慣用字型。若是在 Styles 中做更動，則使用這個屬性的所有物件也會隨之修改，與 Component 的作用有些相似，只是主要針對屬性可以做一次性的調整，以便維持一致性。
智能選擇（Smart Selection）：
這個功能可以一次性快速調整多個物件的間距或是點對點對調位置，不需重新手動調整排版。
自動排版（Auto Layout）：
針對每個物件的水平或垂直排列方向及間距做設定，如同真的網頁展示，當有大量的表格需要做設計，其中幾行需要改順序時，以滑鼠拖曳就可以換位置，一樣不用手動調整。表格的寬度修改時，其他欄位會自動隨著新寬度往旁邊移動，而不會像在 Excel 中操作其中一欄修改，全部版位都跑掉。
稍微進階設計中的網頁水平捲動效果便是靠這個功能設計。
Figma Prototype 教學使用之元件工具
最後則是進入工程師的開發階段，同時間已具備了實際視覺設計與產品功能。簡單來說，Prototype 就是已經具備動態互動功能的 Mockup。
互動設定（Interaction Settings）：
當有了各自設計好的頁面以及它們之間的畫面互動流程，便可以在 Figma 中設定各自元件被觸發時應該執行什麼動作。舉例來說：當首頁的其中一個圖標被點擊時，就要顯示選單的頁面。此時可以選取上述所說的圖標，將出現的箭頭連接到指定出現的畫面，如此一來就設定好其中一項互動設定。
展示（Present）：
完成所有的互動設定，可以點選最右上方的 Present，檢視整體互動設定是否依照預想中移動。
輸出（Export）：
Figma 輸出支援 PNG、JPG、SVG 和 PDF 格式，儘管 Figma 許多功能都很強大，但仍屬於 UI 設計類工具，成品還需後續工程師的協助。因此不論是 Figma 輸出 html 語法又或是 Figma 輸出網頁，都需要借助外掛程式或是專業團隊的力量才能進行。
共享（Share）：
前面我們曾提及共享功能是 Figma 最大的優勢之一，只要點擊 Present 左邊的按鈕，就能夠選擇要將檔案寄給誰或是直接複製檔案連結，也能在此設定觀看權限。
歷史紀錄（Version Hostory）：
常常擔心老闆或客戶還是喜歡第一版的好幫手！只要點擊檔名，選擇Show Version History，上面都會記錄修改時間與修改的使用者，不用擔心有沒有存檔的問題，也沒有一堆的微調檔案佔據電腦容量，還可以命名修改紀錄，完成一個段落後做系統性的命名，更快找到所需檔案。
但要注意的是免費版只能回朔30天的版本紀錄，一旦過了期限一樣會不見喔！