從 2012 年才成立，就快速崛起就稱霸 UIUX 設計界的 Figma，不論是網頁設計、App 設計、概念發想、簡報設計，不僅容易上手、強大的即時共編、開放資源，學習管道也容易取得，更甚至曾經讓設計大佬 Adobe 以天價 200 億美元收購（其因涉及壟斷疑慮破局），Figma 深受設計界喜愛的原因是什麼呢？以下這篇將告訴大家特色、Figma 必備的設計邏輯、軟體基本介紹、適合初學者的官方教學影片、外掛推薦、快捷鍵，讓你不用一天，就可以掌握 Figma 的概念，一兩週的實作就可以上手囉！
Figma 是什麼？7 大特色讓你離不開他
之前 UX Tools 就有在 2023 年統計最受歡迎的 UI Design Tools，可以看到即使是第二名的 Adobe Photoshop 也是有非常顯著的差異，而以下是我認為最關鍵的 7 大關鍵特色！（有更多但列都列不完😂）
特色 1：即時線上協作能力
Figma 的一大亮點是即時線上協作功能，讓多位 UIUX 設計師同時編輯同一個文件，線上會議也能因此很好說明，就像在 Google Docs 上多人共同編寫文件一樣。這樣讓團隊能夠即時分享想法與設計討論，更重要的是調整一個小物件無需來回傳遞檔案，極大提升工作效率！（過去都需要先匯出再上傳，才能進一步討論，是非常麻煩的事情😱）
特色 2：檔案交付便利性
Figma 不僅讓 UIUX 設計師將作品以多種格式（如 PNG、SVG、PDF 等）匯出，並且無需反覆打包、壓縮或轉檔、上傳等，讓軟體工程師可以直接從 Figma 上將檔案設定好 Dev Mode 後，即可看到設計規格和 CSS 代碼，所以設計標注尺寸的需求也大幅減少（過去使用其他軟體的地獄輪迴）！讓 UIUX 設計與開發吧討論與交付檔案變得更加順暢！
特色 3：流暢設計互動關係（Component, Auto Layout）
他有強大的 Component（子母元件），同時還有快速異動項目時可以輕鬆排列的 Auto Layout（自動排列），有這兩件事，就讓設計過程又再更大幅提升。（文章後面有說明）
特色 4：豐沛的外掛與免費資源
Figma 有大量的外掛（Plugin），從一個檔案內就可以快速叫出外掛，執行一些快速的進階功能，例如需要 Icon 時，可以使用 Iconify，需要快速繪製 Flow 時，也可以使用 Flow Chart 或是 Auto Flow，而且這些外掛都不用特別下載與安裝，點開隨可用，非常方便。而 Figma 還有強大的 Community，可以從上面找到許多公開又很棒的免費資源！
特色 5：豐沛的學習渠道
首先 Figma 官方 YouTube 就出了非常豐富的教學影片，再加上 Figma 是當前最主流的 UIUX 設計軟體工具，不管是文章、 YouTube 等，都有非常多的基礎與進階教學影片，所以很多基本該有的學習資源就可以輕鬆獲得，而且 Figma 是個產品迭代速度非常快的軟體公司，為了因應不斷推出的新功能教學，不一定要透過課程，可以從網路搜尋就獲得很多解答啦！
特色 6：非常好上手
相信很多人要接觸新軟體（包含我）都是會有些緊張，不確定要花多少時間才可以上手，但 Figma 相較過去一些 UIUX 設計軟體來說，操作上是非常好上手的工具，尤其現在有許多線上的共編軟體，像是 Miro，在使用邏輯上會越來越相似，因此上手門檻越來越低！若過去有使用過一些設計軟體的人就更不用說了！
特色 7：跨平台兼容性
除了可以下載 macOS、Windows 桌機端，還可以使用一般瀏覽器開啟，因此無論是任何角色，包含客戶、PM、工程師等都可以透過連結就看到你的檔案，同時也可以下載手機版，做App的可以連到手機做即時的手機裝置畫面確認！而權限的設定也分明，瀏覽權限與編輯權限通通都可以設定，跨裝置也不會有設計稿上的問題，兼容性非常完善。
Figma可以用來做什麼?
介面設計（UIUX Design）
Figma 最廣泛使用的就是介面設計，像是網頁設計或是 App 設計，支援多種裝置的畫布大小，同一個產品可能會有幾百、幾千、甚至幾萬個畫面，同時產品在不斷迭代時也會有新的畫面產生，可以在這軟體的畫布、頁面、檔案分類、資料夾分類來有效管理龐大的介面。
原型製作（Prototyping）
可以做出讓使用者操作的原型，以及微幅動畫，不僅可以在開發前讓使用者先做測試、內部討論時更直覺，工程師在開發時也可以省去一些溝通路徑、標注資訊的時間成本。👉 Figma 官方 YouTube 教學影片 – Figma for Edu: Prototyping 101, new basics
設計系統（Design System）
一個產品很重要的是要有一致性的風格、字體、顏色、按鈕、表格、選單、提示、彈窗等各式的設計定義與規範，而這不僅要考量到品牌的調性轉換成數位產品之外，還要讓他成為一個元件資料夾，讓設計時可以完全按照設計系統，再多人經手都可以維持同一個風格囉！
想知道怎麼建制設計系統，可以看👇
Figma 官方 YouTube 教學影片 – Figma tutorial: Component properties
想知道什麼設計系統，可以看👇
Figma 官方 YouTube 介紹影片 – Course overview : Introduction to design systems
使用者體驗設計（User Flow）
當頁面數量非常多時，為了方便觀者，或是會議上的其他成員可以更好理解介面之間的互動關係，我們也很常需要繪製 User Flow，除了內建的鋼筆或線條工具之外，叫多角度的線條，我也會使用 Autoflow 外掛，或是繪製系統關係圖，我就會用 Flow chart 外掛。
概念發想（FigJam）
新增工作檔案時，除了 Design file 的工作格式是專門介面設計之外，還有 FigJam Board，他的功能就像 Miro，是可以大家共同在線上貼便利貼，共同梳理痛點、整理資料的討論版，而且過去我在畫產品的架構圖（Sitemap）時，都是使用 Xmind，但受限於非免費工具，且久久才使用一次，並且討論與修改都需要反覆開啟檔案儲存匯出，現在在 FigJam 也可以繪製，同時檔案還可以複製回 Design file 放在介面旁，檔案之間的連結都很順暢。👉 Figma 官方 YouTube 介紹影片 – Intro to FigJam: How to make diagrams with FigJam
以下三個模板是我會使用到的 FigJam Tamplate
簡報製作（Slide Deck-Beta）
今年（2024） Figma 發表的 Slide Deck（簡報工具）也讓人很驚喜，融合 Figma 與大家熟悉的編輯簡報控制面板 ，不僅有非常多精美的簡報設計風格可以選擇（認真精美到不行），更不用說以設計的角度出發，所以設計上的細節都可以調得更理想。對於我之前需要使用 Power Point, Keynote 的簡報工具來說，那些對齊到頭很痛的問題就解決了，不僅是設計師做簡報的福音之外，也讓更多人可以更容易嘗試使用 Figma 的產品囉！當前還在 Beta 版，相信之後會有更多厲害又完整的功能出現的🎉！👉 Figma 官方 YouTube 介紹影片 – Intro to Figma Slides
Figma教學：操作介面＆功能介紹
登入註冊因為僅需要非常簡單的 Google 第三方登入，或是自己用信箱密碼來建立，然後輸入名字以及簡單的幾個問題，因此不多做太多說明
資料層級關係
以 Figma 在資料的層級來說，除了你登入的帳號可以切換之外，會有「Team」、「Project」、「File」、「Page]」四種層級。以下介紹都可以依據公司或個人習慣做劃分，沒有一定要如何分類，不過可以先理解大致的架構！
Team：
可以想像成公司，所以例如有跨區域分公司的資料分開管理，或是自由接案者會被邀請進入各公司編輯的話，就會是在 Team 的層級做切換。
Project：
可以想像成公司有各種數位產品，或是在設計顧問公司，接到來自不同公司的設計案，就可以開一個 Project 來做產品上的管理。
File：
就是大家做產品設計稿的地方，所以一個 File 裡面可能會有很多個分頁，來管理該產品的各個單元，而如果要做 Web, App 等不同裝置的設計，就可以直接拆兩個 File 來製作，若產品的複雜度非常龐大，也可以依據大單元來做一個 File 的管理，同樣的，當今天產品不斷的在做迭代，也有可能因此往後在不同的年度與季度，就可以在這個 Project 建立多個 File。
Page：
則是在該 File 裡面，可以開多個頁面，例如今天同樣都在做某一個大單元的 File，則可以依據該大單元裡的小單元來拆 Page，或是可以依據不同的 version 來拆分！
如何建立 File
如果是先從 Free Plan 進來，你會看到像這樣的畫面（初始的話會有一些介紹文件），若是登入公司的帳戶，會在左側「Your Team」可以切換到 Profession 的工作區域。所以要建立一個可以設計介面的 File
- 在當前的 Project 右上方點擊「Create」
- 點擊下拉選單的「Design File」
- 他會成為最上排的一個分頁 File（像是 Google 的分頁），可以多個切換
- 進入後，左邊區塊的 Page 點擊「＋」，成功建立你的設計工作區域！
介面不同區塊的作用
Figma 更新速度很快，面板的配置也會隨之小調整，但大致功能不會落差太大！
Figma 左側面板
- 圖層區塊（Layers）
所有物件都會有一個圖層，會有一層層的圖層包成一整頁的頁面，每個區塊裡的所有物件都是一層包一層的排列關係。 - 頁面區塊（Pages）
可以新增多個頁面，每個頁面可以由這邊快速切換。 - 資產區塊（Assets）
若在別的地方有建立好 Library，可以從這邊開啟，抑或是從這裡建立好可以發布，讓其他檔案可以開啟使用元件。
Figma 中間畫布
- 有非常大的區塊，可以任意在中間設計任何 UIUX 介面、User Flow、PRD 等資料。
Figma 右側面板
- 組件區塊（Component）
當母元件建立好後，使用的子元件就可以在這區塊作調整（Varient）。 - 位置排版區塊（Position, Auto layout, Layout Grid）
包含座標位置之外，還有自動排版的重要參數設定，讓設計稿在刪改時可以變得很有效率。 屬性區塊（Appearance, Typography, Fill, Stoke, Effect）：單物件在顏色、字體、陰影效果、邊線等設定的地方。 - 匯出功能（Export）
可以將選擇的項目匯出 0.5-4 倍大小的 PDF, JPG, SVG, PNG。 互動原型功能（Prototyping）：可以將頁面做好互動原型的功能。
Figma 下方面板
- 滑鼠（Move, handle, scale）
大家常用的滑鼠功能。 - 裝置與範圍（Frame, section）
點擊 Frame 後可以自行畫出裝置大小，亦有快速建立好的尺寸（iPhone, Desktop 等）可以直接選擇，而 Section 則是可以快速幫你把一個區域裡的所有圖稿視覺化的方式群組起來並命名，同時也能讓這個Section 設定成開發模式，就能讓其他區塊、頁面繼續進行設計。 - 形狀（Rectangle, Line, Arrow, Ellipse, Polygon, Star, Image/video…）
可以快速畫出一些形狀。 - 鋼筆（Pen, Pencil）
可以任意拉、畫出曲線線條。 - 文字（Text）
可以在空白處輸入文字。 留言（Comment）：可以留言讓其他所有人看到，並成為一個對話串。 - 外掛（Action → Assets, Plugin & Widget）
這邊我最常用的是外掛，可以從這邊快速叫出外掛工具，無需做任何安裝 - 開發模式（Dev Mode）
切換為這模式後，整份都會成為開發模式。
Figma 檔案封面設定 Thumbnail
不管你是喜歡將設計檔案列表建立美美的，或是檔案一多，需要有效從檔案封面就能快速辨識專案名稱與開發進度、設計者是誰的話，只要在設計檔裡面做一張檔案大小為 1920×1080 的封面圖，點擊並右鍵選擇 Set as thumbnail 就輕鬆設定好囉。
重點使用邏輯（Component, Auto Layout）
在做 Figma 中，我覺得有兩個貫徹的使用邏輯是 Component（子母元件）和 Auto Layout（自動排列）。
Component（子母元件）
用意是「方便管理、調整元件」與「依狀態調整」，也是在做 Design system 很重要的觀念 可以先做好母元件，並且將母元件的狀態都做成條件（Varient）後，後續子元件在使用時，若母元件有異動，子元件不需要在各個重新做調整之外，可以輕鬆切換各種狀狀態，例如 Default, hover 等。而元件可以一層剝一層，一路從最小的單位，到一個較大的組件，都能作為一個母元件，更好管理產品一致性與檔案的完整度。
想知道怎麼使用 Component，可以看👇
Auto Layout（自動排列）
用意是小物件、中物件、大物件之間的間距可以快速維持一制性之外，在資料的刪除、新增、長寬度可以非常自動化的排列在預期要的位置，他有分為 Fixed、Hug content、Fill container。
Fixed：
固定寬/高（可以設定數值）。
Hug contents：
適應內容大小，例如文字多長，該容器（container）就會按照文字長度變化。
Fill container：
填滿容器（container），例如容器的寬度是 100px，則裡面所有的項目設定 Fill container，不管原先內容多長，都會推到 100px
若沒有這功能，有可能刪了一個物件，需要自行將下方的物件再移上來，又或是像表格，寬度都需要一個一個去做調整的話會相當耗時，因此善用這功能可以大幅提升排版效率。
想知道怎麼使用 Auto Lyout，可以看👇
Figma 是免費的嗎? Figma 的定價方案
免費也可以使用唷！以 Free Plan 的話
- 可以在一個 Project 裡面建立三個 Design File 以及 三個 FigJam
- 並且在 Design File 中可以建立三個 Page
因此如果本身並非個人接案或是企業主，而是在求職需要做 UIUX 作品集來說其實是很夠用的，雖然會有些許功能被限制，但足以做出一份合適的作品集了！ 付費方案可以如下圖，若需要可以開立無限制的檔案（File）以及建置 Team Library 的話，當前第二個就可達到，不過值得注意的是，你的檔案在 Share 給其他人時的設定，記得純瀏覽的對象要設定為 View，若設定到 Editor，而近來的人通通都是這身份的話，次月的帳單就會非常驚人唷，因為會是以具備編輯權限(Editor)的人數作為計算費用的數量。
Figma 超實用外掛（Plugin）
Flow Chart
若有直接需要以文字與系統圖先來做快速的溝通架構時，可以使用這個來繪製。
Autoflow
身為 UIUX 設計師，除了 prototype，頁面畫完更需要透 flow 的方式和工程師、PM 或使用者、客戶說明，而這工具可以快速畫出一致性的線條
PDF to Figma
可以將PDF 拖曳到 Figma 轉換成圖片的工具，這樣無需截圖或是擔心匯入時檔案過大等，因此若有一些文件需要對照著看，或是輔助使用時很方便唷。
Iconify
若本身還沒有建立產品的 Icon，可以使用這個外掛，裡面收錄了 100 個向量圖庫，超過 200,000 個圖，也會有各式常用尺寸可以直接使用，因為向量關係也不擔心失真，相當方便。
Unsplash
這在一般做設計時也是大家常使用的免費商用大圖的網站，而 Figma 裡面可以快速用這個外掛，就無須先從網站端下載再過來使用。
Motion – UI and Games animation
做法很像輕量化 Adobe After Effect 感覺，可以去設定 Key frame，以及點跟點之間的動態比率，並且可以直接使用 Figma 做出來的元件來做動畫，並匯出 gif, mp4, svg 等格式，相當方便。
SuperTidy
這是可以快速將頁面排列整齊的好工具，有時候頁面一多，會忽高忽低或是彼此間距會有點落差，使用這外掛就可以快速排得整齊，除了讓其他人好瀏覽之外，也會看起來更專業。
Blobs
這可以產出一些有機的形狀，所以有時想要做一些大的背景，或是有機漸層時可以使用。
Webgradients
提供非常多精美的漸層，只要選取你要填漸層的圖層，再點一下外掛中的其中一個漸層，就直接套好囉！
Image Palette
可以快速提取圖片中的色調，顏色也很和諧，要做延伸的設計就很好搭配。
Pattern Hero
做圖騰的外掛，只要設定好兼具、選好物件，就可以快速做出 Pattern，並且每個元件也都維持向量的素材。
Content Reel
可以快速生成一些資料，例如要大量的頭像、人名、日期、號碼、金額等等的話，就不需要再自己找圖填入囉。
Mockup Plugin
可以選一個你想要套用的裝置模板，像是放上 iPhone 等，點擊＋號並選好你想要套用的介面，就能產出你要的 Mockup 囉，免費版就有許多選擇，不需要再額外找模板到 Photoshop 自己合成圖，實在方便～
AI image generator by Freepik
可以透過文字快速產出一些圖片的 AI 生圖工具
Figma 超實用資源與模板
Explore Community
這在 Figma 主頁的左下角有一顆地球，進去後就可以看到非常多實用的檔案可以開啟，並複製到你個人的工作區域做使用，他目前有分類為：Design resources, Plugins, whiteboarding, Presentation 可以找資料之外，也可以直接打關鍵字例如「Portfolio」來找到想要的內容，若有一些資源會想要給外部的人使用，亦可以從這邊發表上去。
UXCrush
這裡面有非常多的模板，可以去裡面看看找找唷。 👉 UXcrush
Dribble
是個可以找尋靈感的地方，可以透過關鍵字來找到不錯的 UIUX 設計唷
Pintrest
相信大家不陌生，一樣是個可以找尋靈感的地方，一樣可以透過關鍵字來找到一些不錯的 UIUX 設計唷
Figma 快捷鍵推薦
我最常用的快捷鍵推薦：
選取物件做 Auto Layout
Shift + A
顯示 / 隱藏工作面板
Cmd + \（Mac） / Ctrl + \ （Windows）
快速選到多層圖層中的物件
Cmd + 滑鼠點擊（Mac）/ Ctrl + 滑鼠點擊 （Windows）
結論
Figma 是個我在過去學習設計軟體裡面非常友善新手的工具，目前我認為只要將 Component, Auto Lyout 多使用與設計幾次，就能大大掌握使用 Figma 的高效精髓，不需要擔心軟體的上手需要花掉太多時間，可以好好專注把重心發揮在你的設計思維啦！
尤其現在功能越來越多，大家逐漸將它成為線上共編討論的工具，不再只是設計師會需要使用，一路從發想（FigJam）、設計（Design File）、簡報（Slide Deck），他不僅成為UIUX 設計師市占最高的軟體工具，更慢慢滲透到大家的生活，也有學校將這個工具作為學生交作業的討論版，而居家也因為有他的線上即時共編能力而不受限於檔案與裝置的溝通與設計困擾，而且他們的更新速度之快，只會越來越好用，越來越多人用，也就會伴隨有越來越多人貢獻免費資源以及線上的免費學習管道！期待未來的變化啦～
延伸閱讀
- UIUX 是什麼？UIUX設計師的工作在做什麼？
- UXUI 設計顧問工作大開箱！6 大技巧提高你的設計價值
- 擺脫新手設計師！解析 6 大 Wireframe 實作技巧與軟體工具
- Wireframe 是什麼？UIUX設計師必學 3 大關鍵流程
- UX/UI 設計師工作大解析：薪水行情、面試、職位內容
