新一代跨平台UI开发工具VGG——无代码还原设计稿的静态视觉效果
背景
VeryGoodGraphics(VGG)是一种新型跨平台 UI 开发工具,倡导 Design as Code 的理念,支持无代码将设计稿变为 UI。
VGG 底层的运行时是一个开源的矢量图形引擎,支持将 UI 设计稿嵌入任意应用中 ,并将其精确渲染为可交互的用户界面。
VGG 运行时的硬核能力我们将拆分为系列文向大家介绍,本文将重点介绍 VGG 对静态视觉效果的高质量还原。该系列文章包括:
精准还原设计稿中的静态视觉效果 精准还原设计稿中的动态交互效果 跨平台、对开发框架的嵌入式支持
使用 Figma 做设计
让我们仔细看一下使用了这两个特性的地方:
由 Figma 的 SmoothShadow 插件实现的光滑阴影,包含了 8 重阴影
使用平滑圆角特性实现的“苹果圆”按钮
传统低代码实现思路
鉴于这样的设计,如果开发人员想要使用 HTML 和 CSS 开发这些视觉效果,可能会很棘手、耗时,而且最终实现的效果性能较差。比如说上述的“苹果圆”按钮,其实在 CSS 没有好的办法实现。在这里我们就不展开基于代码实现的讨论。
传统低代码也是解决思路之一。我们可以利用低代码工具将这个设计快速发布为网站。例如:使用流行的低代码网站构建器 Framer,Framer 提供 Figma 插件,允许用户将 Figma 设计导入到 Framer 的工作区。
使用 Figma-to-HTML-with-Framer 插件
基于这个插件,我们可以通过复制粘贴在 Framer 工作区中得到与 Figma 中相同的设计。然后借助 Framer 的发布能力,我们可以立即获得一个可公开访问的网站。
Framer 工作空间
使用 Framer 发布的网站
但,在这里您是否注意到页面上奇怪的视觉效果?
首先是第一眼就能看出来的问题:大部分文本位置都不正确;一些边框有一些讨厌的黑色;VGG Logo 周围有奇怪、并且被截断的灰色区域。
如果进一步观察,会发现更多的问题,例如:缺少平滑圆角功能、文本布局的宽度不正确等等。
详细视觉效果对比
从设计师的角度来看,Framer 无法满足他最初的设计意图。而且在大多数情况下,设计师也会因为各种原因向开发者妥协,得到一个哭笑不得的应用或者网站。
使用 VGG 精准还原
得益于 VGG 的跨平台渲染引擎,无论是设计师还是开发者,都能够以更快的速度实现更精准的视觉效果还原。
欢迎观看我们第一个面向开发者的视频教程《如何在 6 分钟内开发和修改 VGG 落地页》:
在这个视频当中,我们以 VGG 主页为例,演示了 VGG 实现的高质量静态渲染效果。下面是使用 VGG 构建的最终网站的样子
但这只是冰山一角。VGG 拥有完整的矢量图形规范,它是流行设计格式的超集,包括 Figma、Sketch 和 Adobe Illustrator。VGG 社区正在不断将这些视觉效果实现并集成到 VGG 运行时当中。
后续我们也会有一系列的文章干货,向大家详细阐述 VGG 的每一个特性,以及相比之下 SVG 会存在的问题。
总结
本软文主要简单介绍了设计工具中的复杂视觉效果,低代码工具的无能为力,以及 VGG 对这种静态视觉效果的精确还原能力。
在接下来的文章中,我们将继续发表一些软文章,介绍 VGG 对动态交互的还原能力与跨平台能力,敬请期待。
VGG 运行时引擎现已开源,欢迎大家一起参与 VGG 开源社区共建。
关于 VGG
特性一:无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节,可直接将设计稿作为用户界面,省去前端与客户端开发者使用代码去复原设计稿的开发工作,降低他们与设计师之间的沟通摩擦成本。
特性二:原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式,支持在任意一种已有的 APP 基础上进行增量式开发,主持主流平台与框架。
特性三:脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块,在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四:高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容(Figma/Sketch/Adobe Illustrator),并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具,打通从应用 UI 设计到应用研发的完整流程。
GitHub:https://github.com/verygoodgraphics 官网:https://verygoodgraphics.com/ 博客:https://blog.verygoodgraphics.com/
微信扫码关注该文公众号作者