slider

使用者介面設計講義

User interface design，UI

首頁/使用者介面設計講義

Figma註冊與基本認識 / 基本功能介紹 / UI Mockup軟體介紹

認識Figma

只要有網路，可在任何電腦進入Figma官網，登入帳號或註冊帳號後，即可隨時隨地工作，繼續進度，毫無障礙。

Figma未登入畫面介紹（2024/09/23）


Figma登入後畫面介紹（2024/09/23）

登入帳號後出現以下畫面：

約2010年，介面設計的趨勢剛興起，大部分的設計師還是用Photoshop去做介面設計，但是Photoshop通常都是拿來進行影像合成或是排版，拿來設計介面，會有許多功能用起來很不方便。

直到了Sketch的出現，解救了廣大的設計師，Sketch操作清晰簡單，專門作為設計介面所使用，還有廣大的外掛支援，從此Sketch變為設計介面軟體的主流。但是Sketch只有Mac系統可以使用，但是還是有幾點無法克服。像是，Prototype的製作一直都很陽春，只能依靠第三方軟體，標注方面，也是需要依靠外掛Zeplin才能趨於完善。一直沒有出Windows的版本，無法跨平台的去使用。

到了2018年，Adobe自家也才推出XD作為設計介面軟體，此時腳步已經追不上Sketch了。

然而這一兩年，Figma卻以黑馬的姿態，追上了Sketch，許多使用者以及企業紛紛從Sketch轉向到Figma， 在 2017 年只有不到 10% 使用率的 Figma，如今的使用率已經達到約 90%！

Figma 是一款近年來非常受業界歡迎的線上介面設計工具，2023 年 UX Tools 的統計報告顯示，世界各地超過 ⅔ 的工作者都將 Figma 作為首要工具。

Figma 的主要優點

  1. 免費使用方案
    2. UX Tools 的設計師調查指出，有超過 90% 的設計師都是使用免費版 Figma，這是因為 Figma 的免費方案提供了完善的功能，包括無上限的雲端容量和檢視者數量，對獨立設計師或小型團隊來說已經非常夠用。
  2. 完善的團隊協作功能
    3. Figma 最強大的特色之一就是協作功能，它讓大家能同時編輯一份檔案，也可以即時在檔案裡留下想法與回饋，省去了過往團隊在討論時，需要不斷來回傳送檔案的麻煩，大大提高了工作效率。
  3. 豐富的第三方軟體整合與外掛
    4. Figma 除了原先就已經提供多元的功能，在使用者社群 Figma Community 上還提供許多的實用、甚至免費的外掛讓大家使用。只要在 Figma Community 搜尋關鍵字，就可以找到符合自己需求的外掛來提高設計效率。
  4. 強大的設計功能
    5. 除了前面提到的特色以外，Figma 的設計功能也是強大而全面，幾乎可以滿足設計師的各種需求，從簡單的圖像繪製到複雜的原型（Prototype）製作都應有盡有。

Figma 也有一些缺點需要考慮

  • 網路依賴性高
    • 使用 Figma 需要有穩定的網路連線，這對於工作環境沒有網路或是網路連線不穩定的使用者來說可能較為不便。
  • 大型檔案易延遲載入
    • 或操作包含大量圖層的大型文件時，Figma 的運作可能會出現延遲。
  • 雲端隱私和安全問題
    • 任何線上軟體都存在隱私和安全問題；因此在分享機密性較高的專案時，需要特別留意權限的設定，避免遭到惡意修改或是隱私外洩。

延伸閱讀｜

  1. 大公司都在用！Figma究竟是何方神聖？
  2. 為什麼Figma會成為新一代的設計神器？
  3. Figma 是什麼？ UIUX 領域新霸主登場，優缺點、強大功能一覽！
  4. 2024 Figma 改版與功能更新
  5. Figma 自學指南｜從零開始第一個設計稿！揭秘 UI/UX 愛用操作

