付費限定
Figma 基礎教學
更新於 2021/03/26閱讀時間約 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 職場設計學你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
863會員
33內容數
UIUX 基礎到資深完全詳解，文章將詳解現在趨勢，職位解析，軟體教學，職場應對，面試與作品集教學。
Ted Deng，目前在外商擔任 Lead Designer，十年以上設計經驗，2018 德國紅點設計獎。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本篇文章將分享手機App設計教學，並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享，讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源，幫助讀者進行設計和開發的思考和學習。
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin，包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具，並附上了每個工具的安裝連結。
今天要來整理 Figma的免費課程！傳送門
Figma 是個很好用的製圖工具，
但在真正用 Figma 畫 UIUX時，最重要的第一步是「知道這個專案的目的」。
Wireframes 產品框線圖
Figma 可以用來畫 Wireframes
就像在寫文章一樣先有大鋼，再填內容。在做產品
打造具有邏輯的 Figma 顏色命名體系，是提高設計效率並增添專業感的關鍵一環。
這不僅是優化工作流程的實用方式，更是為你的設計注入有條理的美感。
這篇會教你如何在 Renpy 裡面使用 if !
If 的使用方式
這節希望可以讓你理解甚麼是 If 和何時
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
Call 語句
它可以用來跳轉劇情
使用 call 可以從劇情A -> 跳到劇情B -> 之後再跳回去劇情A
範例: call next_s
Well，我沒有想到剛寫完【商業劇本 Playbook】EP02 - Adobe 不久之後，管理層就宣佈要用 US$20bn 收購跟自家 Adobe XD 直接對打的 Figma。今天這篇我覺得可以視為 EP02 的補充，不過既然是剛發生的併購，牽涉到的就不只是這個系列主打的企業成長史。所以這邊我
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本篇文章將分享手機App設計教學，並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享，讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源，幫助讀者進行設計和開發的思考和學習。
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin，包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具，並附上了每個工具的安裝連結。
今天要來整理 Figma的免費課程！傳送門
Figma 是個很好用的製圖工具，
但在真正用 Figma 畫 UIUX時，最重要的第一步是「知道這個專案的目的」。
Wireframes 產品框線圖
Figma 可以用來畫 Wireframes
就像在寫文章一樣先有大鋼，再填內容。在做產品
打造具有邏輯的 Figma 顏色命名體系，是提高設計效率並增添專業感的關鍵一環。
這不僅是優化工作流程的實用方式，更是為你的設計注入有條理的美感。
這篇會教你如何在 Renpy 裡面使用 if !
If 的使用方式
這節希望可以讓你理解甚麼是 If 和何時
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
Call 語句
它可以用來跳轉劇情
使用 call 可以從劇情A -> 跳到劇情B -> 之後再跳回去劇情A
範例: call next_s
Well，我沒有想到剛寫完【商業劇本 Playbook】EP02 - Adobe 不久之後，管理層就宣佈要用 US$20bn 收購跟自家 Adobe XD 直接對打的 Figma。今天這篇我覺得可以視為 EP02 的補充，不過既然是剛發生的併購，牽涉到的就不只是這個系列主打的企業成長史。所以這邊我