Heron Handoff工具使用指南
1. 工具简介
Heron Handoff是一款基于Figma的设计交付工具，支持将设计规范导出为开发者可用的手稿文件。该工具通过识别Figma画布中的顶层框架，帮助用户选择并导出所需设计元素，输出为包含设计规格的zip文件。
2. 快速上手
开始使用前，请确保已安装Figma和Node.js环境。
2.1 插件安装
- 访问Figma插件市场，搜索并安装"Heron Handoff"插件。
- 打开目标Figma文件，右键选择插件并运行。
2.2 功能使用
- 运行插件后选择目标顶层框架。
- 勾选"Export components list"生成组件列表。
- 选择需要导出的图像层，仅导出具有导出属性的图层。
- 完成选择后点击生成按钮。
- 导出完成后解压zip文件查看设计规格。
2.3 模块集成
通过NPM可以将Heron Handoff作为模块使用：
yarn add heron-handoff在项目中导入并配置：
import Canvas from 'heron-handoff';
const settings = {
convention: 1,
exportWebP: false,
includeComponents: false,
language: 'zh',
platform: 1,
remBase: 16,
resolution: 0,
unit: 2
};
const pageFrames = {
"755:1494": {
"name": "Plugin",
"frames": [
{
"id": "2590:442",
"name": "settings",
"image": {
"url": "/mock/2590-442.png"
}
}
]
},
"755:1493": {
"name": "Dashboard",
"frames": [
{
"id": "2941:26",
"name": "file detail",
"image": {
"url": "/mock/2941-26.png"
}
}
]
}
};
const exportConfig = [
{
contentsOnly: true,
fileName: "icon@2x.png",
format: "PNG",
id: "I2590:136;2731:1",
image: {
url: "/mock/exports/icon@2x.png"
},
name: "icon",
suffix: ""
}
];
const fileInfo = {
name: 'Handoff design',
document: {},
styles: {}
};
export default function() {
return (
<Canvas
pageFrames={pageFrames}
fileInfo={fileInfo}
exportConfig={exportConfig}
settings={settings}
onHeaderBack={() => {
console.log('Back icon clicked.');
}}
/>
);
}
3. 应用实例与使用建议
- 确保设计元素命名清晰规范
- 导出前检查图层属性设置
- 导出完成后与开发团队确认文件准确性
4. 生态集成示例
Heron Handoff可与以下工具和流程无缝集成：
- CI/CD流程自动化生成设计规范
- 版本控制系统追踪设计变更
- 前端框架（如React）实现设计到开发的自动化转换
