Why use VGG to restore design draft: static visual effects

Estimated read time 4 min read

Background

VeryGoodGraphics (VGG) is a new cross-platform UI development tool that advocates the concept of Design as Code and supports code-free transformation of design drafts into UI. The underlying runtime of VGG is an open source vector graphics engine that supports embedding UI design drafts into any application and accurately rendering them into interactive user interfaces.

We will introduce the hard-core capabilities of VGG runtime into a series of articles. This article will focus on VGG’s high-quality restoration of static visual effects. This series of articles includes:

  • Accurately restore the static visual effects in the design draft
  • Accurately restore dynamic interaction effects in design drafts
  • Cross-platform, embedded support for development frameworks

Design with Figma

Figma designs will contain complex vector graphics, and they can be scaled at any level without mosaics. And there are many advanced visual effects, such as support for multiple shadows and smooth rounded corners. Here we take the design draft of the VGG homepage that uses these two features as an example.

Let’s take a closer look at the Figma design draft on the VGG homepage
where these two features are used:

Smooth shadows implemented by Figma’s SmoothShadow plug-in, including 8 shadows

“Apple Circle” button implemented using smooth rounded corners feature

Traditional low-code implementation ideas

Given this design, if developers want to develop these visual effects using HTML and CSS, it can be tricky, time-consuming, and end up with poor performance. For example, the above-mentioned “Apple Circle” button actually has no good way to implement it in CSS. We will not discuss code-based implementation here.

Traditional low-code is also one of the solutions . We can use low-code tools to quickly publish this design as a website. For example: using the popular low-code website builder Framer, Framer provides a Figma plug-in that allows users to import Figma designs into Framer’s workspace.

Using the Figma-to-HTML-with-Framer plugin

Based on this plug-in, we can get the same design in the Framer workspace as in Figma by copying and pasting. Then with Framer’s publishing capabilities, we can instantly have a publicly accessible website.

Framer workspace

Websites published using Framer

But, here did you notice a strange visual effect on the page?

First there are the issues that are immediately apparent: most of the text is incorrectly positioned; some of the borders have an annoying black tint; and there are weird, truncated gray areas around the VGG logo.

If you look further, you will find more problems, such as: lack of smooth rounded corners, incorrect width of text layout, etc.

Detailed visual comparison

From a designer’s perspective, Framer was unable to meet his original design intent. And in most cases, designers will compromise with developers for various reasons and end up with an application or website that is dumbfounding.

Use VGG to restore accurately

Thanks to VGG’s cross-platform rendering engine, both designers and developers can achieve more accurate visual effect restoration at a faster speed. Welcome to our first video tutorial for developers “How to Develop and Modify VGG Landing Page in 6 Minutes”

In this video, we take the VGG homepage as an example to demonstrate the high-quality static rendering effect achieved by VGG. Here is what the final website built using VGG looks like  https://verygoodgraphics.com

But this is just the tip of the iceberg. VGG has a complete vector graphics specification, which is a superset of popular design formats , including Figma, Sketch and Adobe Illustrator. The VGG community is continuously implementing and integrating these visual effects into the VGG runtime. We will also have a series of articles in the future to explain each feature of VGG in detail, as well as the problems that SVG will have in comparison.

Summarize

This soft article mainly briefly introduces the complex visual effects in design tools, the inability of low-code tools, and VGG’s ability to accurately restore such static visual effects.

In the next articles, we will continue to publish some soft articles to introduce VGG’s ability to restore dynamic interaction and its cross-platform capabilities, so stay tuned.

The VGG runtime engine is now open source, and everyone is welcome to participate in the VGG open source community.

You May Also Like

More From Author

+ There are no comments

Add yours