Figma 初中级操作指南

适合从零基础到 Figma 初中级阶段学习使用。
目标：掌握网页/UI 设计、Auto Layout、组件、变体、样式、变量、原型和开发交付的核心方法。

1. Figma 适合做什么
2. 学习目标
3. 常用工具与快捷键
4. 基础属性说明
5. 常见网页结构
6. Auto Layout 自动布局
7. Components 组件
8. Variants 变体
9. Styles 样式
10. Variables 变量
11. Constraints 约束
12. Prototype 原型
13. Dev Mode 开发交付
14. Figma 与 CSS 的对应关系
15. Figma 与 PS 的区别
16. 新手到中级学习路线
17. 练习项目清单
18. 设计检查清单

1. Figma 适合做什么

Figma 是现代 UI/UX 设计工具，适合：

网站首页设计
App / 小程序 UI 设计
后台系统界面设计
Landing Page 设计
产品原型设计
组件库设计
设计系统搭建
多人协作设计
开发交付

Figma 更适合做 界面设计、交互原型、组件化设计和协作交付。

2. 学习目标

初级阶段目标

掌握：

Frame 画板
矩形、文字、线条等基础工具
Fill 填充
Stroke 边框
Radius 圆角
基础排版
页面分区
卡片设计
按钮设计
简单 Auto Layout

可以独立完成：

简单网站首页
基础 App 页面
Banner 区域
卡片布局
产品展示区
页脚 Footer

中级阶段目标

掌握：

Auto Layout 自动布局
Components 组件
Variants 变体
Component Properties 组件属性
Styles 样式
Variables 变量
Constraints 约束
Prototype 原型
Interactive Components 交互组件
Dev Mode 开发交付

可以完成：

可复用组件库
简单设计系统
响应式页面设计
可点击交互原型
规范化交付文件

3. 常用工具与快捷键

Windows 为主。Mac 通常把 Ctrl 换成 Command，把 Alt 换成 Option。

基础工具

中文名称	英文名称	快捷键	用途
选择工具	Move Tool	`V`	选择、移动、调整元素
Frame 工具	Frame Tool	`F`	创建页面、区块、容器
矩形工具	Rectangle	`R`	画背景、按钮、卡片
圆形工具	Ellipse	`O`	画圆形、头像、图标底
线条工具	Line	`L`	画分割线
钢笔工具	Pen	`P`	绘制矢量路径
文字工具	Text	`T`	添加标题、正文、按钮文字
手形工具	Hand Tool	`H` / `Space`	拖动画布
评论工具	Comment	`C`	添加评论

编辑快捷键

功能	快捷键
复制	`Ctrl + D`
拖动复制	`Alt + 拖动`
分组	`Ctrl + G`
取消分组	`Ctrl + Shift + G`
创建 Frame 包裹选中内容	`Ctrl + Alt + G`
全选	`Ctrl + A`
删除	`Delete`
撤销	`Ctrl + Z`
重做	`Ctrl + Shift + Z`
搜索命令 / Actions Menu	`Ctrl + K`
打开快捷键面板	`Ctrl + Shift + ?`

布局与组件快捷键

功能	英文	快捷键
添加自动布局	Add Auto Layout	`Shift + A`
创建组件	Create Component	`Ctrl + Alt + K`
进入子图层	Select Child Layer	`Enter`
返回父级	Select Parent Layer	`Shift + Enter`
下一层对象	Next Layer	`Tab`
上一层对象	Previous Layer	`Shift + Tab`

视图快捷键

