HTML转Axure：无需手画，用Figma插件CoDesign一键导入网页生成原型

随着工具生态的日渐丰富，产品经理绘制原型的门槛已经大大降低。现在，你不再需要手动拖拽每一个组件，只需要善用几个强大的工具，就能将现成的网页快速转化为可编辑的 Axure 原型文件，极大地提升效率。

这个方案的核心是借助当下流行的设计协作平台 Figma。我们需要在其中安装两个关键的插件来实现整个流程。

接下来是具体的操作步骤。

第一步：安装必备插件

首先，打开 Figma 并创建一个新的设计文件。在画布的空白处右键单击，在弹出的菜单中选择 Plugins -> Manage plugins...。

随后会打开插件管理页面，我们需要在这里搜索并安装两个插件。

1. “腾讯 CoDesign-HtmltoDesign”插件：在搜索框中输入 htmltodesign，找到名为 腾讯 CoDesign-HtmltoDesign（原Design...） 的插件并安装。这个插件的作用是将任意网页的 HTML 内容导入到 Figma 中。

2. “Axure”插件：在搜索框中输入 axure，找到名为 Axure 的插件并安装。这个插件可以将 Figma 中的设计内容导出为 Axure RP 文件格式。

安装完成后，你就可以通过右键菜单中的 Plugins 快速访问它们。

第二步：将网页导入 Figma

插件就绪后，我们开始操作。在 Figma 画布空白处右键，选择 Plugins -> 腾讯 CoDesign-HtmltoDesign (原Design...)。

插件面板会被打开。它的功能很直观，你只需要将目标网页的公开链接（无需登录即可访问的页面）粘贴到 Import via URL 的输入框中。

你还可以在下方选择生成页面的设备视图尺寸（如 Desktop、iPad、iPhone 等），或者自定义分辨率。根据需求调整 Generate Preferences（生成偏好）后，点击绿色的 Import 按钮。

稍等片刻，该网页的完整视觉内容就会被解析并生成到你的 Figma 画布中，形成一个结构化的设计稿。

第三步：从 Figma 导出到 Axure

现在，网页内容已经在 Figma 里了。下一步就是将它转换到 Axure。请注意，进行此步骤前，请确保你的 Axure 软件已经打开。

在 Figma 中选中你想要导出的画板或元素（如果想导出全部，可以不进行选择）。然后右键，选择 Plugins -> Axure。在弹出的子菜单中，你会看到几个选项：

• Copy Selection for RP：将当前选中的元素复制到剪贴板，以用于 Axure。
• Copy All Frames for RP：复制当前文件中的所有画板。

我们以 Copy Selection for RP 为例，点击它。插件会默默地将选中的 Figma 内容转换为 Axure 可识别的格式并存入系统剪贴板。

最后一步，切换到已经打开的 Axure 软件中，直接在画布上执行粘贴操作（Ctrl+V 或 Cmd+V）。一瞬间，刚才的网页就变成了一个完全可编辑的 Axure 原型文件，所有的图层和分组结构都得到了保留。

总结

通过 腾讯 CoDesign-HtmltoDesign 和 Axure 这两个 Figma 插件的组合，我们实现了一条从 网页（HTML） -> Figma -> Axure 原型 的快速转换流水线。这个方法尤其适合需要快速搭建竞品分析原型、或者基于现有页面进行修改设计的场景。

对于需要快速产出原型概念图的 产品经理 来说，这无疑是一个能节省大量基础操作时间的效率利器。如果你在探索更多提升工作效率的工具和方法，欢迎在 云栈社区 与其他开发者交流分享。