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

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

На Github уже опубликован исходный код компонентов на React — следуя примеру наших разработчиков, теперь мы делимся библиотеками компонентов в Figma.

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

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

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

VK Mini Apps

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

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

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

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

Предлагайте идеи в VK Designers

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

Открытые исходные элементы

В библиотеках доступны все исходные элементы, на которых построены наши интерфейсы. Ориентируясь на эти примеры, вы можете разобраться, как организовывать сложные структуры на Auto Layout, где есть вложенные заменяемые части. Это будет полезно при построении собственных библиотек компонентов.

Шаблоны

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

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

Все вариации и состояния включены в компоненты

Нашей целью было реализовать компоненты в Figma так, чтобы при использовании их не приходилось отвязывать от мастер-компонентов. Если это потребуется, дизайнер поймёт, что такой функциональности нет и в коде — значит, на её разработку потребуется дополнительное время.

Подробные компоненты в Figma экономят время на поиске состояний или их перерисовке — и позволяют полностью сфокусироваться на задаче.

Растягивание и Auto Layout

Auto Layout в Figma значительно расширяет возможности, приближая вёрстку в визуальном инструменте к реализации в коде. Это позволяет собирать целые экраны на компонентах и не беспокоиться о том, что где-то придётся вручную смещать элементы, если изменится содержимое. Местами из-за Auto Layout появляются ограничения в растягивании, и нам приходится обходить их с помощью множества хаков — но это тема для отдельной статьи.

Тёмная тема прямо в макетах

Год назад мы писали про нашу реализацию работы с тёмной темой. Всё это время инструменты развивались — и теперь мы взглянули на работу с цветовыми токенами в Figma с другой стороны.

Первым делом написали плагин, с помощью которого импортировали все токены из схемы в JSON и завели их в виде стилей в VKUI Base Library в светлой и тёмной теме. Дальше все компоненты собирались исключительно с использованием цветовых токенов.

В Figma с помощью плагина Appearance удалось завести смену тем прямо в макете — у отдельных элементов или целых страниц. Стили переключаются по совпадению названия: например, с Light Text / Primary на Dark Text / Primary. И так со всеми 200+ токенами.

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

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

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

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

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

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

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

0
30 комментариев
Написать комментарий...
Влад Цыплухин

Респект

Ответить
Развернуть ветку
Igor Kusov

Круть)

Ответить
Развернуть ветку
Andrey Golaktionov

Круто! Большую работу проделали. Напишите как хакнули автолейауты на изменении ширины. Плагин написали?

Ответить
Развернуть ветку
Михаил Лихачёв

Спасибо!) У нас есть несколько компонентов с горизонтальным авто-лэйаутом, например ячейки. Сам хак в следующем: между левой и правой частью ячейки разместили пустой компонент под названием Resize, который отвечает за размер ячейки. Этот компонент имеет Auto Layout и пустой прямоугольник внутри, чтобы замена на другой Resize заставляла менять размер родительского компонента. 

Таких компонентов сделали несколько под разные размеры устройств, связав их названием. Меняешь один Resize на другой и тогда обновится размер ячейки. 

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

Ответить
Развернуть ветку
Yury

Отличный хак, кстати. Просто удивляет, насколько инструменты для дизайна несинхронизированны c текущим веб-стеком, хотя казалось бы — самый востребованный сегмент. Фигма старается, но приходится прибегать к подобным workarounds. Достаточно представить хотя бы flexbox, который всем знаком — не говоря уже о масштабировании, всего этого (фигма правильно сделали, что выделили цвета отдельно, но блин, это же очевидно!). Такой временной лаг между развитием веба и инструментами дизайна для него — иногда возникает ощущение, что проще сделать c ванильным CSS, чем 100500+ артбордов + всякие трюки для оптимизации всего этого. Причем, похоже, второй вариант будет во многом лучше (особенно если на чистом), потому что не сломается через несколько лет, есть смысл потратить чуть больше времени вначале. 

Ответить
Развернуть ветку
Pixel Lens

Кроссафчеги 👍

Ответить
Развернуть ветку
Дмитрий Прозоров

Так неожиданно и прияяятно!

Ответить
Развернуть ветку
Puma RB

А зачем столько оттенков синего, похожих друг на друга?

Ответить
Развернуть ветку
Михаил Лихачёв

Спасибо за вопрос! ✌️

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

Недавний редизайн, где мы отказались от синей шапки, уже раскатался на всех пользователей последних версий приложения. Теперь можем отказаться от поддержки старой темы с использованием тех цветов, и скоро планируем заняться приведением цветовой палитры в порядок и чисткой от ненужных оттенков. Количество синих получится сократить примерно до 5 штук, сейчас это отдельная палитра Azure. Раньше использовалась палитра Blue.

Ответить
Развернуть ветку
Dmitriy Konash

Добрый день, а не удобнее ли использовать в макетах готовые цветовые стили из VKUI Color Palette, чтобы не дублировать их с разными названиями под каждый элемент со схожим цветом? Тоже так всегда делал, но их появляется огромное количество и кодеры ругаются на путаницу. Пробую минимальный набор цветов в макетах без привязки названий к элементам, и пока не пойму стоит ли оно того. 

Ответить
Развернуть ветку
Михаил Лихачёв

С одной стороны это упростило бы работу, с другой стороны это развязывает руки. Лучше всего определиться с одним оттенком для подписей (к примеру), а самый лучший способ это зафиксировать — завести переменную. 