功能	快捷键
放大	`Ctrl + +`
缩小	`Ctrl + -`
适应画布	`Shift + 1`
选中内容适应视图	`Shift + 2`
显示 / 隐藏 UI	`Ctrl + \`

4. 基础属性说明

选中元素后，常用属性在右侧面板。

位置与尺寸

属性	说明
`X`	水平位置
`Y`	垂直位置
`W`	宽度
`H`	高度

常见网页画板：

Desktop: 1440 × 1024

页面内容变长时，可调整高度：

H: 1600 / 1800 / 2000

Fill 填充

用于设置背景色、按钮色、卡片色。

常用颜色：

白色背景：#FFFFFF
浅灰背景：#F9FAFB
主文字：#111827
正文文字：#6B7280
品牌紫色：#6B21A8
边框灰色：#E5E7EB
深色 Footer：#111827
Footer 文字：#D1D5DB

Stroke 边框

用于卡片、按钮、分割线。

常用：

Stroke: #E5E7EB
Stroke: #D1D5DB

Radius 圆角

用于按钮、卡片、图片区域。

常用数值：

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

5. 常见网页结构

临摹或设计网站首页时，通常按这个顺序：

Header 顶部导航
Hero 首屏区域
内容区 / 优势区
产品区 / 服务区
Footer 页脚

Header 顶部导航

常见内容：

Logo
导航菜单
按钮

建议：

高度：80px
左右边距：120px
导航菜单使用 Auto Layout
按钮使用 Auto Layout

Hero 首屏区域

常见内容：

大标题
副标题
按钮组
右侧图片

Hero 是网站首页最重要的区域，要保证：

标题醒目
行动按钮清晰
左右结构平衡
留白充足

卡片区

常见类型：

优势卡片
产品卡片
服务卡片
案例卡片

卡片常用样式：

Fill: #FFFFFF
Stroke: #E5E7EB
Radius: 20

Footer 页脚

常见内容：

品牌名
品牌简介
导航链接
版权信息
联系方式

常用背景：

#111827

6. Auto Layout 自动布局

Auto Layout 是 Figma 中最重要的功能之一，类似 CSS Flexbox。

快捷键：

Shift + A

Auto Layout 核心概念

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`	自动换行
Ignore Auto Layout	类似绝对定位	脱离自动布局

按钮 Auto Layout

正确结构：

Button
  └─ Label

常用设置：

Direction: Horizontal
Padding Left / Right: 24
Padding Top / Bottom: 12
Gap: 8
Radius: 24
W: Hug
H: Hug

好处：

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

按钮组 Auto Layout

结构：

Button Group
  ├─ Primary Button
  └─ Secondary Button

设置：

Direction: Horizontal
Gap: 16
Padding: 0
Fill: 无

注意：

外层按钮组不需要背景色
按钮样式放在按钮本身

导航菜单 Auto Layout

结构：

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

设置：

Direction: Horizontal
Gap: 40 / 48
W: Hug
H: Hug

卡片 Auto Layout

结构：

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

卡片外层设置：

Direction: Vertical
Gap: 16
Padding: 0
W: Fixed / Fill
H: Hug
Fill: #FFFFFF
Stroke: #E5E7EB
Radius: 20
Clip content: 开启

图片区域：

W: Fill container
H: 190

文字区域：

Direction: Vertical
Gap: 8
Padding Left / Right: 24
Padding Bottom: 24
W: Fill container

7. Components 组件

组件用于复用设计元素。

快捷键：

Ctrl + Alt + K

组件相关概念

中文	英文	说明
主组件	Main Component	原始组件，修改后影响实例
实例	Instance	从组件复制出来的副本
分离实例	Detach Instance	断开和主组件的关系
组件属性	Component Properties	控制文字、图标、开关等
组件集	Component Set	一组变体组件

中级必须会做的组件

建议练习：

Button 按钮
Input 输入框
Card 卡片
Navbar 导航
Badge 标签
Modal 弹窗
Product Card 产品卡片
Header / Footer 页面区块

组件命名建议

推荐用斜杠命名：

Button/Primary/Default
Button/Primary/Hover
Button/Secondary/Default
Button/Secondary/Disabled
Input/Text/Default
Input/Text/Error
Card/Product/Default
Nav/Desktop/Default

