一键将实时页面转换为可编辑的 MasterGo 图层
Web to MasterGo by zxpzdtom 是一个 Chrome 扩展,它将实时网页转换为 MasterGo 内部的可编辑图层,旨在服务于 UI 团队和产品设计师。它捕捉可见页面或选定元素,并准备结构化的导出文件以便导入到设计工作区。该工具专注于保持视觉保真度并减少手动重建工作,适用于繁忙的产品团队和需要精确图层结构的迭代设计周期。
它捕获了哪些页面元素,如何导出?
该扩展可以通过单个操作捕获整个可见页面或选定的DOM元素,并导出结构化的.web2mg JSON文件以供导入。捕获后,HTML和CSS被转换为可编辑的设计层,文本和布局作为本地组件而不是平面图像表示。这种方法为需要真实重建实时界面的设计师提供了直接的起始文件。
它在再现复杂视觉效果和交互组件方面表现如何?
它保留了高级资产,如 SVGs、图标字体和CSS遮罩,并可以在导出中包含画布快照和按钮状态。该工具还在页面权限允许访问时捕获同源iframe内容,这有助于保留嵌入的仪表板和小部件。这些功能减少了在捕获后清理过程中手动重新创建分层图形和脚本界面元素的需要。
它如何融入团队的导入和协作工作流程?
捕获工作流程与MasterGo中的一个配套插件配对,以将导出的文件导入设计项目,从而启用代码到设计的反馈循环。开发者维护该扩展,以跟上网络标准和MasterGo的变化,其轻量级的一键操作保持了捕获时间的低廉。团队可以将输出用作可编辑的源材料,以便进行审查、令牌对齐和开发者协作。
适用于以 MasterGo 为中心的团队,具有浏览器范围的权衡
Web 到 MasterGo 是一个实用工具,适用于将其 UI 工作基于 MasterGo 的团队,并且需要来自实时网站的快速、可编辑的源文件。它的重点更倾向于设计团队为迭代准备材料的项目,而不是交付最终的精美资产。导入后预计会有一个简短的图层协调步骤,并在设计工作流程的预审阶段包含此工具。