Sketch 2025 版本带来了一项重大更新：传统的画板（Artboards）已被替换为两种全新的容器类型——框架（Frame）和图形（Graphic）。这些新容器为设计师提供了更灵活的创作方式，适用于不同的设计场景。本教程将详细介绍这两种容器的特点、使用方法及其在 UI 设计和图标/插图设计中的应用。
一、框架（Frame）：灵活的 UI 设计容器
1. 什么是框架？
框架是 Sketch 2025 中取代画板的主要容器类型。与传统的画板相比，框架没有固定的预设样式，允许设计师完全自定义其外观和行为。框架可以看作一个高度灵活的容器，适用于 UI 设计中的各种复杂布局。
框架的主要特点：
完全自定义样式：可以调整圆角半径、填充（Fills）、边框（Borders）、投影（Drop Shadows）等，与普通图层的样式设置一致。
嵌套支持：框架可以层层嵌套，适合创建复杂的界面结构。
智能调整与固定：支持自动固定功能和多种调整大小模式，便于快速布局。
2. 如何使用框架？
步骤 1：创建和自定义框架
创建框架：
在 Sketch 画布上，点击工具栏中的“插入”（Insert）菜单，选择“框架”（Frame），或使用快捷键 F。
拖动鼠标以创建一个框架，或者手动输入尺寸。
自定义框架样式：
圆角半径：在“Corners”选项中输入数值，改变框架的圆角效果。
填充（Fills）：可以添加、移除或调整填充颜色，并选择是否在导出时包含填充。
边框和投影、模糊属性：为框架添加边框、投影或其他效果，与普通图层一致。
步骤 2：将群组转换为框架
如果您已经有一个包含多个图层的群组（Group），可以将其转换为框架：
选择群组，点击检查器中的下拉菜单，选择“转换为框架”（Convert to Frame）。
转换后，群组中的背景图层样式会自动应用到框架上，简化结构。
示例：假设您有一个按钮群组，包含文本和背景矩形。转换为框架后，背景矩形的样式（如颜色、圆角）会直接转移到框架，背景矩形消失，保持设计整洁。
![sketch将群组转换为框架]( "sketch将群组转换为框架")
![sketch将群组转换为框架]( "sketch将群组转换为框架")
步骤 3：嵌套框架
框架支持嵌套，允许您在框架内再添加框架，适合构建复杂的界面层级：
在现有框架内插入新框架（通过“插入”菜单或快捷键 F）。
新框架将作为子容器，可以独立设置样式和布局。
应用场景：在一个主框架中创建多个子框架，用于设计卡片式布局、导航栏或嵌套的 UI 组件。
![sketch嵌套框架]( "sketch嵌套框架")
步骤 4：调整框架内的对象
默认行为：向框架添加对象时，对象会以固定尺寸（Fixed Size）添加，并默认固定在框架的左上角。
自动固定功能：
拖动框架内的图层时，Sketch 会根据图层位置智能建议固定选项（例如靠近顶部、底部或中心）。
点击检查器中的“自动固定”（Auto Pin）按钮，或使用快捷键 ⇧A，应用建议的固定设置。
固定选项包括：顶部、底部、左侧、右侧、中心等。
调整大小模式：
默认情况下，对象为固定尺寸（Fixed Size）。
在检查器中切换到“相对容器”（Relative to Container）模式，使对象尺寸随框架大小动态调整。
示例：设计一个按钮，使其宽度随框架宽度变化，保持响应式布局。
![sketch自动布局]( "sketch自动布局")
二、图形（Graphic）：专为图标和插图设计
1. 什么是图形？
图形是 Sketch 2025 引入的第二种容器类型，专为图标和插图设计优化。与框架相比，图形的功能更加专注，界面更简洁，适合非 UI 设计任务。
图形的主要特点：
简化检查器：只显示与几何形状和样式相关的选项，去除了 UI 设计相关功能（如堆栈）。
忽略固定和大小模式：调整大小时，图形不依赖固定点或调整大小模式，适合自由创作。
未来功能：Sketch 团队正在为图形开发更多功能，值得期待。
![sketch graphic]( "sketch graphic")
2. 如何使用图形？
步骤 1：创建图形
在工具栏的“插入”菜单中选择“图形”（Graphic），或使用快捷键（G）。
拖动鼠标创建图形容器，或者手动输入尺寸。
步骤 2：编辑图形
简化检查器：图形检查器只显示几何形状（Geometry）和样式（Styling）选项，例如填充、边框、路径编辑工具等。
自由调整大小：调整图形大小时，内部对象的固定点和大小模式会被忽略，适合绘制自由形状的图标或插图。
示例：创建一个图标，包含多个路径和形状。调整图形容器大小时，内部形状会按比例缩放，而不会受到固定点限制。
步骤 3：应用场景
图标设计：使用图形容器创建简洁的单色或多色图标，专注于形状和样式的调整。
插图创作：绘制复杂插图，图形容器的简化界面减少了不必要的干扰。
导出优化：图形容器适合导出为 SVG 或 PNG 格式，保持高质量的矢量输出。
三、框架与图形的对比
特性 | 框架（Frame） | 图形（Graphic） |
|---|---|---|
主要用途 | UI 设计、复杂布局 | 图标和插图设计 |
样式自定义 | 支持填充、边框、投影、圆角等 | 支持填充、边框等，界面更简洁 |
嵌套支持 | 支持层层嵌套 | 不支持嵌套 |
固定与调整大小 | 支持自动固定、多种调整大小模式 | 忽略固定点和调整大小模式 |
检查器功能 | 全面，包含 UI 设计相关功能 | 简化，仅限几何和样式选项 |
典型应用 | 按钮、卡片、页面布局 | 图标、插图、矢量图形 |
四、实用技巧与工作流程优化
快速固定图层：
使用快捷键 ⇧A 结合自动固定按钮，快速设置图层在框架中的位置。
示例：拖动按钮到框架右上角，点击自动固定按钮，Sketch 会建议固定到顶部和右侧。
响应式设计：
将框架内的对象设置为“相对容器”模式，打造动态调整的 UI 组件。
示例：设计一个导航栏，确保其中的图标和文本随框架宽度自适应。
简化图标设计：
使用图形容器创建图标，专注于形状和路径编辑，减少复杂设置的干扰。
示例：绘制一个购物车图标，调整图形容器大小以快速测试不同尺寸。
嵌套框架的高效使用：
在主框架中嵌套子框架，组织复杂的 UI 结构，如对话框或卡片式布局。
示例：创建一个包含标题、图片和按钮的卡片框架，嵌套子框架以单独管理图片区域。
框架（Frame）和图形（Graphic）是 Sketch 2025 的核心更新，为 UI 设计和图标/插图设计提供了更灵活的工具：
框架适合需要复杂布局和动态调整的 UI 设计，支持嵌套、自动固定和多种样式设置。
图形专为图标和插图优化，简化了操作界面，适合快速创作矢量图形。
通过本教程，您可以快速上手这两种容器，优化设计工作流程用于创建响应式 UI或精美的图标！
