Автор: Саша Окунев
Всегда интересно, как те проблемы, с которыми сталкиваешься в повседневной работе с дизайн-системой, решают команды в других компаниях. В этом посте рассмотрим, чем хвастается в своём Figma Community команда Вконтакте.
Библиотеки в целом производят приятное впечатление порядка и демонстрируют хорошие архитектурные решения. О ляпах тоже поговорим.
Что можно найти:
Всего на figma.com/@vk мы видим 7 библиотек и один плагин. Как и все либы в Комьюнити, их можно дублировать в своё фигма-пространство, публиковать в нём локально, исследовать или даже переиспользовать выложенные компоненты в своих проектах.
- VKUI Base Library — центральная либа, в которой содержатся 1800 иконок во всевозможных размерах, а также токены цветов для светлой и тёмной темы интерфейса. 🛠 🌈 🔤
- VKUI Color Palette — Несемантическая палитра для автогенерируемого файла palette.json. Он используется в приложении VK для iOS и Android. Предполагаю, что из неё дизанйеры берут цвета для семантической, которая находится в файле VK Base Library. 🌈
- Web Color Palette – Несемантическая палитра для веба. Нужна, пока цвета на вебе и в мобилках отличаются. В будущем планируют сделать единую палитру и тянуть цвета из Base. 🌈
- VKUI Web Library — либа с компонентами для сайта vk.com. Стили типографики на базе SF, а также минимальный набор из 24 типов компонентов. 🌍 🔤 💠
- VKUI iOS Library — яблочная либа. Стили типографики на базе того же SF, а также их версии для поддержки Dynamic Type для слабовидящих. 25 типов компонентов. 🍏 🔤 💠
- VKUI Android Library — вёдерная либа. Стили типографики на базе Roboto и 25 компонентов. 🤖 🔤 💠
- VK App for iPad — файл с примерами дизайна приложения для iPad. Ключевые экраны, когда какие компоненты использовать, где всплывают уведомления, как работает свайп для удаления в списках и всякое такое. Можно подсмотреть паттернов. 🍏 📘
- Плагин VKUI Toolkit — содержит единственную команду Prepare Icons, которая позволяет контурные версии иконок готовить к проду, конвертируя их в залитые для последующей публикации в VKUI Base Library. 🛠
Легенда:
🌈 палитры
🛠 иконки
🔤 типографика
💠 компоненты
🌍 веб