iPhone 13 Pro уже в продаже
Пространство возможностей
ООО «Портативная техника», юр.адрес: 190031, Санкт-Петербург, наб. реки Фонтанки, д.109, литер А, пом. 13Н, ОГРН № 1057811930296
{"id":6525,"title":"\u041a\u0430\u043a \u0441\u0435\u0431\u044f \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u043e\u0440\u0442\u0444\u0435\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 vc.ru","url":"\/redirect?component=advertising&id=6525&url=https:\/\/vc.ru\/promo\/292716-yandeks-vyhodit-iz-spyachki-alibaba-portit-nastroenie&placeBit=1&hash=7519bee6efc23ae5d635bf3098f678add4979d572b9f05b21135900c9688d27b","isPaidAndBannersEnabled":false}
Дизайн
ВКонтакте

Публикуем дизайн-библиотеки компонентов 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 — перейти к ним можно по ссылкам из этой записи.

{ "author_name": "ВКонтакте", "author_type": "editor", "tags": [], "comments": 30, "likes": 169, "favorites": 538, "is_advertisement": false, "subsite_label": "design", "id": 127039, "is_wide": true, "is_ugc": false, "date": "Thu, 14 May 2020 17:52:58 +0300", "is_special": false }
0
30 комментариев
Популярные
По порядку
Написать комментарий...

Респект

27

Круть)

6

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

2

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

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

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

6

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

2

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

3

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

2

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

1

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

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

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

2

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

0

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

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

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

1

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

1

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

0

Пока нет :)

0

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

1

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

1

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

1

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

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

1

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

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

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

1

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

1

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

0

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

1

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

1

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

1

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

0

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

0

Конечно 😌

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

1

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

0

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

0

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

0
Читать все 30 комментариев
Почему кейс с хомяком - не ошибка выжившего и не случайность

Сегодня Интернет облетела новость о том, что хомяк, бегая по своей клетке, заработал +29% на крипте. В комментария к публикации на VC многие писали, что это ошибка выжившего и просто случайность, которая ни о чем не значит. Я же постараюсь объяснить, почему это закономерность, и как сделать так, чтобы ваш кот/собака/рыбка показали такой же…

Я скрестил «Трибуну» и Product Hunt

Теперь вы никогда не пропустите самые перспективные русскоязычные стартапы.

Жизнь и удаленная работа во Вьетнаме: почему работать со сдвигом на 4 часа — это хорошо

Чтобы разобраться, как живется во Вьетнаме на самом деле, мы пообщались с аналитиком, которая с 2013 года живет здесь с супругом и не собирается никуда уезжать. Она расскажет, какие тут на самом деле цены, как обстоят дела с развлечениями и медициной и в чем главное отличие Вьетнама от других стран Юго-Восточной Азии.

Готовы выбрать победителя премии «Экспортер года eBay — 2021»?
Как мы проводили командную ретроспективу в Minecraft

Рассказываем историю, на что стоит обратить внимание при проведении командного мероприятия в игре Minecraft, какие грабли могут быть, как организовать онлайн- и офлайн-участие.

Увидеть первые Apple, сделать копию на ксероксе и потрогать мышку: как в Минске-88 прошла выставка «Информатика в США» Статьи редакции

Выставка стала потрясением для жителей: это было похоже на фильм «Назад в будущее», который на выставке тоже показывали, рассказывает dev.by. Издание поговорило с экс-гидом той выставки и минчанами, которые до сих пор хранят значки с её логотипом.

Нужны ли в России сити-фермы

И появятся ли грядки на крышах пятиэтажек.

re-thinkingthefuture.com
Как традиционному малому бизнесу превратиться в стартап: план действий

Сейчас в России предприниматели переходят из традиционного малого бизнеса в стартапы очень редко — меньше чем в 0,02% случаев. Это не больше 1 000 стартапов из около 6 млн предприятий малого бизнеса. Поговорим о том, что мешает предпринимателям и как действовать, если есть желание создать стартап.

Как испортить лучшую систему комментариев в рунете на примере vc.ru

Иногда мне кажется, на vc.ru идёт прогресс дизайна ради дизайна, а не ради прогресса. Вот и до комментариев добрались.

Прошел финал программы скаутинга в киберспорте Winstrike

Итоги программы Winstrike Scouting powered by UltraGear

Создал ледовый комбайн в 50, а вместе с ним и рынок таких машин, который сразу захватил — это изобретатель Фрэнк Замбони Статьи редакции

Иногда ледозаливочные машины других производителей по ошибке называют «Замбони», пишет The Hustle.

Ледовый комбайн Замбони Time
null