Figma Design 入门(2025)

课程概览

Figma Design 用于创建各种数字体验,包括移动应用、网站、插图等。

通过这个实践课程,开始你的 Figma 设计学习之旅。我们将涵盖形状、文本和框架等基础知识,并深入更高级的功能,如自动布局、组件和原型设计。到课程结束时,你将准备好开始将你自己的想法变为现实。

更新

本课程发布于 2025 年 5 月。Figma 设计一直在改进,我们视频中展示的一些视觉细节可能与当前版本有所不同。尽管存在视觉差异,但核心功能保持不变,因此你仍然可以跟随课程步骤实现相同的结果。

在本课程中,你将发现 Figma Design 的强大功能。无论你的角色或经验水平如何,如果你正在寻找将想法变为现实的方法,这门课程都适合你。

我们将从头开始设计一个作品集网站。从在画布上添加第一层,到构建一个完全响应式和交互式的布局。我们将涵盖形状、文本和框架等基础知识,并探索自动布局、组件和原型设计等高级功能。到课程结束时,你不仅将拥有一个可定制的作品集网站,还将掌握将你自己的想法变为现实所需的技能。

想用其他语言学习?这门课程使用 YouTube 的自动配音功能,使内容可用多种语言呈现。你可以通过点击 YouTube 视频播放器中的⚙️设置,从列表中选择一种语言来更改视频的语言。访问 YouTube 帮助中心了解更多关于使用 AI 进行自动配音的信息。

social-cut.gif

课程要求

要完成这门课程,你需要一台电脑、一个互联网连接和一个 Figma 账户。我们将使用的功能在免费的 Starter 计划中提供,所以你不需要付费订阅就可以开始学习。如果你没有 Figma 账户,我们将在下一个视频中教你如何创建一个。

你可在浏览器中使用 Figma,或下载 Figma 桌面应用程序。了解更多关于Figma 的系统要求

课程资源

社区文件:Figma Design for beginners 社区文件包含我们将要创建的组件和页面布局的示例。在学习课程的过程中参考这个文件,或者使用完成的组件来探索和开发你自己的页面布局。

帮助中心:想了解某个特定功能的更多详情?Figma 的帮助中心为您提供关于自动布局组件原型设计等内容的全面指南。

Figma 论坛:在 Figma 论坛上提问、分享想法,与其他学习者建立联系。

快速开始

创建你的Figma账户

浏览文件浏览器并自定义你的个人资料

创建你的第一个设计文件

Advocate sidebar: Learn more about portfolios
倡导者侧边栏:了解更多关于作品集

倡导者侧边栏
加入 Figma 倡导者 Kaitie 和 Lauren,他们谈论作品集、它们为何有用,以及他们计划如何开始更新自己的作品集。

探索 Figma Design

探索设计文件 Navigate Figma Design files

设置文件偏好

图层和框架

使用形状和填充创建你的头像

使用文本图层构建你的简介

将图层添加到框架中

倡导边栏:作品集个性化
加入 Figma 倡导者 Kaitie 和 Lauren,看看他们在构思作品集时考虑了哪些方面,以及探索了哪些设计选择。

框架预设和约束

使用预设框架创建框架

创建章节标题、段落文本和引用块

创建图像和英雄区

约束基础

Clean up your layers

Advocate sidebar: The differences between sections, groups, and frames

自动布局与组件

Auto layout fundamentals

Create the button

Components fundamentals

Create the card and container system

Advocate sidebar: Auto layout tips and tricks

More auto layout and components

Create the navigation bar and footer

Vector editing

Combine shapes using boolean operations

Use vector edit mode to modify shapes

Turn an ellipse into an arc

Create the skills list

Instances

Assemble your portfolio pages

Prototyping

Prototyping fundamentals

Add prototype connections

Set page scrolling behavior and customize animations

What 's next?

Course wrap up

Advocate sidebar: What's next?