新一代跨平台UI开发工具VGG——无代码还原设计稿的静态视觉效果

背景

VeryGoodGraphics（VGG）是一种新型跨平台 UI 开发工具，倡导 Design as Code 的理念，支持无代码将设计稿变为 UI。

VGG 底层的运行时是一个开源的矢量图形引擎，支持将 UI 设计稿嵌入任意应用中 ，并将其精确渲染为可交互的用户界面。

VGG 运行时的硬核能力我们将拆分为系列文向大家介绍，本文将重点介绍 VGG 对静态视觉效果的高质量还原。该系列文章包括：

• 精准还原设计稿中的静态视觉效果
• 精准还原设计稿中的动态交互效果
• 跨平台、对开发框架的嵌入式支持
  

使用 Figma 做设计

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

• GitHub：https://github.com/verygoodgraphics
• 官网：https://verygoodgraphics.com/
• 博客：https://blog.verygoodgraphics.com/