Figma如何高效导出多倍图？

引言 / 什么是多倍图？

在移动端UI设计中，多倍图（如@2x、@3x）是适配不同屏幕分辨率的核心需求。无论是iOS的Retina屏幕还是Android的高密度设备，都需要通过多倍图保证界面元素的清晰度。传统设计工具中，设计师需手动导出多个尺寸的切图，耗时且易出错。而Figma通过智能切图功能，可一键生成多倍图，显著提升设计效率。

本文将系统讲解Figma中多倍图的导出方法，涵盖切图标记设置、批量导出技巧、平台适配规则三大核心场景。通过实际案例演示，帮助设计师快速掌握从单图到多倍图的自动化流程，减少重复劳动。

准备工作

1. Figma版本要求：确保使用Figma桌面端或网页版（需支持插件的最新版本）。
2. 设计稿规范：所有需要导出的元素需独立为图层或组件，避免合并图层导致切图不完整。
3. 命名规则：建议使用组件名_状态@倍数的命名方式（如button_normal@2x），便于后续筛选。

基础操作：设置切图标记与导出

步骤一：标记切图区域

1. 选中需要导出的图层或组件，在右侧属性面板中找到Export（导出）选项。
2. 点击+添加导出格式，默认生成1x的PNG文件。
3. 勾选Include in export（包含在导出中），确保元素被标记为可切图。

提示：若需导出整个画板，右键画板名称选择Export as...，但建议优先标记单个元素以控制文件大小。

步骤二：设置多倍图倍数

1. 在导出格式下方，通过下拉菜单选择倍数：
   • iOS常用：@2x（iPhone Retina）、@3x（iPhone Plus/X）
   • Android常用：xhdpi（2.0）、xxhdpi（3.0）、xxxhdpi（4.0）
2. 可同时添加多个倍数格式，Figma会自动生成对应尺寸的切图。

   
   | 平台   | 推荐倍数       | 对应密度   |
   |--------|----------------|------------|
   | iOS    | @2x, @3x       | 2x, 3x     |
   | Android | xxhdpi, xxxhdpi| 3.0, 4.0   |
   

步骤三：批量导出切图

1. 点击右上角Export按钮，或使用快捷键 `Shift + Ctrl + E`（Windows）/ `Shift + Command + E`（Mac）。
2. 在弹出窗口中：
   • 选择导出格式（PNG/SVG/JPG/PDF）
   • 勾选Export as slices（按切片导出）
   • 设置保存路径后点击Export。

提示：导出前可通过Preview预览不同倍数的切图效果，避免尺寸错误。

进阶技巧：自动化多倍图流程

技巧一：使用组件变体批量管理

1. 创建组件时，通过Properties（属性）定义状态（如正常/按下）和倍数（如@2x/@3x）。
2. 在实例中使用时，直接切换属性即可自动适配对应倍数的切图，无需重复标记。

技巧二：通过插件优化导出

1. 安装插件：搜索并安装Figma to Code或Anima Export，支持更复杂的导出规则。
2. 自定义脚本：使用Figma API编写脚本，自动为所有切图添加平台前缀（如ios_button@2x）。

   // 示例：自动添加iOS前缀的脚本
   figma.currentPage.selection.forEach(node => {
     if (node.type === 'FRAME' && node.exportSettings.length > 0) {
       node.name = `ios_${node.name}`;
     }
   });
   

技巧三：适配不同平台的命名规则

1. iOS规范：使用@2x/@3x后缀，如icon_home@2x.png。
2. Android规范：使用密度描述前缀，如ic_home_xxhdpi.png。
3. 通用方案：在Figma中统一使用@倍数格式，导出后通过批量重命名工具转换。

常见问题

Q：导出SVG时如何保留多倍图信息？

A：SVG是矢量格式，无需设置倍数。导出时选择SVG格式即可，开发者可通过代码控制渲染尺寸。

Q：为什么导出的切图有空白边距？

A：检查图层是否包含隐藏元素或阴影效果。解决方法：

1. 选中图层后点击Flatten selection to bitmap（将选择项展平为位图）。
2. 在导出设置中勾选Trim transparent pixels（修剪透明像素）。

Q：如何快速导出所有画板的切图？

A：使用插件Batch Export或手动操作：

1. 按住`Shift`多选画板。
2. 右键选择Export as...，Figma会自动合并所有切图。

小结

通过本文的步骤，设计师可掌握Figma中多倍图导出的完整流程：从标记切图区域、设置倍数规则，到批量导出与平台适配。核心技巧包括：

1. 优先使用组件变体管理不同状态；
2. 结合插件实现自动化命名；
3. 导出前通过预览功能检查尺寸。

实际项目中，建议建立团队统一的切图规范（如命名、倍数、格式），并利用Figma的Team Library共享组件，进一步减少重复劳动。掌握这些方法后，单个项目的切图时间可从2小时缩短至10分钟，显著提升设计交付效率。