Figma 基礎教學
Figma 簡介及設計領域應用
Figma 是一款雲端的界面設計工具，廣泛應用於UI/UX設計、原型製作(prototype)及團隊協作。它支持多人同時在線編輯，並提供豐富的設計和原型功能，適合從個人設計師到大型團隊使用。
Prototype 與 markup
UI/UX原型（Prototype）和標記（Markup）在設計和開發流程中扮演著不同的功用。
UI/UX原型（UI/UX Prototype）
- 定義與目的：
- UI/UX原型是一種可視化和可交互的設計模型，用於展示產品的外觀和功能。
-
它通常用於早期階段，以展示和測試使用者界面的設計概念。
-
特點：
- 原型可以是低保真（Low-Fidelity）的，如手繪草圖，或高保真（High-Fidelity）的，如使用工具如Figma或Adobe XD製作的互動模型。
-
它們可以展示用戶界面的布局、顏色、圖標、動畫等視覺元素，並允許模擬用戶與界面的互動。
-
用途：
- 原型用於收集用戶反饋、進行用戶測試，並與利益相關者（如產品經理、設計師、開發人員）溝通設計理念。
標記（Markup）
-
定義與目的：
- 標記通常指的是使用標記語言（如HTML）與 CSS (或SCSS) 代碼，它定義了網頁的結構和內容。
- HTML標記確定了文本、圖像、連結等元素在網頁上的位置和結構。
- 它是網頁開發的基礎，用於建立網頁的骨架。
-
特點：
- 標記語言通常是靜態的，用於定義內容的結構和呈現方式。
-
它們不包含程式邏輯，但可以和前端框架與程式語言結合。
-
用途：
- 標記是實際開發過程的一部分，它是將設計轉換為實際可用的網頁或應用界面的基礎。
- 開發人員使用標記語言來建立網站的結構和基本外觀。
註冊與設定個人帳戶
要開始使用Figma，首先需要訪問Figma網站並註冊一個帳戶。註冊後，可在個人帳戶中設置個人資料，選擇合適的訂閱方案，並進行一些基本的偏好設置。
界面概覽與導航
Figma的界面包括幾個主要部分：工具欄（Toolbar）、側邊欄（Sidebar）、畫布（Canvas）和屬性面板（Properties Panel）。學習如何在這些部分之間進行導航是設計工作的基礎。
基礎工具與功能介紹
Figma提供多種工具和功能，包括選擇和移動物件、調整大小、添加顏色和效果等。熟悉這些基本工具對於創建設計至關重要。
形狀、線條與路徑的創建
學習如何在Figma中創建各種形狀（如矩形、橢圓形）和線條，以及使用路徑工具來創建更複雜的圖形。
文字工具與排版
了解如何在Figma中添加和編輯文字，包括調整字體、大小、行距和對齊方式。良好的排版能夠顯著提升設計的整體質感。
使用層與組件
學習使用層來組織設計元素，並利用組件來創建可重複使用的設計部件，這有助於提高工作效率並保持設計的一致性。
布局技巧與對齊工具
掌握Figma的布局和對齊工具，可以幫助你快速地安排設計元素，使界面看起來更加整潔和專業。使用網格系統（Grids）和對齊工具（Alignment Tools）來改善布局的準確性和一致性。