为什么要用 VGG 还原设计稿:静态视觉效果篇
背景 VeryGoodGraphics(VGG)是一种新型跨平台 UI 开发工具,倡导 Design as Code 的理念,支持无代码将设计稿变为 UI。VGG底层的运行时是一个开源的矢量图形引擎,支持将 UI 设计稿嵌入任意应用中 ,并将其精确渲染为可交互的用户界面。 VGG 运行时的硬核能力我们将拆分为系列文向大家介绍,本文将重点介绍 VGG 对静态视觉效果的高质量还原。该系列文章包括: 精准还原设计稿中的静态视觉效果 精准还原设计稿中的动态交互效果 跨平台、对开发框架的嵌入式支持 使用 Figma 做设计 Figma 设计中会包含复杂的矢量图形,他们可以在任何级别缩放而没有马赛克。而且还有许多高级视觉效果,例如支持多重阴影和平滑圆角等特性。这里我们拿使用了这两个特性的 VGG 首页的设计稿来举例说明。 VGG 首页的 Figma 设计稿让我们仔细看一下使用了这两个特性的地方: 由 Figma 的 SmoothShadow 插件实现的光滑阴影,包含了 8 重阴影 使用平滑圆角特性实现的“苹果圆”按钮 传统低代码实现思路 鉴于这样的设计,如果开发人员想要...
