Libraries for design tools are an important part of a design system. We believe that designers should work with elements that are as close as possible to what is already available in code. That is why we’ve created libraries containing all of ourmost up-to-date components, which reflect the states available to developers.
Our developers have already published the source code for React components on Github, so we decided to follow their example and share our Figma component libraries.
There are four libraries available on the VK Figma Community Page:
- VKUI Base Library, containing over 650 icons and all color tokens for light and dark mode (as styles)
- VKUI iOS Library and VKUI Android Library, containing components for iOS and Android, built using tokens from the Base Library, as well as app mockup templates
- VKUI Color Palette, containing color tokens of colors used in VK apps
How this could be useful to you
Get access to source elements
All source elements that are used to build our interfaces are available in the libraries. Using them, you can explore how complex layouts are created with Auto Layout, where you can find embedded interchangeable components. This could be useful for when you’re putting together your own library.
VK Mini Apps
The VKUI design system is not only used by our team but also by a large community of mini app developers and designers. They create services that can be accessed in the second tab of the VK mobile app. A once small catalog grew to become the giant VK Mini Apps platform with over 16 thousand mini apps and a monthly user base of over 30 million.
Almost all mini apps use VKUI components. This makes the design process easier and speeds up development considerably, since it’s faster to put a project together using pre-made elements. Mini apps expand the VK app’s functionality and open seamlessly. Users can hardly tell the difference between the two interfaces.
Here are several examples of projects from third-party developers made using VKUI:
- Antodo task planner
- Universe app
- FitQuest home and gym fitness app
- PDD 2020 traffic code educational app
Propose ideas to VK Designers
Using our components, you can create VK mobile app screens and make suggestions in the VK Designers community, where we post the bravest ideas and even incorporate some of them into the app.
Templates
In addition to interface elements, we’re also sharing complete VK app screens that can be used as templates. There, you can find screens with friend and community lists, settings, music, messages and even a chat window. All of them were created using only components.
There are also templates of simple mini app screens that will make it easier to get started.
Components include all variations and states
Our goal was to add components to Figma in a way so that designers wouldn’t have to detach them from master components when using them. If they had to do that, they would realize that the functionality isn’t coded in and would take a while to implement.
Such components in Figma save time that would otherwise be spent looking for or re-drawing states, allowing you to fully focus on the task at hand.
Resizing and Auto Layout
Auto Layout in Figma provides a much wider range of possibilities by bringing the layout made in a visual instrument closer to its implementation in code. This allows you to create whole screens using components and not worry about whether you will have to manually alter elements if their contents change. When using Auto Layout, you may sometimes encounter stretching limitations. We use various tricks to get around them, but that’s a story for another article
Toggle dark mode right in Figma
A year ago, we wrote about how we implemented dark mode. But the tools were developing all this time, and now we can look at working with color tokens in Figma from another angle.
The first thing we did was write a plugin that imported all tokens from a JSON scheme and added them as styles to the VKUI Base Library in light and dark mode. Later on, all components were built only using color tokens.
In Figma, using the Appearance plugin, we were able to implement the ability to change modes right in the mockup for both individual elements and whole pages. Styles change depending on their name, such as from Light Text / Primary to Dark Text / Primary. This is how it works with all of our 200+ tokens.
Of course, drawing using only tokens is more challenging since you have to choose colors by their semantic names as opposed to their appearance. But this approach allows you to test dark mode right in the mockups and, most importantly, it’s easier to pass the final design along to the developers since all of the tokens for specific elements are already visible.
Getting started
We prepared a guide to help you get started working with VKUI in Figma. It will tell you how to:
- enable the libraries.
- work with colors, tokens and font styles.
- use components, switch between related components and display hidden states.
- set up dark mode toggling.
- stretch Cell instances.
You can find the guide on the first page of the iOS and Android libraries.
Component libraries are also available on Sketch
Earlier, we published VKUI component libraries for Sketch. You can find them by following the links in this post.
