文章目录

Figma新手的第一个项目应当小而完整。与其连续观看功能介绍,不如用一个登录页完成从结构、布局到组件、原型和评审的闭环;重点是理解对象之间的关系,而不是追求精美视觉。

Figma新手创建登录页练习文件示意

先明确练习要交付什么

准备登录页、错误提示和登录成功后的简单页面,确保练习包含默认、输入、错误和完成状态。还不理解Figma定位时,可先查看Figma是什么及核心能力。

创建文件、页面与Frame

建立“练习说明”“设计稿”“组件”三个页面,在设计稿页创建目标设备Frame。给页面、Frame和图层使用可读名称,避免保留大量Rectangle和Group默认名。

用布局搭建表单

先确定内容顺序,再处理间距、对齐和尺寸。将标题、输入框、提示与按钮放进合理的Frame;内容可能变化的区域优先使用自动布局,避免完全依赖绝对位置。

登录表单Frame与自动布局结构示意

把重复元素做成组件状态

输入框至少包含默认、聚焦和错误状态;按钮包含默认、禁用与加载状态。组件不是为了炫技,而是让不同页面复用同一套行为和视觉规则。

连接一条最短原型路径

从默认页连接到错误提示和成功页,说明触发方式与返回路径。原型复杂时,可参考交互原型设计和评审方法控制演示范围。

分享文件并完成复盘

邀请一名协作者仅根据页面命名和说明完成评审,记录找不到入口、状态不清和组件难以复用的问题。也可以在Pixso工作台重建同一练习,比较不同工具的学习路径。

团队在线评审登录页原型的协作示意