logo

Инструменты

Paradigm
Библиотеки

Paradigm

Paradigm — дизайн-система, которая содержит всё, что нужно для создания сервисов Mail.ru. Мы пытаемся покрывать все потребности дизайнеров и постоянно работаем над развитием системы.
Команда дизайн-системы создала в Figma библиотеки базовых инструментов с цветами и типографикой, иконки и UI-кит с компонентами.
Библиотеки Paradigm доступны всем дизайнерам и проектам в VK.
Также большая база знаний по работе дизайнеров собрана на нашем сайте.
Дизайн-система Mail.ru Group paradigm
paradigm.mail.ru

Библиотеки

Компоненты — это часто повторяющиеся элементы интерфейса: кнопки, заголовки, чекбоксы и так далее. Они помогают создавать и поддерживать консистентный дизайн внутри компании.
Каждая команда в Figma имеет свой базовый набор подключенных библиотек. Получить доступ можно на вкладке Assets или через панель стилей.
Основная библиотека Paradigm с базовыми компонентами находится в одноименном проекте. Вы можете найти и подключить ее с помощью стандартного поиска. Также публичная версия нашей библиотеки есть в Figma Community.
Paradigm 2.0 | Figma
Библиотека Paradigm
Библиотека содержит набор цветов и типографики, который полностью повторяет тему проекта в токенах. Все цвета разделены на категории согласно которым они используются. Добавлены сразу Variables для темной и светлой темы интерфейсов. В библиотеке описаны основные компоненты интерфейса. Это компоненты VKUI с ипользованием темы Paradigm. На базе компонентов собираются основные экраны наших сервисов. На страницах компонентов дополнительно добавлена документация по их параметрам.
Компоненты библиотеки разделены на Regular и Compact версию. Они соответствуют платформам на которых проектируется интерфейс. Regular для мобильных интерфейсов, Compact для web

Локальные библиотеки проектов

Для проектов которые наследуют Paradigm допускается создавать локальные библиотеки. В них могут хранится как копии стилей и компонентов Paradigm, так и дополнительные локальные цвета и компоненты.
Мы рекомендуем для локальных библиотек использовать единые стандарты нейминга и параметров компонентов

Как работать с библиотеками

  1. Рекомендуем сделать автоматическое подключение библиотеки Paradigm при создании нового файла. Если библиотеки не подключаются автоматически, включите их вручную.
  1. При отрисовке элементов дизайна используйте переменные цветов Paradigm. Переключать темы интерфейсов вы сможете стандартными средствами Figma.
  1. При работе с типографикой используйте стили текста из Paradigm.
  1. Если нужно добавить иконку, подключите дополнительно библиотеку VKUI Icons Library. Вы сможете найти ее поиском на панели Assets.
  1. При подключенной к файлу библиотеке компоненты Paradigm находятся на вкладке Assets в папке Components.
  1. Если вы понимаете что функционала библиотеки не хватает, лучше создавать локальные компоненты внутри файла Figma.
При использовании стандартных компонентов мы рекомендуем не отвязывать их от родителя, и если не хватает функционала написать ответственному за библиотеку

Почему это важно

  • Работая с компонентами, мы поддерживаем консистентность наших продуктов
  • Используя базовые компоненты вы оперативно получите обновления
  • Это упрощает дальнейшую реализацию разработчикам
  • Это ускоряет работу дизайнера — не нужно тратить время на отрисовку стандартных элементов.
  • Это позволяет поддерживать макеты в актуальном состоянии: все изменения в библиотеках сразу передаются в другие файлы
Если вы обнаружили ошибки в библиотеках или вам неудобно ими пользоваться, напишите любому дизайнеру из команды дизайн-системы, и мы найдем решение ❤️