利用 Figma 将页面复刻到 Axure 的省事方法

Nicemorning

前置要求

  • 支持识图和编程的AI工具（CherryStudio➕模型SDK或直接用豆包这种傻瓜式工具）

  • 能访问Figma的网络

  • 浏览器插件：Drafito

  • Figma插件：Axure和Drafito

image-Xgux.png
image-QCaM.png

浏览器插件设置

安装Drafito

Drafito - Chrome 应用商店

设置插件

image.png

按图设置

image-EfNW.png

场景一：把现有页面抄到Axure

截图方式让AI生成静态页面

image-VHyt.png

把图发给AI，要用Agent，编程类的Agent就行。

豆包为例（因为DeepSeek不支持识图，别的要🪜或交钱，还是豆包香）

image-icNu.png

生成好了可以直接点预览先看一下效果

image-BteC.png

确定无误后，把HTML保存到本地（⚠️重要），直接复制HTML代码虽然能用，但是最终转到Axure中会是一个动态面板，不是分离的组件，不好用。

image-kIYm.png

通过Figma将HTML转成可编辑的原型

浏览器打开刚才本地的HTML文件

image-zFND.png

点开插件，Export，会生成一个json，然后到Figma中通过插件导入json

image-zDLd.png
image-ZFFT.png

等着，然后就出来了

image-ZDIi.png

通过Axure插件导出到Axure

先全选，一定要先全选

image-WkKO.png

Success后直接到Axure中粘贴

image-xGIz.png

完美，除了一些emoji同步不过来，但无伤大雅。

场景二：抄别人的页面

要抄的页面上打开浏览器的插件Draftio，直接Export一下就完事。

image-MDjZ.png

同样的操作，全选，然后Axure导出所选范围。最终你就能看到以下效果，只能说从高保真变成了低保真了。

image-PTdn.png

总结：截图还原度更好，直接让插件自己去读网页也行，但质量会很差，而且到了Axure中还无法编辑，一堆框嵌套在一起

场景三：抠别人网站上漂亮的元素到Figma上

image-bWMr.png

比如我想抠这个，还是直接浏览器打开那个插件

image-xlAW.png

然后选中要抠的范围

image-UMjm.png

再然后还是老操作，直接导入到Figma上

image-LPix.png

完美

评论