从新手到中级 · 网页/UI 设计学习笔记

Figma 初中级操作指南

一份适合上传到 GitHub 长期查看的 Figma 学习页面，涵盖基础工具、快捷键、Auto Layout、组件、变体、样式、变量、原型和开发交付。

开始学习查看检查清单

学习目标

中级 Figma 的重点不是“会画页面”，而是能做出可复用、可响应、可维护、可交付的设计结构。

初

初级目标

掌握 Frame、矩形、文字、Fill、Stroke、Radius、基础排版、页面分区、按钮和卡片设计，能完成简单网站首页。

中

中级目标

掌握 Auto Layout、组件、变体、组件属性、样式、变量、约束、原型、交互组件和开发交付，能搭建小型设计系统。

常用工具与快捷键

先熟练掌握高频工具，再逐步扩展到组件、变量和原型。

中文名称	英文名称	快捷键	用途
选择工具	Move Tool	`V`	选择、移动、调整元素
Frame 工具	Frame Tool	`F`	创建页面、区块、容器
矩形工具	Rectangle	`R`	画背景、按钮、卡片、图片占位
圆形工具	Ellipse	`O`	画圆形、头像、图标底
线条工具	Line	`L`	画分割线
钢笔工具	Pen	`P`	绘制矢量路径
文字工具	Text	`T`	添加标题、正文、按钮文字
自动布局	Auto Layout	`Shift + A`	控制排列、间距、响应式布局
创建组件	Create Component	`Ctrl + Alt + K`	把元素变成可复用组件
搜索命令	Actions Menu	`Ctrl + K`	搜索命令、插件、资源

基础属性

选中元素后，在右侧面板调整位置、尺寸、填充、边框和圆角。

位置与尺寸

X 水平位置，Y 垂直位置，W 宽度，H 高度。

Desktop: 1440 × 1024
页面变长：H 1600 / 1800 / 2000

Fill / Stroke

Fill 用于背景和按钮颜色；Stroke 用于卡片、按钮边框和分割线。

Fill: #FFFFFF / #F9FAFB / #6B21A8
Stroke: #E5E7EB / #D1D5DB

Radius 圆角

按钮、卡片和图片区域都常用圆角，让视觉更柔和。

按钮：24
卡片：16 / 20
图片区域：20 / 24
圆形：999

常见网页结构

临摹或设计网站首页时，先搭结构，再做细节。

Header 顶部导航

通常包含 Logo、导航菜单、右侧按钮。建议高度约 80px，导航菜单使用 Auto Layout。

Hero 首屏区域

包含大标题、副标题、按钮组、右侧图片，是首页最重要的视觉区域。

内容区 / 卡片区

常用于优势、服务、产品、案例展示。卡片建议统一尺寸、圆角、边框和间距。

产品区 / 服务区

可用产品卡片、服务卡片或案例卡片展示重点内容，适合用组件复用。

Footer 页脚

包含品牌名、简介、链接、版权、联系方式，常用深色背景。

✓

整理与交付

统一颜色、字体、间距、图层命名，并检查 Auto Layout 和组件结构。

Auto Layout 自动布局

Auto Layout 类似 CSS Flexbox，是从初级进入中级的关键能力。

Figma	CSS 类比	说明
Direction: Horizontal	`flex-direction: row`	横向排列
Direction: Vertical	`flex-direction: column`	纵向排列
Gap	`gap`	元素之间的间距
Padding	`padding`	容器内部留白
Hug contents	`fit-content`	根据内容自适应
Fill container	`flex: 1` / `width: 100%`	填满父容器
Fixed	固定宽高	不随内容变化
Wrap	`flex-wrap: wrap`	自动换行

按钮 Button

文字变长时，按钮自动变宽。

Button
  └─ Label

Direction: Horizontal
Padding: 12px 24px
Gap: 8
Radius: 24
W/H: Hug

导航 Navigation

菜单间距统一，整体移动方便。

Nav Menu
  ├─ Home
  ├─ Products
  ├─ Projects
  ├─ About
  └─ Contact

Direction: Horizontal
Gap: 40 / 48

卡片 Card

内容变多时，卡片自动适应高度。

Product Card
  ├─ Image Area
  └─ Text Content
      ├─ Title
      └─ Description

Direction: Vertical
Gap: 16
H: Hug

Components 组件与 Variants 变体

组件化是中级 Figma 的核心。不要只画一次，而要做成可复用结构。

组件 Components

把按钮、输入框、卡片、导航等做成组件。修改主组件后，所有实例可以同步更新。

快捷键：Ctrl + Alt + K

Main Component 主组件
Instance 实例
Detach Instance 分离实例
Component Properties 组件属性

变体 Variants

把相似组件的不同状态、尺寸、类型集中管理。

Button
  Type: Primary / Secondary / Ghost
  Size: Small / Medium / Large
  State: Default / Hover / Pressed / Disabled
  Icon: None / Left / Right

