从设计稿走向可体验的方案
想做界面却不知从哪下手？用 Figma 先跑通一个小流程。
Figma 适合把网站或 App 的界面画在同一份设计文件里，连接屏幕形成可点击原型，再把文件分享给同伴讨论。第一次使用，不必学完所有组件与插件：先做两个屏幕，连一次跳转，再邀请一个人反馈。
下方流程卡是本站自制的编辑思路示意，不是 Figma 操作截图；按钮位置可能因版本变化。
任务 01 · 从空白设计文件开始
先画一个入口，再画点击后的页面
选一个小场景，例如“活动列表 → 活动详情”。每个屏幕各用一张画板，先放内容层级，再调整颜色、间距和图片。
画板 A · 列表标题、卡片、进入详情的按钮
画板 B · 详情活动内容、时间、报名入口
- 登录 Figma，在 Drafts 新建设计文件，用画板工具建立两张适合目标设备的画板。
- 给画板取清楚的名字；先布置标题、正文、按钮和图片占位，再细化样式。
- 检查两屏的文字层级和按钮含义，确认第二屏能回应第一屏的操作。
先让结构成立。
查看官方画板与原型示例 ↗设计稿里的按钮只是视觉元素；没有设定原型交互前，它不会自动跳到下一页。
任务 02 · 让方案可体验
把入口按钮，连接到下一张画板
可点击原型帮助同伴理解“点这里会去哪”，比两张孤立的静态图更容易发现流程问题。
起点选择列表页上的按钮
交互点击后导航到详情画板
预览亲自点一遍，检查路径
- 切到 Prototype 视图，选中要点击的按钮或卡片。
- 把交互连线拖到目标画板，设置点击触发与导航目标。
- 点击预览，在演示窗口实际点一遍；缺少返回路径时，补上一条返回交互。
原型不等于上线网站。
查看官方原型教程 ↗它演示交互意图；真实开发仍需要处理数据、响应式、无障碍和性能。
设计不只是一张漂亮图。
Figma 曾在官方文章中提到每周有数百万人使用其产品，因此选为常用设计工具示例；这不是本站测得的流量排名。本页为独立编辑指南，非 Figma 官方教程，功能和计划以官网为准。