Heron Handoff 使用教程

Heron Handoff 使用教程

1. 项目介绍

Heron Handoff 是一个基于 Figma 的设计交付工具，它可以帮助设计师将设计规范导出为开发者可用的手稿文件。这个工具通过识别 Figma 画布中的顶层框架，允许用户选择并导出所需的设计元素。导出的结果是一个包含设计规格说明的 zip 文件，开发者可以解压后查看。

2. 项目快速启动

首先，确保你已经安装了 Figma 和 Node.js。

安装 Heron Handoff 插件

1. 访问 Figma 插件页面，搜索 "Heron Handoff" 并点击安装。
2. 打开一个 Figma 文件，右键选择插件 -> Heron Handoff 运行它。

使用 Heron Handoff

1. 运行插件后，选择你想要导出的顶层框架。
2. 勾选 "Export components list" 选项将在左侧面板生成组件列表。
3. 选择你想要导出的图像层，具有导出属性的图层将被导出。
4. 完成选择后，点击生成按钮。
5. 几秒钟后，你将得到一个 zip 文件，解压后打开 index.html 文件查看设计规格。

作为模块使用

如果你希望将 Heron Handoff 集成到你的项目中，可以通过 NPM 安装它：

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 pagedFrames = {
  "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 exportSettings = [
  {
    contentsOnly: true,
    fileName: "icon@2x.png",
    format: "PNG",
    id: "I2590:136;2731:1",
    image: {
      url: "/mock/exports/icon@2x.png"
    },
    name: "icon",
    suffix: ""
  }
];

const fileData = {
  name: 'Handoff design',
  document: {},
  styles: {}
};

export default function() {
  return (
    <Canvas
      pagedFrames={pagedFrames}
      fileData={fileData}
      exportSettings={exportSettings}
      settings={settings}
      onHeaderBack={() => {
        console.log('Back icon clicked.');
      }}
    />
  );
}

3. 应用案例和最佳实践

• 确保所有的设计元素都有清晰的命名，便于导出时识别。
• 在导出前，检查所有的图层属性，确保导出属性设置正确。
• 导出后，与开发者沟通确认文件的正确性。

4. 典型生态项目

Heron Handoff 可以与多种设计工具和开发流程集成，例如：

• 集成到 CI/CD 流程中，自动生成设计规格。
• 与版本控制系统结合，追踪设计变更。
• 结合前端框架，如 React，实现设计到开发的自动转换。