Page To Design: 一个把网页转 Figma 设计稿的浏览器插件，也是自己独立开发第一个小工具

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 367 天前的主题，其中的信息可能已经有所发展或是发生改变。

这个插件的作用是把网页转成可编辑的 Figma 设计稿，从而可以进行重新设计或者引用、参考学习等。支持捕获整个网页的内容，也可以根据需要选择网页中某块的设计、图片、图标等。所有的处理都是在浏览器本地处理，包括图片下载等，没有隐私问题的担忧。

地址如下：
Page To Design： https://pagetodesign.com
Chrome webstore: https://chromewebstore.google.com/detail/page-to-design/bppiipkgkacfbhihojbedicaampmcici

PS:
还有不完善的地方，持续测试迭代，欢迎拍砖建议。
也正好辞职在家“带娃”一年，尝试独立开发一些简单的工具，Page to design ，是最近两个月左右完成上线的。也简单弄了个 https://recpage.com 网站聚合，本来想做个大而全的浏览器插件，折腾来折腾去浪费了很多时间，最终还是决定重新一个个独立。

figma

浏览器插件

网页转设计稿

14 条回复 • 2024-03-20 15:10:47 +08:00

param

2024-03-18 09:07:53 +08:00 via Android

什么原理

C603H6r18Q1mSP9N

2024-03-18 09:42:16 +08:00

不好用，试了苹果站，就拷贝了几个文字。。

wanniwa

2024-03-18 09:46:47 +08:00

666

zhiliang

2024-03-18 10:04:54 +08:00

@shanghai1998 不好意思，我自己测试的网址不太全，我来看看什么，谢谢

betty00

2024-03-18 10:54:20 +08:00

码了

betty00

2024-03-18 11:19:57 +08:00

试了一下这个，https://ably.com/ ，空白。。。。

zhiliang

2024-03-18 13:03:23 +08:00

@betty00 收到，我对着处理下，感谢

crazychang

2024-03-18 13:12:56 +08:00

请问 Capture successful 后如何 import ？没看到相关按钮

crazychang

2024-03-18 13:15:25 +08:00

@crazychang 哦我看到了进入 figma 网页版的一个 design 后就弹出了

MrDarnell

2024-03-18 14:12:19 +08:00

还不错，我试了，虽然还有些问题，但是也能解决很多问题，我想问你这个是啥原理！

Justineo

2024-03-18 19:01:08 +08:00

这个插件的效果相比 html.to.design 如何？我们有对这类工具（其实更需要的是库）的需求，用来把前端组件库输出的结果渲染到 Figma 。但是目前已有的工具在一些布局稍微复杂一些组件上效果都不太理想。你是不是可以拿 ant.design 之类的网站测试看看，复杂的前端组件转换的效果怎么样。

zhiliang

2024-03-18 20:48:36 +08:00

@Justineo 还没有怎么对比过，目标是跟被捕获的网页比，我尽量多测试测试各种类型的网址，持续优化，感谢您的建议

zhiliang

2024-03-18 20:53:28 +08:00

如果觉得有用，也欢迎大家在 https://www.producthunt.com/products/page-to-design ，给点评推荐下

janily

2024-03-20 15:10:47 +08:00

@Justineo 我们团队做了一款把前端组件转设计稿的 figma 插件，现在支持 TDesign 和 AntDesign 两款组件库，渲染基本上覆盖 90% 以上，可以来尝试尝试，https://www.figma.com/community/plugin/1192146318523533547/ruyi-design-assistant