Figma UI3 新手入门教学：Frame 框架、Auto Layout 自动布局与基础组件

打开空白画布不知从何下手？先搞懂 Frame 与 Auto Layout 两大基石

刚接触 UI/UX 介面设计的新手，第一次打开 Figma 时常常会把画布当成一般绘图软件，用矩形工具拉出一堆方框，结果只要改一行字或换一张图，整个版面就瞬间走位崩溃！😭 这份入门选集先从文字、图片与外框的关系切入。要把 Figma 用得顺手，核心关键在于建立「结构化容器」的思维——也就是理解 Frame（框架） 与 Auto Layout（自动布局） 的运作逻辑。

特别是更新到 Figma UI3 介面之后，底部浮动工具列与右侧属性面板变得更加精简，但像是 Hug contents（贴合内容）、Fill container（填满容器）以及 Gap（间距）与 Padding（内距）等设定，依然是决定版面能否自动适应不同屏幕尺寸的灵魂所在。只要把这套弹性盒子概念打通，日后修改按钮或卡片列表就再也不用逐个像素手动拖拉了！💡

从零基础介面导览、自动布局实作到第一个基础组件的 3 阶段学习路线

为了帮大家省去在茫茫片海中摸索的时间，兔兔精选了 7 部针对零基础与初学者设计的中文实战教学，并分成三个循序渐进的阶段：第一阶段先用 30 分钟快速熟悉 Figma 下载安装、UI3 工作环境与完整设计流程；第二阶段集中火力攻克新手最容易卡关的 Auto Layout 自动布局 与 Suggest Auto Layout 智能排版技巧；第三阶段则带你建立第一个可重复使用的 Component（基础组件） 与简易页面跳转原型。跟著影片一步步练习，对照范例练习第一张 App 介面卡片。