Styles 样式与 Variables 变量

Styles 用于统一样式组合，Variables 用于管理单个设计 Token。

Color Styles

Color/Text/Primary
Color/Text/Secondary
Color/Background/Default
Color/Background/Subtle
Color/Border/Default
Color/Brand/Primary
Color/Brand/Hover

Text Styles

Text/Display/Large
Text/Heading/H1
Text/Heading/H2
Text/Body/Large
Text/Body/Medium
Text/Button/Medium
Text/Caption

Variables

color.bg.default
color.text.primary
color.brand.primary

space.4 / 8 / 16 / 24 / 32
radius.4 / 8 / 16 / 24 / full

Styles 与 Variables 的区别

Styles = 一组样式组合
例如：字体、字号、字重、行高组合

Variables = 单个可复用值
例如：颜色值、间距值、圆角值

Constraints 约束

控制元素在父级 Frame 尺寸变化时如何响应。普通 Frame 内常用，Auto Layout 内优先用 Hug / Fill / Fixed。

中文	英文	用途
左侧固定	Left	Logo、左侧内容
右侧固定	Right	右上角按钮、图标
左右拉伸	Left & Right	输入框、导航栏背景
顶部固定	Top	Header 内元素
底部固定	Bottom	Footer、底部导航
居中	Center	弹窗、居中图标

Prototype 原型与 Dev Mode 交付

中级 Figma 不只是画图，还要能演示交互，并交给开发实现。

Prototype 常见交互

On click 点击
While hovering 悬停
While pressing 按下
On drag 拖拽
Navigate to 跳转到
Open overlay 打开浮层
Back 返回
Smart Animate 智能动画

Dev Mode 开发交付

查看尺寸、间距、颜色、字体
查看 CSS 信息
导出图片 / SVG
添加注释
标记 Ready for Dev
整理组件和图层命名

Interactive Components 交互组件

把 Hover、Pressed、Switch、Checkbox 等交互直接写在组件变体中，组件拖出来后自带交互。

Button Default → While hovering → Button Hover
Button Hover → While pressing → Button Pressed
Switch Off → On click → Switch On
Checkbox Empty → On click → Checkbox Checked

Figma 与 Photoshop 的区别

Figma 是界面设计系统工具，Photoshop 是图像处理和视觉合成工具。

Figma 更适合

网页设计
App UI
后台系统
组件库
设计系统
产品原型
多人协作
开发交付

Photoshop 更适合

修图
抠图
产品精修
海报合成
图片调色
复杂视觉特效

Figma 能做而 PS 不擅长的事

多人实时协作
Auto Layout 自动布局
Components 组件
Variants 变体
Prototype 交互原型
Interactive Components 交互组件
Variables 变量
Light / Dark Mode 模式切换
Design System 设计系统
Dev Mode 开发交付

新手到中级学习路线

按顺序学习，不要一开始就追求复杂效果。

基础操作

学习 V / F / R / T / L、Fill、Stroke、Radius、Frame、基础排版、图层管理。目标：能做简单网页首页。

布局能力

学习 Auto Layout、Hug / Fill / Fixed、Gap、Padding、Constraints、响应式结构。目标：页面结构清晰且易修改。

组件能力

学习 Components、Instances、Variants、Component Properties、Interactive Components。目标：能做按钮、输入框、卡片、导航组件。

规范能力

学习 Color Styles、Text Styles、Effect Styles、Variables、Design Tokens、Light / Dark Mode。目标：能搭建小型设计系统。

交互与交付

学习 Prototype、Overlay、Smart Animate、Dev Mode、Annotations、Export、Ready for Dev。目标：能做可演示、可交付的设计稿。

练习项目清单

用项目练工具，比单独看教程更有效。

基础练习

1. 简单网站首页
   Header / Hero / Card / Product / Footer

2. Button 组件
   Primary / Secondary / Disabled / Hover

3. Input 组件
   Default / Focus / Error / Disabled

4. Product Card 组件
   有图 / 无图 / 横向 / 竖向

进阶练习

5. Responsive 网站首页
   Desktop + Mobile

6. App 小流程
   登录页 → 首页 → 详情页 → 表单页 → 成功页

7. 小型 Design System
   Colors / Typography / Buttons / Cards / Forms

8. 可点击 Prototype
   页面跳转 / 弹窗 / Tab / Hover

设计检查清单

每次完成页面后，用这份清单检查是否达到规范化设计要求。

页面结构是否清楚
左右边距是否统一
标题大小是否统一
正文颜色是否统一
卡片大小是否统一
按钮样式是否统一
区块间距是否舒服
图层命名是否清楚
常用元素是否用了 Auto Layout
常用元素是否做成组件
颜色和文字是否用了 Styles
是否便于开发查看和交付

核心记忆

先搭结构，再放内容，再调样式，再做组件，再做交互，最后整理交付。

不要只是画一个页面，
而是做一套可复用、可响应、可维护、可交付的设计结构。