好处：

Assets 面板会自动分组
组件结构更清楚
更接近真实设计系统

8. Variants 变体

Variants 用来管理一个组件的不同状态、尺寸和类型。

例如按钮组件：

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

常见 Variant 属性

属性	英文	示例
类型	Type	Primary / Secondary
状态	State	Default / Hover / Disabled
尺寸	Size	Small / Medium / Large
主题	Theme	Light / Dark
图标	Icon	True / False
方向	Direction	Horizontal / Vertical

按钮变体示例

Button/Primary/Default
Button/Primary/Hover
Button/Primary/Pressed
Button/Primary/Disabled

Button/Secondary/Default
Button/Secondary/Hover
Button/Secondary/Pressed
Button/Secondary/Disabled

9. Styles 样式

Styles 用于统一颜色、字体、阴影和网格。

Color Styles 颜色样式

建议命名：

Color/Text/Primary
Color/Text/Secondary
Color/Background/Default
Color/Background/Subtle
Color/Border/Default
Color/Brand/Primary
Color/Brand/Hover
Color/State/Error
Color/State/Success

Text Styles 字体样式

建议命名：

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

Effect Styles 效果样式

建议命名：

Effect/Shadow/Small
Effect/Shadow/Medium
Effect/Shadow/Large

10. Variables 变量

Variables 可理解为设计 Token，用来管理单个值。

常用于：

颜色
间距
圆角
字符串
布尔值
亮色 / 暗色模式
桌面端 / 移动端模式

Styles 与 Variables 区别

Styles = 一组样式组合
Variables = 单个可复用值

例子：

Text Style = 字体、字号、字重、行高组合
Variable = 单个颜色值、单个间距值

Color Variables

color.bg.default
color.bg.subtle
color.text.primary
color.text.secondary
color.border.default
color.brand.primary
color.brand.hover

Spacing Variables

space.4
space.8
space.12
space.16
space.24
space.32
space.40
space.48
space.64

Radius Variables

radius.4
radius.8
radius.12
radius.16
radius.24
radius.full

Modes 模式

常见模式：

Light Mode
Dark Mode
Desktop
Mobile

示例：

color.bg.default
Light Mode: #FFFFFF
Dark Mode: #111827

11. Constraints 约束

Constraints 用来控制元素在父 Frame 尺寸变化时如何响应。

常用约束

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

使用建议

普通 Frame 内：使用 Constraints
Auto Layout 内：优先使用 Hug / Fill / Fixed
复杂响应式：Auto Layout + Constraints 结合

12. Prototype 原型

Prototype 用于创建可点击、可演示的交互设计稿。

常见交互

中文	英文	用途
点击	On click	点击按钮跳转
悬停	While hovering	Hover 状态
按下	While pressing	Pressed 状态
拖拽	On drag	滑动、拖拽
跳转到	Navigate to	页面跳转
打开浮层	Open overlay	弹窗、菜单
返回	Back	返回上一页
智能动画	Smart Animate	平滑过渡
溶解	Dissolve	淡入淡出
移入	Move in	抽屉、弹窗

中级需要掌握的原型能力

页面跳转
弹窗打开和关闭
下拉菜单
Tab 切换
Hover / Pressed 按钮状态
表单输入流程演示
移动端底部导航切换

Interactive Components 交互组件

交互组件可以把交互直接写在组件变体中。

示例：

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

好处：

组件拖出来后自带交互
减少重复连线
更适合组件库

13. Dev Mode 开发交付

Dev Mode 用于把设计交给开发查看和实现。

需要掌握：

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

开发交付前检查

页面命名是否清楚
图层是否命名清楚
颜色是否使用 Styles / Variables
字体是否使用 Text Styles
按钮、卡片是否为组件
交互是否完整
图片资源是否可导出
间距是否统一

14. Figma 与 CSS 的对应关系

会 CSS / 前端的人可以这样理解 Figma：

