Module 03 · UI Design with Figma使用 Figma 设计用户界面
Hands-on Lab: Getting started with Figma动手实验：Figma 入门指南
在本实验中，我们将学习如何设计屏幕，为网站创建用户界面，并使用 Figma 创建原型。
目标
完成此实验后，您将能够：
- 在 Figma 中创建一个帐户
- 为网站创建用户界面
- 使用 Figma 设计屏幕并创建原型
练习 1：创建您的 Figma 账户
- 访问 Figma 网站：https://www.figma.com/
- 点击位于右上角或页面中央的“开始使用”按钮，如下图所示：
- 点击“开始使用”按钮后，将弹出一个窗口，您可以在其中输入您的电子邮件地址和密码。您也可以通过点击“使用 Google 继续”按钮来使用您的 Google 账户注册。
- 点击“创建账户”按钮。
- Figma 会向您发送一封验证电子邮件。打开您的电子邮件并点击验证链接。
- 一旦您验证了您的电子邮件地址，您将被带到 Figma 仪表板。
- 您可以通过点击“创建新文件”按钮或选择任何模板来开始创建您的第一个项目。
练习 2：创建用户界面
在本练习中，您将设计一个 Figma 中的用户界面。
- 从 Figma 仪表板开始，创建一个用户界面的设计。
- 点击 新建设计文件 来设计您的新用户界面。使用 Figma 的矢量工具、库和资产来为您的网站创建设计。
- 点击工具栏上的 矩形，为用户界面的顶部导航栏创建一个矩形。
- 接下来，创建另一个矩形，并将其放置在设计底部，用于我们的网站链接。
- 再次使用矩形，在设计的左侧创建一个高矩形。这是一个用于额外网站链接的左侧导航栏。
- 接下来，在顶部导航栏下方并靠右创建一个小而细的矩形。这个区域将用于代表来自流媒体网站（如 YouTube、Vimeo 和 TikTok）的热门视频主题的不同按钮。
- 在按钮下方，创建六个占位方块，以代表来自不同流媒体平台的热门视频。
- 最后，从工具栏中选择线条工具，在视频占位符的底行下绘制一条线。这条线将更热门的视频与网站主页上的其他内容分开。
练习 3：使用 Figma 创建原型
- 从设计开始：在创建原型之前，您需要一个设计。使用 Figma 的矢量工具、库和资源来创建您的应用程序或网站的设计。
- 点击右上角的“原型”。
- 要创建原型，您需要通过交互将框架链接在一起。选择第一个框架上的一个对象，然后点击右上角的“原型”。拖动蓝色箭头到您想要链接的框架，如下图所示。
- 预览您的原型：一旦您将框架链接在一起，您可以预览您的原型。点击右上角的“预览”按钮查看您的原型的实际效果。测试您的交互以确保它们按预期工作。
- 分享您的原型：一旦您对原型满意，您可以与他人分享以获取反馈。点击右上角的“分享”按钮，然后选择您喜欢的任何分享选项。您可以分享链接、嵌入您的原型，或邀请其他人在 Figma 中查看或编辑您的设计。
摘要
恭喜你！你已经学会了如何设计屏幕并使用 Figma 创建原型。