Всегда был сложный вопрос про организацию системы с семантическими названиями, как работая с этим не создавать токенов больше нужного. Могу рекомендовать объединять переменные по общим глобальным признакам и тому какой они несут смысл внутри пересекающихся компонентов: например icon_secondary, который относится и к иконке в списке, и к иконке в поле ввода, и к иконке во вторичных кнопках действий. Вместо условных list_icon, input_icon, action_secondary_icon. 

Ну а для нас работа с токенами критически необходима для поддержки тёмной темы. У всех компонентов токены уже проставлены, но если рисуем что-то кастомное, сразу обязательно подбираем токен, название которого разработчик потом подставляет себе. В итоге за систему с токенами отвечает команда дизайна. До разработки макеты доходят всегда со всеми токенами, а если чего-то нет, то заранее отправляем пулл-реквест в JSON-схему. 

Ответить
Развернуть ветку
Dmitriy Konash

Очень интересно, спасибо. При разработке кастомных страниц от кучи токенов, как я понял, не уйти все равно) Сейчас тоже делаю проект с двумя темами и плагин для смены стилей просто огонь, экономит часы))

Ответить
Развернуть ветку
Puma RB

Знакомая история) 
А вы не описывали адаптивность, чтобы на разных устройствах всё хорошо смотрелось, особенно на планшетах?

Ответить
Развернуть ветку
Михаил Лихачёв

Пока нет :)

Ответить
Развернуть ветку
Алексей Самойлов

Здравствуйте. Передайте, кто-нибудь, пожалуйста, разработчикам, а лучше много раз им напишите всем,
Пускай в этих компонентах обязательно хорошо поработают над доступностью для незрячих, для слепых, для Программ экранного доступа talkback, voiceover, nvda. Это очень важно. Большинство сервисов, которые сделаны не в России, над этим усиленно работают. Это легко это нисколько не сложно и не тяжело.

Ответить
Развернуть ветку
Михаил Лихачёв

Здравствуйте! У нас есть планы на улучшение поддержки доступности, но конкретно сейчас чем-то поделиться не можем. 

Ответить
Развернуть ветку
Алексей Самойлов

 Желаю чтобы эти планы поскорее начали сбываться. И очень долго этого жду. И не один я, поверьте

Ответить
Развернуть ветку
Dmitriy Konash

Это потрясающе, идеальный атомный дизайн, да еще и с автолайотами. Интересное решение с паддингами у кнопок и ресайза строк. Возможно в фигме добавят вскоре возможность выставлять их по-отдельности для каждой стороны и необходимость костылей пропадет.

И вопрос про шрифт TT Commands, скачал несколько версий, и каждый раз, при выделении любого заголовка в макетах, шрифт внешне уменьшается на несколько пунктов. Дело в шрифте, без лицензии не обойтись?)

Ответить
Развернуть ветку
Михаил Лихачёв

Спасибо за большое фидбек 😌
Да, с разными паддингами для каждой из стороны было бы конечно здорово. Мы будем рады избавиться от лишних слоёв и контейнеров с отрицательными отступами)

У TT Commons есть обновлённая версия и да, требуется лицензия чтобы всё правильно отображалось. В группе по Figma в ВК ответили, но продублирую тут: разом пересчитать размеры выделенных текстовых слоёв поможет команда в меню Recompute Text Layout in Selection (находится только через поиск). 

В интерфейсах TT Commons мы используем только в Panel Header, но для него есть специальный заменяемый компонент Middle в конце списка с системным шрифтом, предполагается использовать его.

Ответить
Развернуть ветку
Николай Ларсен

@ВКонтакте  а почему нет дизайн-библиотеки от вашего сайта?

Ответить
Развернуть ветку
Михаил Лихачёв

Библиотеки компонентов для сайта у нас пока не такие гибкие, как для мобильных устройств. Работаем над этим 🙌

Ответить
Развернуть ветку
Joel Joyce

Спасибо. Давно пользуюсь вашими иконками, которые случайно нашел на гитхабовской странице VK. Одни из лучших.

Ответить
Развернуть ветку
Свирепый Насрулло

Очень грамотно сделанный набор. Некоторые схожие лайфхаки мы применяли в своей системе, которую недавно выставили на продажу.

Ответить
Развернуть ветку
Антон Яковлев

Наконец-то теперь и в Figma

Ответить
Развернуть ветку
Денис Пешехонов

Дизайн сейчас самая сильная сторона ВК. На продуктовую часть явно подзабили, но команда дизайна точно знает, что делает. Респект. Хоть сам и не могу использовать VKUI, потому что пишу на Vue, всё равно очень видно внимание к деталям и продуманность элементов.

Ответить
Развернуть ветку
Сергей Дмитриевич

Можно ли использовать Ваш опыт при разработке своего приложения ?

Ответить
Развернуть ветку
Михаил Лихачёв

Конечно 😌

VKUI — дизайн-система с открытым исходным кодом и свободной лицензией MIT. То же касается и дизайна: библиотеки компонентов в Figma доступны под лицензией CC BY 4.0.

Ответить
Развернуть ветку
Даниил Крылов

ВКонтакте, ребята огромное спасибо, это большой плюс для разработчик и дизайнеров. Захватим mini apps весь мир!!!

Ответить
Развернуть ветку
RK

Вот это царский подгон, спасибо! 

Ответить
Развернуть ветку
Serhio Alvarez

Фигма уверенными темпами обретает лучших ) Майкрософт тоже опубликовали свою библиотеку.

Ответить
Развернуть ветку
27 комментариев
Раскрывать всегда