VGG is a cross-platform UI development toolkit that advocates the Design-as-Code concept. The underlying VGG runtime is a graphics engine capable of accurately rendering any UI design draft embedded within your application as a fully functional user interface.
While there are many advantages of VGG and the Design-as-Code workflow, in this post, we are going to discuss only the rendering capability of VGG. We will see the high-quality static rendering effects achieved by VGG, along with the minimal effort required for design recovery, compared to other solutions.
The Figma Design
Let's look into the VGG home page example, which was designed in Figma.
This design contains complex vector graphics as it can zoom at any level without mosaic defects. And there are also many advanced visual effects, such as multiple shadows and corner smoothing, to name just a few.
The Developments
Given such a design, if a developer wants to develop these visual effects with HTML and CSS, it could be tricky, time-consuming, and the final implementation could be less performant.
And if we prefer to avoid writing code, we can utilize low-code tools to publish this design as a website with just one click. For example, we can use the popular low-code site builder, Framer.
Framer provides a Figma plugin that allow users to easily import a Figma design to its own workspace.
By using this plugin, we can effortlessly replicate the same design within the Framer workspace through copying and pasting. And with Framer's publishing ability, we can get a running web site in no time.
Hey there! Have you ever noticed the peculiar visual artifacts on this page?
The most texts are at wrong positions. Some borders have unpleasant black color. There is a strange gray border around the big VGG logo. And all these problems are identified just by a first glance.
If we take a further look, we'll find more problems, such as the lacking of corner smoothing feature and incorrect text layout width
From the perspective of a designer, Framer cannot meet his original design intention. And in most cases, he has to compromise. Because the developer will tell him such effects are very complex to implement and it simply doesn't worth the time.
VGG could achieve the same development speed of Framer with a much more accurate visual effects recovery, thanks to its underlying cross-platform rendering engine. If you have interests, you can go to watch our YouTube tutorial of How to develop and modify VGG landing page in 6 minutes.
The below is how the final web site built with VGG looks like
Conclusion
In this post, we demonstrated the high-quality static rendering effects achieved by VGG, with VGG home page as an example.
But this is just the tip of the iceberg.
VGG has a complete specification of vector graphics that is a super-set of popular design formats, including Figma, Sketch and Adobe Illustrator. And VGG community is continuously incorporating these visual effects into VGG runtime. And there are also future blog posts planned for illustrations like the pitfalls of SVG and how VGG are coming over.
VGG is still at an early stage and we are building VGG community to push it further. Please join VGG community and follow us!
