图层入门

图层是设计稿的基本单位。文字、形状、图片、画框都属于图层。你可以分别编辑每个图层，再通过叠放、排版和组合，把页面搭起来。

先理解 3 个基础概念

图层顺序

图层面板里越靠上的图层，显示时越靠前。

如果文字被图片挡住，通常只需要把文字图层移动到图片图层上方。

图层属性

选中图层后，可以在右侧边栏查看和调整它的属性。常用属性包括：

• 位置和尺寸
• 填充
• 描边
• 圆角
• 透明度
• 阴影和模糊等效果

不同类型的图层，会显示不同的可编辑属性。

容器

容器顾名思义，用来承载和组织其他图层。

你可以用容器搭页面结构、分区块，也可以把它作为自动布局和组件的基础。

常见图层类型

文本

文本图层用来放标题、正文、按钮文案等内容。

使用文本工具 T 创建文本后，可以继续调整字体、字号、字重、行高、颜色等样式。

形状

矩形 R、椭圆 O、多边形等形状，常用来绘制按钮、标签、卡片底板和图标基础元素。

如果需要更自由的图形，也可以使用钢笔工具 P 自定义绘制。

图片

图片、GIF 和视频可以作为内容素材使用。

通常可以直接拖入画布，也可以把图片作为填充添加到画框或形状中。

图层怎么组合使用

自动布局

自动布局适合列表、卡片、按钮组等需要规律排列的内容。

当你新增内容、修改文字长度，或需要适配不同尺寸时，自动布局会自动处理对齐、间距和尺寸变化，减少手动调整。

组件

组件适合管理会重复出现的元素，比如按钮、输入框、卡片、导航项。

先创建一个主组件，再在设计中使用它的实例。以后如果你修改主组件，相关实例也会同步更新，更方便统一维护。

快速上手建议

• 先用容器搭结构，再逐步补充文本、形状和图片
• 用图层顺序处理遮挡关系
• 重复出现的元素尽早做成组件
• 需要跟着内容自动变化的区域，优先使用自动布局

这样做，页面会更容易搭建，后续修改也会轻松很多。