被 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 設計稿的尺寸,對應到各個常見的裝置,手機、平板、電腦到手錶的介面都有。

左上工具列
Frame 可選預設的裝置畫布尺寸

除此之外我們也能夠,自己去拉一個小框架,在裡面塞很多元件當作群組,再收進大框架裡面,這樣的結構會對元件管理有很大的幫助。

那說到形狀工具啊,Figma 身為一款 UI 設計軟體,是有基本的繪圖工具可以畫一些簡單的幾何圖形的,旁邊也有鋼筆工具可以拉貝茲曲線,還有布林群組之類的輔助功能。

這些在做介面設計上都還算足夠,如果要畫比較複雜的向量插圖或電腦繪圖,建議都還是在 Illustrator 或 Photoshop 等等,習慣的設計軟體那邊畫完再丟過來。

將 Ai/Ps 做好素材丟過來 Figma 來排版

我們通常只會用這些基本功能來排版、畫 icon,以及加上文字工具來在 Figma 上面做介面的整體規劃,而所有的物件畫出來,都可以有個別可以調整的部位,並且都能在右側欄位進行設計編輯。

而在左側則是包含所有元件的圖層,如果用過 Adobe 家的設計軟體應該都會很熟悉。

右側可以編輯元件的設計
左側是包含所有物件的圖層

凝結網路社群的資源和套件

Figma 的社群平台可以下載其他人所設計的素材,你也可以上傳自己設計的元件檔案,更重要的是上面也有很多官方和網友做的實用外掛,可以擴充軟體的功能,讓我們可以在做設計時有更好的效率。

比如說自動清理隱藏圖層的外掛,或是能夠直接套用 Mockup 合成圖的第三方套件等等,也有很多常用的 UI icon 套組可以下載來用。

https://www.figma.com/community/plugins
https://www.figma.com/community/files

超級好用的元件系統

UI 設計因為屬於數位產品開發的一環,因此在處理可重複使用的物件上需要更加嚴謹,包括巢狀結構、群組和元件等等。

而 Figma 在這部分有很多貼心的設計,像是透過 Constraints 以及 Auto Layout,我們就能自由彈性地拉伸,做好的群組和頁面,更符合介面設計的體驗。

設計歷程與版本控制

Figma 上面做的設計稿會自動儲存,並且在主流瀏覽器當中都能打開使用,同時還有歷史紀錄可以看,可以指定時間點回溯到之前的版本,當然你也可以手動增加版本的存檔與命名,日後可以隨時回到儲存的版本檔案,歷史記錄和版本控制在團隊協作上可以幫上大忙,能夠避免跟同事的協作誤差,也能夠找回遺失的設計稿。

比較要注意的是如果免費帳號,目前最高是記錄到前三十天的檔案,而如果是付費用戶則沒有這個限制。

設計稿前端工程標註交付

在 Figma 做好的介面設計稿,能夠在上面標註好相關規格,然後直接交付給工程師進行開發,而開發人員可以點擊連結進去設計稿裡面檢視,還可以直接查看 CSS 程式碼。

整個團隊人比較多則可以透過標記來留言,大大減少設計與開發之間的溝通摩擦。

製作高擬真原型 Prototype

而除了設計稿的標註與交付之外,對客戶、主管方則可以使用 Figma 的 Prototype 功能,弄出動態並且可互動的高擬真產品介面原型,來給對方實際模擬操作並給予回饋,可以在瀏覽器上看剛做好的網頁,也可以在手機上安裝 Figma 的 App 來看行動裝置端的介面。

好啦,以上就是這次 Figma 新手教學的全部內容,如果對於 UI/UX 有什麼想再多認識一點的地方,可以在 YouTube 影片底下留言,我們之後也會再繼續更新設計軟體的的小技巧跟方法,如果剛好有需要的話,可以訂閱一下頻道~我是 Riven,我們下次見🙂

--

--

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
林育正 Riven

林育正 Riven

8K Followers

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design