Figma	CSS / HTML 类比
Frame	`div`
Auto Layout	`display: flex`
Horizontal	`flex-direction: row`
Vertical	`flex-direction: column`
Gap	`gap`
Padding	`padding`
Radius	`border-radius`
Fill	`background-color`
Stroke	`border`
Text Style	字体样式
Component	可复用组件
Variant	组件不同状态
Variables	Design Tokens / CSS Variables

示例：Figma 按钮对应 CSS

Figma：

Button
Padding: 12px 24px
Radius: 24
Fill: #6B21A8

CSS：

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 24px;
  background-color: #6B21A8;
}

15. Figma 与 PS 的区别

Figma 更适合

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

Photoshop 更适合

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

Figma 能做而 PS 不擅长的事

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

总结：

Figma = 可复用、可交互、可协作、可交付的界面设计系统工具
PS = 图像处理、修图和视觉合成工具

16. 新手到中级学习路线

阶段 1：基础操作

学习：

V / F / R / T / L
Fill
Stroke
Radius
Frame
基础排版
图层管理

目标：

能做一个简单网页首页

阶段 2：布局能力

学习：

Auto Layout
Hug / Fill / Fixed
Gap
Padding
Constraints
Responsive Resizing

目标：

能做响应式结构清晰的页面

阶段 3：组件能力

学习：

Components
Instances
Variants
Component Properties
Interactive Components

目标：

能做按钮、输入框、卡片、导航组件

阶段 4：规范能力

学习：

Color Styles
Text Styles
Effect Styles
Variables
Design Tokens
Light / Dark Mode

目标：

能搭建小型设计系统

阶段 5：交互与交付

学习：

Prototype
Overlay
Smart Animate
Dev Mode
Annotations
Export
Ready for Dev

目标：

能做可演示、可交付的设计稿

17. 练习项目清单

建议按顺序练习：

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

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

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 / 按钮状态

18. 设计检查清单

每次完成页面后，检查：

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

核心记忆

Figma 初中级最重要的不是会画很多图，而是建立结构化设计思维：

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

中级 Figma 的核心目标：

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

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
README.md		README.md
index.html		index.html

Folders and files

Latest commit

History

Repository files navigation

Figma 初中级操作指南

目录

1. Figma 适合做什么

2. 学习目标

初级阶段目标

中级阶段目标

3. 常用工具与快捷键

基础工具

编辑快捷键

布局与组件快捷键

视图快捷键

4. 基础属性说明

位置与尺寸

Fill 填充

Stroke 边框

Radius 圆角

5. 常见网页结构

Header 顶部导航

Hero 首屏区域

卡片区

Footer 页脚

6. Auto Layout 自动布局

Auto Layout 核心概念

按钮 Auto Layout

按钮组 Auto Layout

导航菜单 Auto Layout

卡片 Auto Layout

7. Components 组件

组件相关概念

中级必须会做的组件

组件命名建议

8. Variants 变体

常见 Variant 属性

按钮变体示例

9. Styles 样式

Color Styles 颜色样式

Text Styles 字体样式

Effect Styles 效果样式

10. Variables 变量

Styles 与 Variables 区别

Color Variables

Spacing Variables

Radius Variables

Modes 模式

11. Constraints 约束

常用约束

使用建议

12. Prototype 原型

常见交互

中级需要掌握的原型能力

Interactive Components 交互组件

13. Dev Mode 开发交付

开发交付前检查

14. Figma 与 CSS 的对应关系

示例：Figma 按钮对应 CSS

15. Figma 与 PS 的区别

Figma 更适合

Photoshop 更适合

Figma 能做而 PS 不擅长的事

16. 新手到中级学习路线

阶段 1：基础操作

阶段 2：布局能力

阶段 3：组件能力

阶段 4：规范能力

阶段 5：交互与交付

17. 练习项目清单

18. 设计检查清单

核心记忆

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages