UI设计入门到进阶：Figma从零开始到设计系统搭建

Figma核心操作

Figma的设计文件基于云端实时协作，不需要保存、不需要传文件、不需要版本号v1_v2_v3_final_final2混乱。Figma用Frame（画框）代替传统画板，Frame支持Auto Layout（自动布局），可以把CSS的Flexbox思想带入设计工具。Auto Layout让按钮的文字变长后按钮自动变宽、列表内容增删后布局自动适应，设计师再也不用手动调整间距。组件（Component）和变体（Variant）让设计系统可规模化维护。定义一套基础组件（按钮/输入框/卡片/弹窗），后续所有页面的设计只需要拖拽组件并切换变体。组件实例和主组件联动，修改主组件后所有使用该组件的页面自动更新。

设计规范和设计系统

8px栅格系统是目前最通用的界面设计间距规范。所有间距（padding、margin、gap）都取8的倍数（8/16/24/32/48/64），极大简化了开发与设计的沟通和前端实现成本。色彩系统建议主色（品牌色）1-2个、功能色（成功/警告/错误/信息）4个、中性色（黑/白/灰阶梯）5-7个。字体大小建议建立基于用途的文本层级：大标题24-32px、小标题18-20px、正文14-16px、辅助文本12-13px。设计稿标注方面Figma的开发模式（Dev Mode）自动生成CSS/React代码片段，开发者点选页面元素就能看到对应的样式代码。设计师不再需要手动量间距和导出标注图。

设计-开发协作

设计师使用Figma的Dev Mode标注组件状态和交互逻辑（hover/pressed/disabled/focus等），开发直接获取对应的CSS变量和token名称。避免设计稿和代码之间出现翻译误差。Storybook是组件驱动的UI开发工具，开发写完组件后在Storybook中展示所有状态和交互。设计师在Storybook中直观验证实现效果是否与Figma设计稿一致，把设计验收环节前置到开发阶段而非在测试阶段发现问题时再返工。