- 本單元將以Figma官方基礎功能文件,引導大家完成在Figma中開始設計的基礎知識。
- 請進入| 『中文化|官方基本功能說明中文化文件』進行練習,本練習為經過整理翻譯的官方文件檔案,帶領大家認識Figma中基本八大功能:
1.Frame|框架、2.Constraints|約束條件、3.Components|組件、4.Styles|樣式、5.Smart Selection|智能選擇、6.Exporting|輸出、7.Commenting|註解、評論、8.Sharing|共享。
- 有關更多教程內容和功能概述,請訪問Help.figma.com。
- 請搭配觀賞本單元教學影片
- Frame|框架
框架是設計的基礎元素,是在Figma中創建的大多數東西的頂層容器。在Figma中有幾種不同的創建框架的方法,可以自訂尺寸,右側也提供了許多載具的框架預設尺寸供選擇,可直接拉取建立,非常方便。
- Constraints|約束條件
Constraints約束,可以將設計元素固定到其父框架的不同側。可以構建流暢的佈局以支持同一組中的多個設備大小和斷點,可以幫助建構真正的了解規則的應用方法。
Figma Tutorial: Constraints
- Components|組件
Components組件,可以重複利用設計中的現有部分,從而節省了其他重複而繁瑣的工作。組件創建新物件而不是副本,從而使您可以直接在畫布上覆蓋屬性。
組件有兩個方面:1.『主組件』Master Component,它定義了組件的屬性。2.『物件』Instance,它是可以在設計中重用的組件的副本。『物件』鏈接到主組件,因此您對『主組件』所做的任何更改都將應用於『物件』。
Figma Tutorial: Components - The Basics
延伸閱讀|
- 使用組件Components和實例Instance
- Styles|樣式
樣式功能使您可以定義一組屬性,例如顏色,字體和對象的效果,這些屬性可以在團隊的設計中重複使用。每當您更改樣式的屬性時,使用該樣式的所有對像都會立即更新。
Figma Tutorial: Creating Styles
Getting Started - Color Styles
延伸閱讀|
- 創建樣式
- Smart Selection|智能選擇
通過智能選擇,您可以快速調整對象之間的間距,通過選擇對象創建統一的網格以及在網格佈局內重新排列對象。思考收件箱界面,新聞源和照片畫廊的網格佈局。
How to Use Smart Selection and Tidy Up | Figma Tutorial
延伸閱讀|
- Arrange objects with Smart Selection|使用智能選擇排列對象
- Exporting|輸出
Figma支援PNG,JPG,SVG和PDF 輸出格式。在瀏覽器中使用Figma時,導出內容將自動保存到您的默認下載文件夾中。嘗試使用Figma桌面應用程序導出以選擇保存位置。
- Commenting|註解、評論
註釋在Figma中增加了另一層協作。您可以在畫布上的任何位置添加評論。註釋可以添加到設計文件和原型中。
- Sharing|共享
在Figma中共享文件很簡單。 打開共享對話框以設置特定權限或始用鏈接訪問。 使用鏈接訪問後,共享文件就像共享其URL一樣容易。
早年製作介面精稿(Mockup),多使用photoshop或Illustrator來製作,但這兩個軟體功能強大,但並不是為了介面設計而開發的軟體,因此在使用上較為複雜,開發方式及過程較不直覺,而近年來,UI設計師開始使用專為網頁(web)及行動應用程式(APP)開發的UI 設計工具來設計介面精稿。
以下介紹三個目前最夯的UI 設計工具:Sketch 是業界最愛用的介面設計軟體,但僅限於MAC OS系統使用。還有Adobe開發的介面設計軟體XD,以及異軍突起的新星Figma,無論PC MAC皆可使用,並且只要在瀏覽器上即可操作,使用非常便利。
- FIGMA介紹
Figma是可直接在瀏覽器上操作的的 UI 設計工具,只需網路即可,因此不限系統類型,不佔電腦空間,可多位設計師共同編輯設計檔,版本歷史功能更直覺切換。
Figma是線上介面設計工具,允許和團隊進行多人協同合作,在瀏覽器中進行設計,共同繪製使用者介面,UI、UX、網頁、App應用程式的介面原型,只要有一個成員變更內容,其他使用者都能同步查看變更和加入編輯,讓團隊可以共同討論,創作出最有共識的產品。
Figma = Sketch(UI設計)+ InVision(原型設計) + Zeplin(標註)+ Dropbox(雲端同步)+ Abstract(版本歷史)+ Craft-Freehand(實時討論) + Liveshare(實時分享)+ Team Library (團隊組件庫)+ Web API(第三方接入)+ …
延伸閱讀|
- Figma官網連結
- 學習Figma, 從這裡開始-最新的Figma 中文文檔和優質原創教程
- 深入了解Figma:UI 設計神器
- Figma — 異軍突起的設計協作神器
- Figma免費線上協同設計工具,和團隊一起編輯&繪製UI、UX介面原型。
- Sketch
Sketch只支援 MAC OS,是業界主要慣用軟體,直觀的介面,沒有任何軟體基礎的人都容易上手,門檻不會太高。有豐富強大套件資源,Toolbox 有豐富的套件、模板、外掛等資源,加速設計流程。
延伸閱讀|
- Sketch官網連結
- Sketch學習筆記(一)-基礎介面與工具
- 自學介面設計及Sketch資源分享
- SKETCH 初心者在設計 UI 前要做的五件事!
- Sketch 3 很高興認識你
- UI/UX設計師必備!五大實用Sketch外掛程式推薦
- Adobe XD
Adobe XD是Adobe系列的UI設計工具,支援 MacOS、Windows,因為是Adobe開發的軟體,操作簡單,類似 Illustrator 介面。能整合 AI 與 PS,可以能整合 Illustrator 文件。能在Creative Cloud 做儲存與共用。
延伸閱讀|
- Adobe XD官網連結
- Adobe Xd 軟體新手詳解圖文教學
- Adobe XD 推出免費方案,這將會是你學習 UI 設計的入門磚?
- Adobe XD 專為Prototype原型設計而生,UX操作設計工具
- 欸你覺得 Sketch 還是 Adobe XD 哪個比較好用?