Sketch 是 Mac 平台上一度统治界面设计领域的矢量工具。虽然近年协作场景被 Figma 抢走了大半份额，但在 Mac 本地设计、轻量项目、对性能敏感的团队里，Sketch 依然是首选。它的精髓不在画图功能本身，而在 Symbol 符号系统与共享样式。这篇指南按尧图团队的真实使用习惯，讲清楚界面、Symbol、样式、插件、导出五块。

一、界面介绍：Mac 原生的高效布局

Sketch 的界面是典型的三栏结构：左侧图层与页面列表、中间画布、右侧检查器（Inspector）。比 Figma 更紧凑，因为它是 Mac 原生应用，所有快捷键与系统手势都能用。

• 左侧：Page 分页 + Layers 图层。一个项目建议分多个 Page，比如「设计稿」「组件库」「废弃稿」，避免画布拥挤。
• 中间画布：无限大，按住空格拖动。按 Z 框选放大，按 Cmd + 0 缩放到实际尺寸，Cmd + 1 适应画布。
• 右侧检查器：选中元素后显示其属性。位置、尺寸、填充、边框、阴影、模糊都在这里调，所有数值都能直接输入。
• 顶部工具栏：可自定义。尧图团队常用的有插入（Insert）、编组、Symbol 创建、布尔运算、导出。

Sketch 的画布单位是像素（px），但它是矢量工具，放大不会模糊。这一点对网页设计师很重要：设计稿用 px 计量，直接对应屏幕像素，开发对接时数值不用换算。

二、Symbol 符号系统：Sketch 的核心

Symbol 是 Sketch 区别于普通矢量工具的核心。把一组元素打包成 Symbol 后，它可以被反复调用为实例（Instance），改主 Symbol 全部实例同步更新。创建 Symbol 的快捷键是 Cmd + Shift + K 或菜单 Layer > Create Symbol。

Symbol 的三种用法

• 组件复用：按钮、输入框、卡片头、导航条，画一次做成 Symbol，全站调用。改主 Symbol 时所有实例同步更新。
• 布局占位：把页面骨架做成 Symbol，新建页面时调用占位，再覆盖内容，保证布局统一。
• 状态切换：用 Override 切换同一组件的不同状态。比如一个 Symbol 按钮里放 default / hover / disabled 三种样式，用 Override 切换。

Sketch 的 Symbol 支持嵌套：一个卡片 Symbol 里可以包含按钮 Symbol、头像 Symbol。嵌套结构能反映组件的真实层级，但也容易过度嵌套导致修改困难。尧图团队的经验是嵌套不超过三层，超过就拆。

Symbol 的 Override 覆盖

每个 Symbol 实例都可以在右侧检查器里覆盖主 Symbol 的属性：文字内容、图片、嵌套 Symbol 的样式。尧图做卡片列表时，主卡片 Symbol 留好图片位与文字位，每个实例覆盖成不同的内容，就能快速生成一组卡片。

三、共享样式：让色彩与字体可维护

Sketch 的共享样式（Shared Style）分两种：Layer Style（图层样式，针对填充、边框、阴影）与 Text Style（文字样式，针对字体、字号、行高、颜色）。共享样式与 Symbol 的区别：Symbol 是复用整个元素，共享样式是复用样式属性。

建样式的顺序

• 先建 Layer Style：把品牌色、语义色（success/warning/error）、中性灰都建成填充样式，命名如「Green / Primary」「Red / Error」。
• 再建 Text Style：按字号阶建立，命名如「H1 / 32 / Bold」「Body / 16 / Regular」「Caption / 12 / Medium」。
• 应用到元素：选中元素，在右侧检查器选样式。改样式时所有引用处同步更新。

尧图团队的项目里，所有色彩都通过 Layer Style 应用，不允许直接在元素上写死色值。这样换主题色时只改样式定义，全站秒变。Text Style 同理，字号、行高统一管理，避免每个文字图层手动调。

Sketch 还支持 Variables（变量），类似 Figma 的 Variables，可以把色彩与尺寸存成变量，在样式中引用。这是 Sketch 70+ 版本加入的能力，建议团队项目里把 Variables 与 Shared Style 配合用：Variables 存底层 Token，Shared Style 存应用层样式。

四、插件推荐：装这四个就够

Sketch 的插件生态比 Figma 早成熟，但近年差距在缩小。尧图团队的标准配置就四个，覆盖标注、内容填充、图标、导出。

• Sketch Measure：把设计稿一键导出带标注的 HTML 页面，开发同事打开浏览器就能看到尺寸、间距、色值。Figma Dev Mode 出现前的标注事实标准。
• Content Generator：批量填充姓名、邮箱、图片、文字内容。做列表设计时不用手动复制粘贴假数据，一键填充十几个真实感的占位内容。
• Symbol Organizer：自动整理 Symbol 列表，按命名分层归组。Symbol 多了之后画布乱成一团，这个插件能保持整洁。
• Sketch Palettes：导入导出色彩调色板，团队共享一套色板。配合前面建的 Layer Style，全队色彩统一。

插件管理在菜单 Plugins > Manage Plugins。建议把不常用的插件禁用而不是卸载，需要时再启用，避免插件冲突导致 Sketch 崩溃。

五、导出技巧：切图与多倍图

Sketch 的导出能力比 Figma 更细致。每个元素、Symbol、切片（Slice）都能配置导出规则，支持 1x/2x/3x 多倍图与 SVG/PNG/JPG/PDF 多格式。尧图团队给开发交付切图时全靠它。

导出三种方式

• 切片工具：按 S 在画布上拖出切片区域，右侧配置导出格式与倍数。适合从大设计稿里切局部资源。
• 元素直接导出：选中任意元素或 Symbol，右下角「Make Exportable」勾选，配置格式与倍数。元素本身就成了可导出单元。
• 批量导出：选中多个元素，菜单 File > Export，所有标记为 Exportable 的元素一次性导出，按命名规则生成文件。

网页项目导出建议：图标用 SVG（矢量无损、文件小）、位图用 PNG（带透明）或 WebP（体积更小）、照片用 JPG。倍数方面，1x 给普通屏，2x 给 Retina 屏，3x 给高分辨率手机。命名建议用 kebab-case，比如 icon-home@2x.png、card-avatar.svg。

导出预设

Sketch 支持保存导出预设。把常用的「SVG + PNG@2x + PNG@3x」组合存成预设，下次直接套用。尧图团队的预设命名「Web 三倍图」「图标 SVG」「照片 JPG 80%」，对应不同场景一键导出。

六、实战技巧总结

1. 用 Mirror 在真机预览。Sketch Mirror 是 iOS 伴侣 App，设计稿实时同步到 iPhone 上预览。做移动端设计时，色彩与字号在真机上验证比在 Mac 上准。

2. 用布尔运算画复杂图标。Sketch 的 Union（合并）、Subtract（减去）、Intersect（相交）、Difference（差集）能组合简单形状做出复杂图标。比如圆角矩形减去小矩形做出信封图标。组合后保持可编辑，比直接画路径灵活。

3. 用组件库文件统一管理。把所有主 Symbol、共享样式集中在一个「设计系统」文件里，业务文件通过「Linked Symbols」引用。这样改组件只改一处，所有业务文件同步更新。这是 Sketch 对标 Figma Library 的方式。