付費限定
Figma 基礎教學
更新於 發佈於 閱讀時間約 17 分鐘
這篇將介紹 Figma 的基本功能操作，以及該功能實戰會用到的地方，目前 Figma 軟體介面也是英文為主，而這篇教學文章則會將所有功能翻成中文供參考與對照，目前軟體由於仍在推廣階段，新手是可以免費使用的。
介紹與安裝
Figma 也是一個劃時代的軟體，主打的是即時的共同設計編輯，完全線上的向量設計工具，架構上比較偏向 Adobe 的 Illustrator，但在定位上是以做 UI 設計為主，加上相當順暢的使用體驗，而且因為是瀏覽器操作為主，沒有綁定作業系統的問題，能夠在 Mac、Windows、Linux 之間無縫接軌，迅速擄獲了許多使用者的心。
截至 2020 年的設計使用工具調查，Figma 已經完全超車 Sketch 長期盤據的王朝，並狠狠的甩開連免費牌都打出來的 Adobe XD，比起 2019 年以來有了爆發性的成長，成為最受歡迎的設計軟體。
要開始使用 Figma，只需前往官方網站，並註冊帳號，就可以開始使用。https://www.figma.com/
如果沒有開任何的 Project，那麼基本上就是免費的設計軟體，但也因為 Project 與人合作的部分才是 Figma 的重點功能，這部分也會在這篇文章作介紹。在操作上，這邊不建議使用平板或手機進行，即使平板是可以用 Figma 做設計的，但仍然會降低許多效率，它也有桌面版軟體可以下載，包含 Windows 跟 MacOS 的版本：
下載 Figma 桌面版本：Windows 版本/ MacOS 版本
主畫面
登入後，進入 Figma 的操作介面，這邊我們一一來介紹常用的 Figma 工具跟實際用在設計上的樣貌。
主畫面左邊欄位分別是：
- 個人帳號資訊跟提醒訊息 (那個小鈴鐺)
- Recent 最近使用的檔案，裡面會混雜著自己的 draft 跟 project 的檔案。
- Community 社群，是 Figma 很重要的功能，在裡面可以找到許多設計資源還有 plug-in，設計資源幾乎都是免費的，想要就可以直接複製回來用。
- Draft 草稿檔案，也可以直接按上面的 + 新增一個草稿檔案。
- Team project 這是團隊專屬的區域，在這裡之前，都還算是屬於個人的檔案，但到了這邊，就可以建立團隊專用的檔案區域，裡面的檔案都會跟有受邀的團隊成員共用，也是 Figma 目前主要的收入來源。
開始設計
如果想在 Figma 進行設計工作，就得先從草稿檔案開始，我們可以在主畫面按 + 建立一個草稿檔案，這時會跳出一個視窗請我們選擇要用哪種範本建立草稿，可以從完全空的工作區域開始，也可以從建立一個手機畫面或是電腦網頁畫面開始。
當我們建立了之後，就會進入設計工作的畫面，並擁有設計工作獨立的工具介面，分別為上方的主要工具欄，左邊的圖層與素材相關的資訊，還有右邊的物件設計相關資訊欄位，接下來將一一介紹每一個欄位的工具與作用。
上方工具欄
從這邊開始，最上方是回主畫面，而我們現在在這個新的檔案分頁裡。最左邊是選單。由於這邊並不是所有工具都很常用，因此我們會用 UI 業界實戰的標準來說明在下方標示哪些工具必須使用，哪些工具常用或不常用。
選單
- Back to files 回到主選單
- File 檔案
- Edit 編輯
- View 檢視
- Object 物件
- Text 文字工具
- Arrange 對齊工具
- Plugins 外掛工具列表
- Integrations 整合工具
- Preferences 系統設定
- Libraries 共用設計資料庫
上方工具欄左邊區域
Move 移動物件工具
Move 移動物件工具是移動物件用的指標，可以用來選擇物件，選擇到的物件會在右邊的工具列顯示該物件的狀態，也可以直接移動物件，擺放到任何你想要擺放的位置。
Scale 縮放工具
在 Figma 裡面，縮放有不同的方式，取決於那個物件是在哪一個圖層裡面而有不同的縮放方式，因此縮放工具在這邊提供的用處則是確保所有元件都是等比例縮放的。
Frame 框架
在 Figma 裡面，Frame 框架的作用相當廣泛，有多種功能與概念包含在裡面，他最常見的作用是當成畫布，畫布在設計軟體的概念就是類似做設計圖用的畫面，例如你想要建立一個 iPhone 的設計圖，選擇了 Frame 之後，就可以選擇你的畫布尺寸並開始設計。在進階的使用方式上，它還能是一個群組或是一個單獨的物件。
Slice 切圖工具
在 UI 的設計裡面，有時必須要將單一元件單獨交付給工程師進行開發，切圖工具是其中一種方法，但現今實際工作上已比較少用了，現在比較常用的切圖方式會是在右邊工具欄的 Export 工具。
Shape 圖形工具
裡面有很多圖形描繪的工具，包括矩形，圓形，線條，箭頭，多角形，星形，還有放入圖片，這邊將一一介紹這些功能的用法與用途。
Rectangle 矩形工具
這個工具可以說是 UI 設計最基本的構成方式了，每個 UI 設計都會用到這個元素，可以在底下的截圖看到使用範例，不僅如此，矩形工具還可以變化成圓角矩形工具，並且在某些地方取代了橢圓工具的作用，相當的富有變化性。在畫圖時同時按住 Shift 就能畫出正方形。
Line 線條
這裡的線條與隔壁的 Pen 曲線工具類似，但不相同，這裡的線條只能建立一條單一的線條，並在右邊的物件資訊欄上擁有單獨的狀態數值，而且享有 Stronk 邊框的樣式可調整，甚至可以加箭頭，在實際的使用上有時會用在 UI 上作為分隔線之類的方式使用，但分隔線也有使用矩形工具來做的做法。
Arrow 箭頭
這個工具最常用的地方其實是在工作區域說明每個畫面的順序與流程，有了 flow 之類的外掛工具之後，箭頭的工具就變得比較少用了。
Ellipse 橢圓工具
在現代 UI 設計的工作中，橢圓工具能使用的地方並不算多，因為在有些設計上，圓形的部分反而會使用矩形工具加上圓角取代，後者不但在調整造型上更有彈性，也避免重新選擇構成圖形的風險。但在向量插畫上，橢圓工具則有更多的發揮空間，製造出更多圓形的變化。在畫圖時同時按住 Shift 就能畫出正圓形。
橢圓工具還有自己獨特的 Arc Tool 弧形調整工具，只要將游標移到在完成的圓形上，就會在右邊出現一個 Arc Tool 弧形調整工具的小圓點，點選後就可以直接拖曳剪掉你要的角度，這在做 Pie Chart 圓餅圖很好用，可以稍加利用。
以行動支持創作者！付費即可解鎖
本篇內容共 6985 字、0
則留言，僅發佈於UIUX 職場設計學你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
862會員
33內容數
UIUX 基礎到資深完全詳解，文章將詳解現在趨勢，職位解析，軟體教學，職場應對，面試與作品集教學。
Ted Deng，目前在外商擔任 Lead Designer，十年以上設計經驗，2018 德國紅點設計獎。
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章分享了四款免費線上工具，包括Photopea、Canva、Kleki和AutoDraw，教初學者如何學習平面設計創作。這些工具各有其優點和特點，可供學習者選擇使用。
這篇文章分享了許多好用的設計工具，包括Adobe、Canva和Mirosoft Designer，提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
本篇文章將分享手機App設計教學，並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享，讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源，幫助讀者進行設計和開發的思考和學習。
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin，包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具，並附上了每個工具的安裝連結。
B
文組女生
如何善用
figma 和 GitHub
幸福課程
幸福教練黃老師
潮資訊媒體
文組女生可以透過以下方式善用 Figma 和 GitHub：
#Figma
Figma 是一款線上設計工具，
可用於製作網頁、應用程式、介面設計等。
文組女生可以使用 F
c文組女生
如何善用
figma 和 GitHub
幸福課程
幸福教練黃老師
潮資訊媒體 社群編輯
文組女生可以善用 Figma 和 GitHub
來提升團隊協作和專案管理的效率。以下是一些建議：
#Figma：
設計協作：
Figma 是一個協作性極強的設
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章分享了四款免費線上工具，包括Photopea、Canva、Kleki和AutoDraw，教初學者如何學習平面設計創作。這些工具各有其優點和特點，可供學習者選擇使用。
這篇文章分享了許多好用的設計工具，包括Adobe、Canva和Mirosoft Designer，提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
本篇文章將分享手機App設計教學，並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享，讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源，幫助讀者進行設計和開發的思考和學習。
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin，包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具，並附上了每個工具的安裝連結。
B
文組女生
如何善用
figma 和 GitHub
幸福課程
幸福教練黃老師
潮資訊媒體
文組女生可以透過以下方式善用 Figma 和 GitHub：
#Figma
Figma 是一款線上設計工具，
可用於製作網頁、應用程式、介面設計等。
文組女生可以使用 F
c文組女生
如何善用
figma 和 GitHub
幸福課程
幸福教練黃老師
潮資訊媒體 社群編輯
文組女生可以善用 Figma 和 GitHub
來提升團隊協作和專案管理的效率。以下是一些建議：
#Figma：
設計協作：
Figma 是一個協作性極強的設