Module 03 · UI Design with Figma使用 Figma 设计用户界面
Styles and Libraries in FigmaFigma 的样式与库
观看本视频后，你将能够：
- 描述 Figma 及其各种设计样式
- 解释 Figma 的库和样式
- 了解 一些流行的设计系统
- 讨论 使用样式和库的好处
Figma 概述
Figma 是一个强大的设计工具，允许用户在多个平台（包括在线和移动端）上进行设计创作。尽管 Figma 不自带预设样式列表，设计师可以根据各种设计趋势和样式作为参考，来创作自己的设计作品。
Figma 常见的设计样式
Figma 中常用的设计样式包括：
| 🎨 样式 | 📌 说明 |
|---|---|
| Material Design | 包含一套预定义的颜色、排版、图标，以及其他设计元素，如阴影、升高和层次样式。 |
| iOS | 包含 iOS 独特的预定义颜色、排版、图标、形状和符号等设计元素。 |
| Windows | 包含 Windows 独特的颜色、排版、图标以及按钮样式、导航和菜单等设计元素。 |
| macOS | 包含 macOS 设计语言的专属设计组件。 |
| Fluent | 包含 Fluent Design 独特的设计元素，如阴影、深度和动画效果。 |
Figma 库
Figma 库是设计元素、样式和资源的集合，开发人员可以在多个文档和项目中共享和使用它们。Figma 中有三种类型的库：
| 🎯 库类型 | 📌 说明 |
|---|---|
| 团队库（Team Library） | 适用于团队共享设计资源。 |
| 个人库（Personal Library） | 适用于个人使用和管理设计资源。 |
| 公共库（Public Library） | 任何用户都可以访问和使用的公共设计库。 |
样式（Styles）
样式描述设计中元素的属性，如文本、形状和图层。使用样式可以使你的设计过程更高效、更一致，因为它允许你将属性应用到设计的多个部分。
Figma 中的样式类型
Figma 提供了几种类型的样式：
| 🎯 样式类型 | 📌 说明 |
|---|---|
| 文本样式（Text Styles） | 定义文本的样式，包括字体、大小、行高等。 |
| 颜色样式（Color Styles） | 定义颜色的样式，便于在设计中保持一致。 |
| 图层样式（Layer Styles） | 定义图层的填充、边框和其他属性。 |
| 组件样式（Component Styles） | 定义组件的样式，确保组件在各设计中保持一致。 |
| 效果样式（Effect Styles） | 定义如阴影、模糊等效果的样式。 |
流行的设计系统
Figma 支持多个流行的设计系统，作为公共库提供，这些设计系统包含了预设计的 UI 组件、样式和资源，方便用户在设计项目中使用。
流行的设计系统
| 🎯 设计系统 | 📌 说明 |
|---|---|
| Google Material Design | 一套开源、适应性强的设计系统，提供预设的设计样式和组件。 |
| Bootstrap | 包含渐变、阴影等选项，支持定制设计。 |
| iOS Design Kit | 包含 3300 多种组件变体，配有 SF Pro 字体和最新的 SF 符号。 |
| Salesforce Lightning Design System | 创建 Salesforce Lightning 风格的组件。 |
| Fluent Design | 微软的 Fluent 设计系统，提供流畅的视觉体验。 |
使用样式和库的好处
使用 Figma 样式和库可以极大提高设计效率和一致性。以下是一些使用 Figma 样式和库的好处：
| 🎯 好处 | 📌 说明 |
|---|---|
| 保持设计一致性 | 库中的组件确保设计的一致性，减少错误和差异。 |
| 提高设计质量与工作流 | 样式的多样性改善了设计的流畅度和工作流程。 |
| 重用设计资产 | 你可以在不同的项目中重用库中的设计元素，提高效率。 |
| 团队协作 | 通过共享库中的资产和组件，团队成员可以轻松协作。 |
| 可扩展性 | 库中的组件具有可扩展性，设计在扩展时能方便地添加新元素。 |
| 适用性强 | 无论知识水平如何，所有用户都可以使用库中的设计组件。 |
| 节省时间 | 设计师可以在不同屏幕和设备之间轻松导航，节省时间和精力。 |
总结
在本视频中，你学习了以下内容：
- Figma 是一个强大的设计工具，支持多个设计平台。
- Figma 中有多种设计样式，如 Material Design、iOS、Fluent 等。
- Figma 提供了三种类型的库：团队库、个人库 和 公共库。
- Figma 支持多种样式类型，包括 文本样式、颜色样式、图层样式 等。
- 流行的设计系统 如 Google Material Design 和 Fluent Design，可以作为公共库使用。
- 使用 Figma 样式和库能有效提升设计的一致性、效率，并促进团队协作。
🎨 掌握 Figma 的样式与库功能，将使你的设计工作更加高效和精确！ 🌟