为什么要用 VGG 还原设计稿：静态视觉效果篇

背景

VeryGoodGraphics（VGG）是一种新型跨平台 UI 开发工具，倡导 Design as Code 的理念，支持无代码将设计稿变为 UI。VGG 底层的运行时是一个开源的矢量图形引擎，支持将 UI 设计稿嵌入任意应用中 ，并将其精确渲染为可交互的用户界面。

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

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

 

使用 Figma 做设计

Figma 设计中会包含复杂的矢量图形，他们可以在任何级别缩放而没有马赛克。而且还有许多高级视觉效果，例如支持多重阴影和平滑圆角等特性。这里我们拿使用了这两个特性的 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 构建的最终网站的样子 https://verygoodgraphics.com

 

但这只是冰山一角。VGG 拥有完整的矢量图形规范，它是流行设计格式的超集，包括 Figma、Sketch 和 Adobe Illustrator。VGG 社区正在不断将这些视觉效果实现并集成到 VGG 运行时当中。后续我们也会有一系列的文章干货，向大家详细阐述 VGG 的每一个特性，以及相比之下 SVG 会存在的问题。

总结

本软文主要简单介绍了设计工具中的复杂视觉效果，低代码工具的无能为力，以及 VGG 对这种静态视觉效果的精确还原能力。

在接下来的文章中，我们将继续发表一些软文章，介绍 VGG 对动态交互的还原能力与跨平台能力，敬请期待。

VGG 运行时引擎现已开源，欢迎大家一起参与 VGG 开源社区共建。

 

👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建

🔥 社区活动： Design as Code｜VGG 社区邀你参加开源之夏 ，赢万元奖金

 

---

 

 

 

关于 VGG

VGG（VeryGoodGraphics）是新一代跨平台应用开发解决方案。VGG 倡导 Design-as-Code 的理念，让开发者可直接基于设计稿编程，快速将设计原型交付为可交互的应用。
特性一：无代码完美还原设计稿
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 /