920
24 мая 2020

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

На Github уже опубликован исходный код компонентов на React — следуя примеру разработчиков, дизайнеры поделились библиотеками компонентов в Figma.
1 комментарий 1 В закладки
Библиотеки в дизайн-инструментах — это важная часть дизайн-системы. Мы считаем, что дизайнеры должны работать с элементами, которые максимально приближены к реализации в коде. Поэтому в библиотеках мы собрали для них самые актуальные компоненты, которые отражают все те же состояния, что доступны при разработке.
ВКонтакте

На странице 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 — перейти к ним можно по ссылкам из этой записи.

1
7
1 Комментарий
Только авторизованные пользователи могут оставлять комментарии.
Авторизуйтесь или Зарегистрируйтесь, пожалуйста.
2020-05-24 19:39:43

Зачетный подгон! 👍