註冊Figma

  1. 請觀賞 上課註冊教學影片

  2. 或觀賞官方註冊影片，或依循以下部驟完成註冊程序，並開始使用Figma！

  3. 點擊Figma主頁（https://www.figma.com/）上的Sign up註冊按鈕。

  4. 我們可以選擇google帳戶登入，或填寫E-mail，接著填入暱稱及選擇常使用類別，建立Figma帳戶
  5. 進入Figma歡迎提示，後方畫面為Figma檔案列表畫面，並產生三個基本功能操作範例檔案。
  6. 建立團隊訊息提示，在同一團隊裡，可以建立專案並與團隊共同製作專案。
  7. 團隊命名
  8. 加入團隊成員的email
  9. 到信箱收認證信，並按Confirm your email，確認信件，以完成註冊。
  10. 選擇付費方案

    11. 1.初階方案：免費，可在同一團隊裡，最多兩個共同編輯者、建立三個專案、30天版本歷史紀錄，無限的雲端空間。

    2.專業版:每位編輯者每月12美元、每年結算，或US$15/編輯/月，無限的項目，無限的版本歷史，自定義文件/用戶權限，僅邀請私人項目，共享團隊資料庫。

    3.組織(企業)方案：每位編輯者每月$ 45美元/僅按年度計費，所有專業的一切，組織範圍的設計系統，私人插件，插件管理，共享字體，SSO +高級安全，設計系統分析。

  11. 建立專案，後方會自動建立內建的Design System，可再自行修改內容。
  12. 建立專案名稱
  13. 完成專案建立
  14. 首次進入，出現建立框架提示
  15. Figma初始空白操作頁面
  16. 進入Figma團隊專案列表頁面
  17. 內建的Design System編輯頁面，色彩可自行修改，成為該專案的系統色彩

Figma介面與工具認識

使用Figma，只要有網路，可在任何電腦進入Figma官網，登入帳號或註冊帳號後，即可隨時隨地工作，繼續進度，毫無障礙。

  1. Figma進入畫面介紹（2022/09/29）

    2. 登入帳號後出現以下畫面：

  2. Figma檔案畫面介紹

  3. 工具選單說明

    4. 認識工具後，會更容易及方便操作，多練習幾次就熟悉了！

  4. 框架工具說明

    5. 在進行APP或網站設計之前，須先選擇『框架工具』，決定手機或網頁的尺寸，再開始進行設計，大家可以練習感受看看！

  5. 右側面板說明

  6. 開始進行形狀工具練習

    7. 開始進行形狀工具練習吧！
    選擇矩形工具、圓形工具、三角形工具或星形工具，輕點擊圖形，出現『空心小圓點』，即可『拖曳拉動』，產生不同形狀或角度的變化，大家可以類似畫面中的做法試試看，創造出不同的圖形，不用害怕大膽嘗試，請將練習畫面截圖上傳。

Figma基本功能說明

  • 本單元將以Figma官方基礎功能文件，引導大家完成在Figma中開始設計的基礎知識。
  • 請進入｜ 『中文化｜官方基本功能說明中文化文件』進行練習，本練習為經過整理翻譯的官方文件檔案，帶領大家認識Figma中基本八大功能： 1.Frame｜框架、2.Constraints｜約束條件、3.Components｜組件、4.Styles｜樣式、5.Smart Selection｜智能選擇、6.Exporting｜輸出、7.Commenting｜註解、評論、8.Sharing｜共享。
  • 有關更多教程內容和功能概述，請訪問Help.figma.com。
  • 請搭配觀賞本單元教學影片

    • Figma｜ 基本功能介紹

  1. Frame｜框架

    2. 框架是設計的基礎元素，是在Figma中創建的大多數東西的頂層容器。在Figma中有幾種不同的創建框架的方法，可以自訂尺寸，右側也提供了許多載具的框架預設尺寸供選擇，可直接拉取建立，非常方便。

  2. Constraints｜約束條件

    3. Constraints約束，可以將設計元素固定到其父框架的不同側。可以構建流暢的佈局以支持同一組中的多個設備大小和斷點，可以幫助建構真正的了解規則的應用方法。

    Figma Tutorial: Constraints

  3. Components｜組件

    4. Components組件，可以重複利用設計中的現有部分，從而節省了其他重複而繁瑣的工作。組件創建新物件而不是副本，從而使您可以直接在畫布上覆蓋屬性。

    組件有兩個方面：1.『主組件』Master Component，它定義了組件的屬性。2.『物件』Instance，它是可以在設計中重用的組件的副本。『物件』鏈接到主組件，因此您對『主組件』所做的任何更改都將應用於『物件』。

    Figma Tutorial: Components - The Basics

    延伸閱讀｜

    1. 使用組件Components和實例Instance

  4. Styles｜樣式

    5. 樣式功能使您可以定義一組屬性，例如顏色，字體和對象的效果，這些屬性可以在團隊的設計中重複使用。每當您更改樣式的屬性時，使用該樣式的所有對像都會立即更新。

    Figma Tutorial: Creating Styles

    Getting Started - Color Styles

    延伸閱讀｜

    1. 創建樣式

  5. Smart Selection｜智能選擇

    6. 通過智能選擇，您可以快速調整對象之間的間距，通過選擇對象創建統一的網格以及在網格佈局內重新排列對象。思考收件箱界面，新聞源和照片畫廊的網格佈局。

    How to Use Smart Selection and Tidy Up | Figma Tutorial

    延伸閱讀｜

    1. Arrange objects with Smart Selection｜使用智能選擇排列對象

  6. Exporting｜輸出

    7. Figma支援PNG，JPG，SVG和PDF 輸出格式。在瀏覽器中使用Figma時，導出內容將自動保存到您的默認下載文件夾中。嘗試使用Figma桌面應用程序導出以選擇保存位置。

  7. Commenting｜註解、評論

    8. 註釋在Figma中增加了另一層協作。您可以在畫布上的任何位置添加評論。註釋可以添加到設計文件和原型中。

  8. Sharing｜共享

    9. 在Figma中共享文件很簡單。 打開共享對話框以設置特定權限或始用鏈接訪問。 使用鏈接訪問後，共享文件就像共享其URL一樣容易。

