Nov 24, 2022
被 Adobe 買下來了！快速上手 Figma 💻 UI 設計軟體 ＃新手教學
本篇文章為 YouTube 影片 的文字版本，有需要的同學可以到 Riven 的頻道觀看。嗨囉，大家好😶🌫️ 我是設計師 Riven
我們今天要來教的是 UI 設計軟體 Figma，這個跟 Sketch, Adobe Xd 相同都是介面設計軟體，其實在軟體操作上都差不多，那我第一次使用 Figma 大概是 2018 年的時候，剛開始不是那麼地好用，不過那時候聽說很多歐洲、美國的新創團隊，都有在使用這套軟體來設計數位產品。
那剛好 2019 年底我在洛杉磯 Adobe MAX 活動上
認識了幾位國外的資深 UI/UX 設計師，才知道許多團隊最近都剛轉到 Figma，現場交流一下才發現 Figma 整體已經變得好用許多～
接著來到這一兩年 Figma 就已經成為許多公司在 UI 設計專案的熱門選擇，甚至在前陣子 Adobe 也宣布已經併購 Figma 這間公司，並在明年會有更多新消息釋出。
現在正好是學起來的好時間點，那我們接下來一起來好好認識一下 Figma 吧！
免費下載且跨裝置系統使用
Figma 是這幾年設計圈知名度相當高的軟體，有著現代設計語彙的乾淨介面，以及符合直覺使用習慣的體驗。
在 Figma 網站我們可以直接下載桌面端的軟體來用，有支援 Windows 跟 macOS，而如果電腦作業系統是 Linux, Ubuntu 之類的，則可以開瀏覽器來使用 Figma 的完整功能，而也因為這個特性，Figma 在專案團隊內的跨裝置協作體驗相當不錯，不會因為大家使用的電腦不同系統，而造成檔案管理的不方便。
而 Figma 可以透過 Google 帳號來快速註冊，在剛開始我們初學者可以選擇免費的會籍來用，之後可以看專案規格或公司規模，來升級成付費的會員，在新手學習上幾乎沒有門檻。
輕量化的 UI 繪圖介面
接著我們先來快速認識一下 Figma 的介面，點擊開啟一個新的設計檔案，我們進來之後先順手幫專案命個名稱，按下 Enter 儲存。
然後看到左上角這裡有幾個工具可以用，大概就幾個比較常用到的「框架、形狀、鋼筆、文字」。
其實 Frame 框架這個東西在 Figma，有著其他設計軟體當中工作區域、畫布(Artboard) 的功用。
點擊之後我們可以在右側選到想要製作 UI 設計稿的尺寸，對應到各個常見的裝置，手機、平板、電腦到手錶的介面都有。
除此之外我們也能夠，自己去拉一個小框架，在裡面塞很多元件當作群組，再收進大框架裡面，這樣的結構會對元件管理有很大的幫助。
那說到形狀工具啊，Figma 身為一款 UI 設計軟體，是有基本的繪圖工具可以畫一些簡單的幾何圖形的，旁邊也有鋼筆工具可以拉貝茲曲線，還有布林群組之類的輔助功能。
這些在做介面設計上都還算足夠，如果要畫比較複雜的向量插圖或電腦繪圖，建議都還是在 Illustrator 或 Photoshop 等等，習慣的設計軟體那邊畫完再丟過來。
我們通常只會用這些基本功能來排版、畫 icon，以及加上文字工具來在 Figma 上面做介面的整體規劃，而所有的物件畫出來，都可以有個別可以調整的部位，並且都能在右側欄位進行設計編輯。
而在左側則是包含所有元件的圖層，如果用過 Adobe 家的設計軟體應該都會很熟悉。
凝結網路社群的資源和套件
Figma 的社群平台可以下載其他人所設計的素材，你也可以上傳自己設計的元件檔案，更重要的是上面也有很多官方和網友做的實用外掛，可以擴充軟體的功能，讓我們可以在做設計時有更好的效率。
比如說自動清理隱藏圖層的外掛，或是能夠直接套用 Mockup 合成圖的第三方套件等等，也有很多常用的 UI icon 套組可以下載來用。
超級好用的元件系統
UI 設計因為屬於數位產品開發的一環，因此在處理可重複使用的物件上需要更加嚴謹，包括巢狀結構、群組和元件等等。
而 Figma 在這部分有很多貼心的設計，像是透過 Constraints 以及 Auto Layout，我們就能自由彈性地拉伸，做好的群組和頁面，更符合介面設計的體驗。
設計歷程與版本控制
Figma 上面做的設計稿會自動儲存，並且在主流瀏覽器當中都能打開使用，同時還有歷史紀錄可以看，可以指定時間點回溯到之前的版本，當然你也可以手動增加版本的存檔與命名，日後可以隨時回到儲存的版本檔案，歷史記錄和版本控制在團隊協作上可以幫上大忙，能夠避免跟同事的協作誤差，也能夠找回遺失的設計稿。
比較要注意的是如果免費帳號，目前最高是記錄到前三十天的檔案，而如果是付費用戶則沒有這個限制。
設計稿前端工程標註交付
在 Figma 做好的介面設計稿，能夠在上面標註好相關規格，然後直接交付給工程師進行開發，而開發人員可以點擊連結進去設計稿裡面檢視，還可以直接查看 CSS 程式碼。
整個團隊人比較多則可以透過標記來留言，大大減少設計與開發之間的溝通摩擦。
製作高擬真原型 Prototype
而除了設計稿的標註與交付之外，對客戶、主管方則可以使用 Figma 的 Prototype 功能，弄出動態並且可互動的高擬真產品介面原型，來給對方實際模擬操作並給予回饋，可以在瀏覽器上看剛做好的網頁，也可以在手機上安裝 Figma 的 App 來看行動裝置端的介面。
好啦，以上就是這次 Figma 新手教學的全部內容，如果對於 UI/UX 有什麼想再多認識一點的地方，可以在 YouTube 影片底下留言，我們之後也會再繼續更新設計軟體的的小技巧跟方法，如果剛好有需要的話，可以訂閱一下頻道～我是 Riven，我們下次見🙂
