devgo.cnFigma
Figma 是运行在浏览器中的协作式设计平台，适合 UI/UX 设计、网页设计、原型制作和设计交付。它真正值得学习的不是“画图”，而是一套从 Frame、Auto Layout 到 Components、Prototype 的界面设计工作流。
立即使用 Figma ↗
它到底是什么？
很多人第一次接触 Figma，会把它理解成“在线版 Sketch”或“在线画图软件”。这个理解不完整。Figma 的核心是一个基于画布的产品设计环境：设计师可以在同一个文件里创建界面、组织组件、制作交互原型，并让其他成员直接评论和协作。
它尤其适合团队工作，因为文件天然处于云端，多人可以同时编辑同一个设计文件。设计完成后，还可以通过原型和 Dev Mode 等能力把设计进一步交给产品和开发环节。
真正需要掌握的四个核心
先理解 Frame，而不是直接堆图形
Frame 是 Figma 中最重要的容器之一。它可以承载文字、图片、组件和其他 Frame，并成为响应式布局、约束和原型连接的基础。做网页或 App 时，可以把它理解成一个可控制的界面容器。
让界面自己适应内容变化
Auto Layout 是 Figma 最值得掌握的能力之一。它可以根据方向、间距、内边距和尺寸规则自动排列元素。按钮文字变长、列表增加项目、卡片内容变化时，布局可以跟着调整，而不是重新手动摆一遍。
把重复的设计变成组件
组件解决的是“改一次，多个地方跟着改”的问题。按钮、输入框、导航、卡片等重复出现的界面元素，都可以抽象成可复用组件，再通过 Instance 在不同页面使用。
不用写代码先把交互跑起来
在 Prototype 面板中，可以把不同 Frame 连接起来，设置点击、拖拽等触发方式以及转场动画。它的价值不是做最终产品，而是在开发之前快速验证用户流程和交互方案。
第一次做一个界面，建议这样走
创建页面与 Frame
先确定设备或网页尺寸，再建立页面结构。不要一开始就纠结颜色和阴影，先把信息层级和布局关系确定下来。
用 Auto Layout 组织结构
把按钮、导航、列表、卡片等有明确排列关系的元素放进 Frame，并设置方向、间距、Padding 和尺寸行为。
抽取 Components
发现同一元素需要重复使用时，就把它做成组件。后续修改主组件，可以统一维护整个设计系统。
连接 Prototype
把关键页面连接起来，模拟登录、导航、弹窗、提交等核心路径，然后直接预览并让别人反馈。
进入交付
确认视觉和交互后，再进入开发交付。开发者可以查看尺寸、颜色、字体、间距等设计属性，减少来回沟通。
适合哪些场景？
UI/UX 设计：从线框图到高保真界面，再到交互原型。
网页设计：使用 Frame、Auto Layout 和 Components 构建响应式页面结构。
设计系统：把颜色、字体、按钮、输入框和组件统一管理，保持产品视觉一致。
团队协作：设计师、产品经理和开发者可以在同一个文件里查看、评论和迭代。
一句话评价
如果 Photopea 解决的是“我需要一个在线 Photoshop”，那么 Figma 解决的是“我需要把一个产品界面从想法变成可讨论、可交互、可交付的设计”。真正值得投入时间学习的，是它的布局系统和组件思维，而不只是工具栏。
官方资料
本文根据 Figma 官方产品页面与 Figma Learn / Help Center 整理。
Figma 官方网站 · Figma Design · 官方 Prototype 介绍 · Auto Layout 官方指南