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

先明确练习要交付什么
准备登录页、错误提示和登录成功后的简单页面,确保练习包含默认、输入、错误和完成状态。还不理解Figma定位时,可先查看Figma是什么及核心能力。
创建文件、页面与Frame
建立“练习说明”“设计稿”“组件”三个页面,在设计稿页创建目标设备Frame。给页面、Frame和图层使用可读名称,避免保留大量Rectangle和Group默认名。
用布局搭建表单
先确定内容顺序,再处理间距、对齐和尺寸。将标题、输入框、提示与按钮放进合理的Frame;内容可能变化的区域优先使用自动布局,避免完全依赖绝对位置。

把重复元素做成组件状态
输入框至少包含默认、聚焦和错误状态;按钮包含默认、禁用与加载状态。组件不是为了炫技,而是让不同页面复用同一套行为和视觉规则。
连接一条最短原型路径
从默认页连接到错误提示和成功页,说明触发方式与返回路径。原型复杂时,可参考交互原型设计和评审方法控制演示范围。
分享文件并完成复盘
邀请一名协作者仅根据页面命名和说明完成评审,记录找不到入口、状态不清和组件难以复用的问题。也可以在Pixso工作台重建同一练习,比较不同工具的学习路径。
