Figma builder.io 插件把任意网站变为设计稿
Figma builder.io 是什么
Quickly convert a website into Figma, and turn real site components into design components.
快速将网站转换为 Figma，并将真实网站组件转换为设计组件。
如何获取 builder.io
Google 搜索 builder.io figma - 结果第一个Builder.io - Figma to HTML, React, and more - try it out
此时需要你登录 - 输入你的 Google 邮箱登录
如何使用
| 序号 | 步骤 | 备注 |
|---|---|---|
| 1 | 设计页面 | try it out |
| 2 | 鼠标右键 | 确保已经安装插件 |
| 3 | plugin | |
| 4 | 选中`Builder.io - Figma to HTM | |
| 5 | 弹窗 | |
| 6 | import to figma | |
| 7 | URL to import 输入想要获得设计图的 url | |
| 8 | Viewport Width 这里输入你想要的大小 | |
| 9 | 选中 Frame 将会以独立的框架出现 | 建议选中 |
| 10 | Import to Figma 确认 | 等一会就会出现设计图了 |
例子演示
待优化
- 部分异步加载的页面设计稿不全比如
明日方舟官网 - 或许需要 Puppeteer 截图然后通过 Figma 插件转为设计稿