ВКонтакте опубликовала дизайн-библиотеки компонентов VKUI для Figma

На странице VK в Figma Community доступны четыре библиотеки:

1. VKUI Base Library — базовая библиотека, содержащая более 650 иконок и все цветовые токены для светлой и тёмной темы (в виде стилей);
2. VKUI iOS Library и VKUI Android Library — библиотеки компонентов для iOS и Android, собранные на токенах из Base Library, а также шаблоны готовых экранов;
3. VKUI Color Palette — палитра цветов из приложений ВКонтакте, на которых собраны цветовые токены.

Чем это может быть полезно вам

VK Mini Apps

Дизайн-системой VKUI пользуется большое сообщество разработчиков и дизайнеров мини-приложений. Они создают сервисы, к которым можно перейти со второй вкладки мобильного клиента VK, — а таких мини-аппов уже больше 16 тысяч. Небольшой каталог вырос в гигантскую платформу VK Mini Apps, аудитория которой перешагнула за 30 млн пользователей в месяц.

Почти все мини-приложения используют компоненты VKUI. Это упрощает процесс дизайна и значительно ускоряет разработку — можно быстро собрать свой проект из готовых элементов. Сервисы открываются бесшовно, и пользователь практически не замечает разницы между интерфейсом ВКонтакте и мини-приложения, которое расширяет функциональность клиента.

Несколько примеров проектов от сторонних разработчиков, использующих компоненты VKUI:

1. планировщик задач Antodo,
2. приложение Космос,
3. сервис для тренировок в зале и дома FitQuest,
4. приложение для изучения правил дорожного движения ПДД 2020.

Шаблоны

Вконтакте делятся не только элементами интерфейса, но и готовыми экранами приложения ВКонтакте. Доступны шаблоны списка друзей и сообществ, настроек, музыки, диалогов и даже экрана переписки — все они собраны исключительно на компонентах.

Ещё есть шаблоны простых экранов мини-приложений, с ними будет проще начать работу.

Перед началом работы

ВКонтакте подготовили руководство перед началом работы с VKUI в Figma, в нём рассказываем:

1. как подключить библиотеки;
2. как работать с цветами, токенами и стилями шрифтов;
3. как использовать компоненты, переключаться между связанными вариациями и отображать скрытые состояния;
4. как настроить переключение на тёмную тему;
5. как растягивать ячейки.

Руководство можно найти на первых страницах библиотек iOS и Android.

Библиотеки компонентов также доступны и в Sketch

Ранее они публиковали библиотеки компонентов VKUI для Sketch — перейти к ним можно по ссылкам из этой записи.