Layout - 教程分享 - 第2页

Figma 栅格系统实战：从 8pt 规则到可复用的布局组件

这篇教程用一个可复用的页面框架示例，手把手教你在 Figma 里建立 8pt 间距体系、桌面平板移动三档栅格，并把栅格规则封装成可套用的 Auto Layout 布局组件，让后续做海报、落地页或后台页面时对齐一...

教程分享 22小时前 0

Figma 从零做出可复用的海报网格：Auto Layout + 约束 + 组件变量实战

这篇教程用一个“可复用海报网格”为例，手把手讲清 Figma 里 Auto Layout、约束、布局网格、组件与变量的组合用法。照着做完，你会得到一套可快速换图换文、自动对齐、可一键生成多尺寸的海报模板。

教程分享 1天前 0

Figma Variables 实战：做一套可切换的浅深色主题（含按钮/输入框组件）

这篇教程用最短路径带你在 Figma 里把 Variables 用起来：先搭颜色与字号变量，再建立 Light Dark 两套 Mode，最后把变量绑定到按钮与输入框组件，让整套 UI 一键切换主题并保持可维护。

教程分享 1天前 0

Figma 实战：从 0 做一个可复用按钮组件（Auto Layout + Variants + 变量）

这篇教程用可直接照做的步骤，带你在 Figma 里搭建一个可复用的按钮组件：包含 Auto Layout、Variants（多状态）、组件属性与变量（Variable）。做完后你可以快速产出 Primary Secondary Destructive、不...

教程分享 1天前 0

Figma组件变体(Variants)组织技巧：命名、属性与自动布局联动

把按钮标签做成变体时，如何命名属性、控制默认值、配合Auto Layout避免组件失控？用一套可复用的整理方法讲清楚。

教程分享 6天前 0

Figma自动布局(Auto Layout)一键做出等间距卡片：从0到可复用组件

用Auto Layout快速做出等间距卡片列表，掌握间距、填充、约束与组件化的关键设置，适合新手按步骤复现。

教程分享 6天前 0

Figma 自动布局从入门到上手：间距、对齐、嵌套和换行一次搞懂

用一个常见卡片组件示例，讲清 Auto Layout 的间距、对齐、填充、嵌套以及文本换行设置，避免越改越乱。

教程分享 7天前 0

Figma：Auto Layout 的“Fill/Hug”怎么配（不再乱跳）

用常见组件举例讲清 Fill Hug 的组合逻辑，让布局在不同文案长度下保持稳定。

教程分享 7天前 0

Figma：布局栅格（Layout Grid）怎么用才不虚

讲清列数、边距、沟槽的设置逻辑，并给出桌面与移动端的常见配置。

教程分享 1个星期前 0

Figma：Auto Layout 三个关键参数（间距、填充、对齐）

用最短路径理解 Auto Layout 的三大参数，并给出常见 UI 场景配置示例。

教程分享 1个星期前 0

Figma：布局栅格（Layout Grid）怎么用才不虚

讲清列数、边距、沟槽的设置逻辑，并给出桌面与移动端的常见配置。

教程分享 1个星期前 0

Figma：Auto Layout 三个关键参数（间距、填充、对齐）

用最短路径理解 Auto Layout 的三大参数，并给出常见 UI 场景配置示例。

教程分享 1个星期前 0

UI组件做不齐的9个原因与统一方法

组件怎么摆都不齐，通常不是审美问题，而是缺少统一坐标、间距体系与组件规则。本文总结9个最常见原因，并给出一套可落地的统一方法（含检查清单），适合Figma Sketch等场景。

设计经验 1个星期前 0

Figma 组件变形/约束失效：Auto Layout、Constraints 的7步排查

Figma 组件拉伸后变形、按钮跑位、文字溢出，常见原因是约束没设对、Auto Layout层级混乱或文本自适应规则不一致。按这7步排查，组件会稳定很多。

教程分享 1个星期前 0

#Layout

Figma 栅格系统实战：从 8pt 规则到可复用的布局组件

Figma 从零做出可复用的海报网格：Auto Layout + 约束 + 组件变量实战

Figma Variables 实战：做一套可切换的浅深色主题（含按钮/输入框组件）

Figma 实战：从 0 做一个可复用按钮组件（Auto Layout + Variants + 变量）

Figma组件变体(Variants)组织技巧：命名、属性与自动布局联动

Figma自动布局(Auto Layout)一键做出等间距卡片：从0到可复用组件

Figma 自动布局从入门到上手：间距、对齐、嵌套和换行一次搞懂

Figma：Auto Layout 的“Fill/Hug”怎么配（不再乱跳）

Figma：布局栅格（Layout Grid）怎么用才不虚

Figma：Auto Layout 三个关键参数（间距、填充、对齐）

Figma：布局栅格（Layout Grid）怎么用才不虚

Figma：Auto Layout 三个关键参数（间距、填充、对齐）

UI组件做不齐的9个原因与统一方法

Figma 组件变形/约束失效：Auto Layout、Constraints 的7步排查

大家都在看

设计笔记