背景

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

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

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

2. 本篇：精准还原设计稿中的动态视觉效果
3. 下篇：跨平台、对开发框架的嵌入式支持
   url="" imgdata="null" data-itemshowtype="0" tab="innerlink" data-linktype="2">
   

   
   

line-height: 1.5em;text-align: center;">使用 Figma 做交互原型

随着设计工具的演进，Figma 这款目前备受推崇的设计工具，通过其平台内无缝集成的交互式原型设计功能，打破了这一局限。设计师们现在可以在他们熟悉的 Figma 环境中，为设计作品注入丰富的交互元素和动画效果，将静态的设计转化为既实用又引人入胜的动态原型。

此外，Figma 的社区资源也为产品经理和营销运营提供了便利，使他们能够快速地搭建具有交互性的原型，而无需专业的设计背景。以创建一个用于展示图片的轮播图为例，用户可以通过在 Figma 社区中搜索 “carousel” 关键词，探索众多充满创意的设计文件，并从中挑选出符合个人风格和项目需求的设计。

我们以 Material 3 Design Kit 为例，当然你也可以选择 Ant Design、TDesign 等其他开源组件库或免费资源。在选定合适的轮播图组件后，你可以将其复制到自己的设计稿中，并根据项目需求或个人喜好，调整轮播图的尺寸、颜色、字体等属性。为了增加轮播图的吸引力，我们还可以借鉴一些 Card 组件的设计元素，以避免仅展示图片而显得过于单调。

对于那些不自带交互和动画效果的组件，如 Material 3 Design Kit 中的某些组件，我们需要手动添加这些效果。例如，我们可以为按钮添加动画，使其在点击时能够平滑地过渡到下一张图片。类似地，我们也需要为其他按钮添加交互和动画效果，以确保用户可以在任何图片上轻松切换到其他图片，关键在于确保这些交互和动画能够按照设计意图准确执行。

最后，让我们预览一下经过精心搭建和调整后的轮播图效果，体验其流畅的交互和动画带来的视觉享受。

揭不掉的痛苦面具

当静态的设计与动态的原型准备好之后，在软件开发迭代中接下来的流程往往是交给开发来实现。但这里又会涉及到很多设计交付的问题：

• 设计交付研发费时费力：不光是静态的视觉设计效果需要与研发在一次又一次的评审过程中反复沟通，并且动态的原型交互，也可能由于原型软件在表达能力上存在的限制，需要额外的图和文字去表达设计意图并进行沟通。

• 研发还原设计费力费时：开发同学需要根据设计稿通过手写代码的方式还原静态设计和动态交互。这个过程往往充满了很多“脏活累活”，并且会由于设计与开发之间的鸿沟，开发往往不能最终实现出设计师想要的效果。

• 设计原型无法被直接复用：众所周知，Figma 的交互原型演示，就算设计师做得再怎么以假乱真，也不能直接拿来作为真实的产品使用。这是因为

• Figma 没有提供官方的途径把原型直接嵌入真实应用中；

• 无法跨平台使用；

• 原型在复杂的交互动画场景下，相较于开发出来的应用，性能上会存在较大的问题。

为什么同样一件事情要做两遍？为什么不能直接把设计稿拿过来就用？为什么不能复用设计软件内的交互和动画还要费时费力的去再实现一遍？这期间避免不了各种对齐和沟通，还有可能实现出来和设计不符等等浪费时间精力来回折腾的情况。

有没有技术能实现设计稿无需转换或编码直接使用呢？

使用 VGG 精准还原设计稿

VeryGoodGraphics 倡导无代码还原设计。得益于 VGG 的跨平台渲染引擎，无论是设计师还是开发者，都能够以更快的速度实现更精准的视觉效果还原。对上述设计稿的还原：

VGG 背后的实现原理

在本篇中，我们先侧重介绍 VGG 对设计原型的还原与实现原理。相关的跨平台、跨框架支持能力，我们将放在下一篇再为大家详细介绍。

• 首先，我们定义了一套标准的矢量图形 VGG Spec（https://docs.verygoodgraphics.com/specs/overview），可以通过一些转换器，把设计原型转换成了符合 VGG 标准的数据。

• 在 VGG Runtime 引擎中，我们内置了完整的 JavaScript 引擎（node.js）。因此，当 VGG 对设计稿做转换的时候，会把设计原型中的交互数据，转换生成 JavaScript 代码，然后由这个 JavaScript 引擎来执行一些动画与业务逻辑。

• 但这些 JavaScript 代码如果离开了 VGG Runtime 引擎自身对设计稿的支持，其实也无法做到原型的动态效果与交互能力。因此，VGG Runtime 的 C++ 接口，会进一步封装成 JavaScript/WebAssembly 接口。生成的代码中，会去调用 Runtime 的这些接口，用于控制设计稿，最终实现动态切换效果。

• 关键之处在于，VGG 对 JavaScript 引擎进行了封装，这样可以确保原型能够在不同平台上运行。通过这种封装，VGG 确保了原型的跨平台兼容性，使得设计师可以在不同的环境下创建和分享原型，而用户则可以在各种设备和平台上流畅地体验交互效果。

一句话总结：对于设计师在 Figma 中创建并添加交互功能的原型，VGG 引擎会将这些交互动作转换为对应的 JavaScript 代码。当用户在浏览器或其他平台上打开原型时，内置的 JavaScript 引擎会负责执行这些代码。在执行过程中，JavaScript 代码会调用 VGG 引擎提供的接口，以实现原型的交互效果和动态切换。

上述 VGG Runtime 现已开源 

• https://github.com/verygoodgraphics/vgg_runtime 

上述对 Figma 的还原只是冰山一角。VGG 拥有完整的矢量图形规范，它是流行设计格式的超集，包括 Figma、Sketch 和 Adobe Illustrator。VGG 社区正在不断将这些视觉效果实现并集成到 VGG 运行时当中。

总结

VGG 倡导设计稿无代码还原。交互原型直接可用能带来的好处：

• 极大简化设计与开发之间的沟通；

• 加快产品迭代速度；

• 提升用户体验；

• 让设计师可以更直观地呈现和验证设计想法；

通过简化设计与开发之间的沟通和合作，VGG 将加速产品开发周期，提高生产效率，并为用户提供更加流畅和智能的使用体验。

未来，我们可以期待着更多基于 VGG 的设计稿直接转化为可交互的原型，从而加速产品的迭代和优化。同时，VGG 开源社区的成长也会为设计师和开发者提供更多创新的工具和资源，推动设计与代码的更深度融合，从而创造出更具有吸引力和竞争力的数字产品。

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

关于 VGG

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