Пора в отпуск
6000 миль
за оформление карты
Подробнее
(function(w, d, promoUrl, loc) { var modal, box, closeModalBtn, isModalAnimation, body, html, scrollBarWidth, promoButton; var teaser = d.querySelector('.tinkoff-all-airlines'); if (!teaser) return false; initModal(); preloadImages(['https://leonardo.osnova.io/2755fcfd-f5aa-3496-f0b8-2066ac91e9fa/', 'https://leonardo.osnova.io/0006b8c0-6e01-4b3f-6765-45d1606a2c48/', 'https://leonardo.osnova.io/da12942b-f4f3-2560-40b3-a1c930f4b330/']).then(function() { setTimeout(function() { analyticsEvents(); teaser.classList.add('is-init'); teaser.addEventListener('click', openModal); onDestroy(); }, 100); }); function onDestroy() { var moduleAjaxify = window.Air && window.Air.get('module.ajaxify'); if (moduleAjaxify && moduleAjaxify.on) { moduleAjaxify.on('Before page changed', function() { window.removeEventListener('scroll', scrollHandler); hideModal(); if (teaser) { teaser.removeEventListener('click', openModal); } if (box) { box.removeEventListener('click', stopPropagation); } if (closeModalBtn) { closeModalBtn.removeEventListener('click', closeModalStop); } if (promoButton) { promoButton.removeEventListener('click', clickPromo); } if (modal) { modal.removeEventListener('click', closeModal); modal.remove(); } }); } }; function initModal() { body = d.querySelector('body'); html = d.documentElement; modal = d.querySelector('.tinkoff-all-airlines-promo'); box = d.querySelector('[data-tinkoff-all-airlines-box]'); closeModalBtn = d.querySelector('[data-tinkoff-all-airlines-close]'); isModalAnimation = false; scrollBarWidth = getScrollbarWidth(); box.addEventListener('click', stopPropagation); modal.addEventListener('click', closeModal); closeModalBtn.addEventListener('click', closeModalStop); promoButton = d.querySelector('.tinkoff-all-airlines-promo__button'); if (promoButton) { promoButton.setAttribute('href', promoUrl); promoButton.addEventListener('click', clickPromo); } body.appendChild(modal); }; function clickPromo() { sendEvent('Promo button'); }; function stopPropagation(e) { e.stopPropagation(); }; function closeModalStop(e) { e.preventDefault(); e.stopPropagation(); closeModal(); }; function openModal() { if (isModalAnimation) return false; isModalAnimation = true; sendEvent('Popup', 'Open'); body.style.overflow = 'hidden'; html.style.marginRight = scrollBarWidth + 'px'; modal.classList.remove('is-hidden'); setTimeout(function() { modal.classList.add('is-show'); setTimeout(function() { isModalAnimation = false; }, 300); }, 0); }; function closeModal() { if (isModalAnimation) return false; isModalAnimation = true; hideModal(); sendEvent('Popup', 'Close'); }; function hideModal() { modal.classList.remove('is-show'); setTimeout(function() { modal.classList.add('is-hidden'); body.style.overflow = 'auto'; html.style.marginRight = '0px'; isModalAnimation = false; }, 300); }; function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; function preloadImages(urls) { return Promise.all(urls.map(function(url) { return new Promise(function(resolve) { var image = new Image(); image.onload = resolve; image.src = url; }); })); }; function sendEvent(label, state) { state = state ? state : 'Click'; var value = 'Tinkoff All Airlines 650 (' + loc + ') — ' + label + ' — ' + state; console.log(value); if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function getScrollbarWidth() { var outer = d.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; outer.style.msOverflowStyle = 'scrollbar'; d.body.appendChild(outer); var inner = d.createElement('div'); outer.appendChild(inner); var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); outer.parentNode.removeChild(outer); return scrollbarWidth; }; function analyticsEvents() { sendEvent('Teaser', 'init'); window.addEventListener('scroll', scrollHandler); scrollHandler(); }; function scrollHandler() { if (isScrolledIntoView(teaser)) { sendEvent('Teaser', 'Show'); window.removeEventListener('scroll', scrollHandler); } }; function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= 0) && (elemBottom <= w.innerHeight); return isVisible; }; }(window, document, 'https://www.tinkoff.ru/cards/credit-cards/all-airlines/promo/form/black-friday/?utm_source=vc0920_cc&utm_medium=ntv.fix&utm_campaign=allairlines.vcbf', 'entry-head'));
Дизайн
ВКонтакте
25 668

Публикуем дизайн-библиотеки компонентов 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": 164, "favorites": 489, "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 }
Объявление на vc.ru
0
30 комментариев
Популярные
По порядку
Написать комментарий...
25

Респект

Ответить
6

Круть)

Ответить
2

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

Ответить
6

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

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

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

Ответить
2

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

Ответить
3

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

Ответить
2

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

Ответить
1

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

Ответить
2

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

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

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

Ответить
0

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

Ответить
1

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

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

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

Ответить
1

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

Ответить
0

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

Ответить
0

Пока нет :)

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

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

Ответить
1

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

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

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
1

Конечно 😌

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

Комментарии

null