EP01. “Figma 是什么？免费方案与界面导览”

首页 › PC 工具 › Graphic Design · Figma · EP01

约 8 分钟· #EP01#Figma

设计师在 Figma 画好网站，客户直接在浏览器留言、开发者直接量尺寸——同一份文件三方一起看，不用再来回传 JPG 和 PDF
Figma 是在浏览器里运行的设计工具，专门做网站、App 界面（UI）与原型（Prototype），也有桌面版
免费的 Starter 方案就能学完这个系列大部分内容；草稿（Drafts）数量不限，但团队项目只能放 3 个设计文件
跟 Canva 的定位不同：Canva 做社交媒体图、海报最快，Figma 适合设计要交给人去做成网站的界面（比较见 EP07）
以下方案与价格为 2026-09 查询 Figma 官方网站的资料，以美元计价，可能随时调整

适用版本

Figma 网页版 / 桌面版，界面为 2024 年起的新版界面（UI3），以 2026-09 为准

重点内容

Figma 能做什么

用途	例子
网站、App 界面设计	首页、产品页、手机 App 画面
原型（Prototype）	点按钮会跳页的可互动样稿，给客户试用
设计系统	统一颜色、字体、按钮组件，全站共用
设计交付（Handoff）	开发者用 Dev Mode 看尺寸、颜色、导出图片
白板（FigJam）	头脑风暴、流程图、网站架构图
简报（Figma Slides）	用 Figma 做投影片

方案比较（2026-09 查询）

方案	价格（每席位每月，USD）	重点
Starter	免费	草稿不限；团队项目 1 个、最多 3 个设计文件 + 3 个 FigJam 文件、每个文件最多 3 页；版本记录 30 天；没有 Dev Mode
Professional	Full 席位 $16 起、Dev 席位 $12 起、Collab 席位 $3 起	不限文件、团队共享组件库、Dev Mode（Full / Dev 席位）
Organization	Full $55、Dev $25、Collab $5（只能年付）	跨团队组件库、集中管理
Enterprise	Full $90、Dev $35、Collab $5（只能年付）	大企业安全与管理功能
Figma for Education	学生、教师免费（要验证身份）	课堂用途

席位类型	能做什么
Full	所有 Figma 产品都能编辑
Dev	Dev Mode、FigJam、Slides；设计文件只能看和留言
Collab	FigJam、Slides；设计文件只能看和留言

📌 付费方案另有每月 AI 用量额度（AI credits），各席位额度不同。价格以官方定价页为准，月付通常比年付贵。

💡 Starter 的「3 个文件」限制只算放进团队项目的文件；留在 Drafts（草稿） 里的文件数量不限，个人学习、接小案子足够用。不过草稿只能邀请别人查看，要邀请别人一起编辑得升级。

开始使用

到 figma.com 用 Google 账号或 Email 注册
直接在 Chrome 使用，或下载桌面版（Windows / macOS）——桌面版可以用电脑里安装的字体
在首页（File browser）按 + Create → Design 新建设计文件

⚠️ 网页版要用电脑里安装的字体（例如公司的品牌字体），需要安装 Figma 的 font installer（字体助手）；Google Fonts 的字体则不用安装就能直接用。

界面导览

flowchart LR
    subgraph L["左侧面板"]
        L1["Pages 页面"]
        L2["Layers 图层"]
        L3["Assets 资源 / 组件"]
    end
    subgraph C["中间画布 Canvas"]
        C1["设计区域"]
        C2["下方工具列"]
    end
    subgraph R["右侧面板"]
        R1["Design 属性"]
        R2["Prototype 原型"]
    end
    L --- C --- R

区域	功能
左侧面板	Pages（一个文件可以有多页）、Layers（图层）、Assets（组件与资源）
画布（Canvas）	无限大的设计区域
下方工具列	Move、Frame、形状、Pen、Text、Comment 等工具
右侧面板	Design：选取物件的位置、尺寸、颜色、字体、效果；Prototype：设定点击跳页等互动
右上角	Share 分享、▶ Present 播放原型、Dev Mode 切换

画布基本操作

动作	快捷键 / 做法
移动画布	按住空格键拖拉，或鼠标中键
缩放	`Ctrl` + 滚轮，或 `Ctrl` + `+` / `-`
缩放到全部内容	`Shift+1`
缩放到选取的物件	`Shift+2`
100% 显示	`Shift+0`
快速动作 / 搜寻功能	`Ctrl+/`（Quick actions）
查看所有快捷键	`Ctrl+Shift+?`

学完你会

✅ 说得出 Figma 适合做什么
✅ 看懂 Starter 免费方案的限制与付费席位类型
✅ 认得左侧面板、画布、右侧面板的功能
✅ 用快捷键移动和缩放画布

常见错误

❌ 以为免费版只能做 3 个文件：Drafts 里的文件不限，限制的是团队项目。
❌ 在网页版找不到电脑里的字体：要装 Figma 字体助手，或改用桌面版。
❌ 把 Figma 当成做社交媒体图的工具：可以做，但 Canva 的模板和素材更快，Figma 的强项是界面设计。
❌ 以为 Figma 设计完就会自动变成网站：Figma 画的是设计稿，还要在 WordPress/Elementor 或用代码做出来（见 EP06）。

Sources

官方文档：

📝 测验一下共 6 题