Auto Layout

Auto Layout｜自動排版

  • Auto Layout｜自動排版，是Figma 2019年的新功能，可以使設計更為便利。

    • Figma 的 Auto Layout 功能是一個強大的工具，用於創建響應式設計，讓元素自動適應其內容和容器大小。這使得設計者能夠更輕鬆地管理布局，特別是在處理動態內容或需要多種屏幕尺寸的設計時。

    Auto Layout 功能概述

    • 自動調整大小：當內容改變（如文本增減或圖像大小變化）時，使用 Auto Layout 的容器會自動調整其大小，以適應新內容。
    • 排列元素：可以快速設置元素的排列方式，包括垂直或水平排列，並可以設定元素之間的間距。
    • 內邊距與外邊距：可以設置容器的內邊距和外邊距，控制元素與邊界及彼此之間的距離。
    • 響應式設計：Auto Layout 使設計在不同設備上保持一致性，適應不同尺寸的屏幕和內容。
    如何使用 Figma 的 Auto Layout 以下是使用 Auto Layout 的基本步驟：
    1. 選擇容器元素
      2. 選擇要應用 Auto Layout 的元素（如框架或形狀）。可以是單個元素或多個選中元素。
    2. 啟用 Auto Layout
      3. 在右側的屬性面板中，點擊「+」按鈕或「Add Auto Layout」來啟用 Auto Layout。這會將選中的元素包裹在一個自動佈局容器中。
    3. 設置方向
      4. 在 Auto Layout 屬性中選擇排列方向（垂直或水平）。這決定了容器內部元素的排列方式。
    4. 設置間距
      5. 設定元素之間的間距（Spacing Between Items），以調整元素的距離。這可以在 Auto Layout 屬性面板中進行調整。
    5. 設置內邊距
      6. 設定容器的內邊距（Padding），這會影響容器邊界與內容之間的距離。可以分別設置上、下、左、右的內邊距。
    6. 調整元素的尺寸
      7. 可以設置每個元素的尺寸為「固定尺寸」或「自適應尺寸」，以確定元素如何隨著容器大小的改變而改變。
    7. 重新排序元素
      8. 在 Auto Layout 中，可以通過拖放來輕鬆地重新排序元素，這會自動更新其位置。
    8. 嵌套 Auto Layout
      9. 可以將 Auto Layout 容器嵌套在其他 Auto Layout 容器中，這樣可以創建更複雜的佈局。

    實際應用示例

    • 按鈕組
      • 將一組按鈕放入 Auto Layout 容器中，設定按鈕之間的間距和內邊距，以便於未來調整整個按鈕組的樣式。
    • 卡片設計
      • 在設計卡片時，可以使用 Auto Layout 來管理標題、內容和圖像的排列，當內容長度改變時，卡片的大小會自動調整。
  • Auto Layout｜自動排版｜官方範例
    1. Figma-Auto-Layout-playground-Community
    2. 使用自動排版創建動態設計｜Create dynamic designs with Auto Layout
    3. 使用自動排版設計，更多設計，更少尺寸｜Design more, resize less, with Auto Layout

Auto Layout｜自動排版｜Tips & Tricks｜小技巧｜教學影片

  1. Figma Tutorial: Device Frames and Scrolling｜Figma教程：裝置框架和滾動
  2. Figma：裝置框架和滾動
  3. Figma : Auto Layout : Simple Modal
  4. Figma Tips & Tricks - UI Designer's Superpower

UI Mockup軟體

早年製作介面精稿（Mockup），多使用photoshop或Illustrator來製作，但這兩個軟體功能強大，但並不是為了介面設計而開發的軟體，因此在使用上較為複雜，開發方式及過程較不直覺，而近年來，UI設計師開始使用專為網頁（web）及行動應用程式（APP）開發的UI 設計工具來設計介面精稿。
以下介紹三個目前最夯的UI 設計工具：Sketch 是業界最愛用的介面設計軟體，但僅限於MAC OS系統使用。還有Adobe開發的介面設計軟體XD，以及異軍突起的新星Figma，無論PC MAC皆可使用，並且只要在瀏覽器上即可操作，使用非常便利。

  1. FIGMA介紹

    2. Figma是可直接在瀏覽器上操作的的 UI 設計工具，只需網路即可，因此不限系統類型，不佔電腦空間，可多位設計師共同編輯設計檔，版本歷史功能更直覺切換。

    Figma是線上介面設計工具，允許和團隊進行多人協同合作，在瀏覽器中進行設計，共同繪製使用者介面，UI、UX、網頁、App應用程式的介面原型，只要有一個成員變更內容，其他使用者都能同步查看變更和加入編輯，讓團隊可以共同討論，創作出最有共識的產品。
    Figma = Sketch（UI設計）+ InVision（原型設計） + Zeplin（標註）+ Dropbox（雲端同步）+ Abstract（版本歷史）+ Craft-Freehand（實時討論） + Liveshare（實時分享）+ Team Library （團隊組件庫）+ Web API（第三方接入）+ …

    延伸閱讀｜

    1. Figma官網連結
    2. 學習Figma, 從這裡開始-最新的Figma 中文文檔和優質原創教程
    3. 深入了解Figma：UI 設計神器
    4. Figma — 異軍突起的設計協作神器
    5. Figma免費線上協同設計工具，和團隊一起編輯＆繪製UI、UX介面原型。

  2. Sketch
    3. Sketch只支援 MAC OS，是業界主要慣用軟體，直觀的介面，沒有任何軟體基礎的人都容易上手，門檻不會太高。有豐富強大套件資源，Toolbox 有豐富的套件、模板、外掛等資源，加速設計流程。

    延伸閱讀｜

    1. Sketch官網連結
    2. Sketch學習筆記（一）-基礎介面與工具
    3. 自學介面設計及Sketch資源分享
    4. SKETCH 初心者在設計 UI 前要做的五件事！
    5. Sketch 3 很高興認識你
    6. UI/UX設計師必備！五大實用Sketch外掛程式推薦

  3. Adobe XD

    4. Adobe XD是Adobe系列的UI設計工具，支援 MacOS、Windows，因為是Adobe開發的軟體，操作簡單，類似 Illustrator 介面。能整合 AI 與 PS，可以能整合 Illustrator 文件。能在Creative Cloud 做儲存與共用。

    延伸閱讀｜

    1. Adobe XD官網連結
    2. Adobe Xd 軟體新手詳解圖文教學
    3. Adobe XD 推出免費方案，這將會是你學習 UI 設計的入門磚？
    4. Adobe XD 專為Prototype原型設計而生，UX操作設計工具
    5. 欸你覺得 Sketch 還是 Adobe XD 哪個比較好用?

課後作業

課後作業：

  1. 註冊Figm｜ FIGMA
  2. 確實練習｜『中文化｜官方基本功能說明文件』中的基本八大功能：1.Frame｜框架、2.Constraints｜約束條件、3.Components｜組件、4.Styles｜樣式、5.Smart Selection｜智能選擇、6.Exporting｜輸出、7.Commenting｜註解、評論、8.Sharing｜共享
  3. 開始了解不同的UI軟體｜閱讀相關文章並實際操作看看
  4. 練習形狀功能
  5. 製作一個Auto Layout的卡片設計
  6. 尋找欲修改的主題 Figma 簡報範例，並搜尋相關ReDesign案例