Что такое дизайн-система

Дизайн-система — это совокупность визуального языка (UI-kit с атомарным подходом), гайдлайнов (правила использования) и библиотеки компонентов (код).

Ценности

• Визуальная однородность и однородность в коде
• Синхронизация компонентов и кода
• Единый источник правды для всех
• Экономия ресурсов в перспективе

Примеры

• Gov.design (государственные системы России)
• Paradigm (Mail)
• Plasma (Сбер)
• Контур (Контур)
• IBM (IBM)
• Lightning (SalesForce)
• Atlassian (Atlassian)
• КОД — клуб отечественных дизайн-систем
• the component gallery — подборка импортных дизайн-систем

Зачем нужна дизайн-система

• Автоматизация процессов, стандартизация решений и, как следствие, экономия ресурсов
• Со временем внедрения появляется возможность усилить концентрацию на более сложных и крупных проблемах
• Высокая скорость прототипирования с низкой степенью абстракции
• Итеративное, бесшовное и гибкое развитие
• Консистентность нескольких продуктов на разных платформах от внешнего вида до принципов взаимодействия
• Лебедь, рак и щука, начинают толкать воз в одну сторону
• Низкая зависимость от исполнителей

Когда не стоит применять

• Дорого (создание и поддержка)
• Мало времени
• Небольшой продукт
• Отсутствие бренда

С чего начать

• Взвесить за и против, нужна ли дизайн-система компании
• Сформировать минимальный набор элементов (исходя из идеи, целей и задач бизнеса, лучше всего действовать исходя из видимых и возможных проблем)
• UX
  • сначала проводим исследования по требуемым компонентам и лучшим практикам, скетчим, ваяфреймим, прототипируем, чтобы лучше понимать, какого плана и какие компоненты мы будем делать и каким образом
  • проверка гипотез
  • возможность и сроки реализации в разработке
  • важно: UI идет в топку и нужно договориться со всеми участниками процесса, что рюшечки, цвета и шрифты мы на этом этапе не обсуждаем
• UI
  • создаем оформление для текущих элементов UX, согласованных на предыдущем этапе
  • возможно стоит вернуться и доработать UX
  • согласование с командой разработки
• Создание компонентов и стилей в Figma
  • Атомарный подход (Brad Frost)
    • Атом (самостоятельный элемент)
    • Молекула (состоит из нескольких атомов)
    • Организм (состоит из молекул и атомов)
    • Шаблон (организм или группа, с организацией полиморфизма и адаптива)
    • Страница (порядок шаблонов в заданном размере и порядке, с реальным контентом)

Особенности Figma

• Ограничения (не волшебная кнопка, но лучшее, что пока есть)
• Проблемы
  • Другой тип рендеринга
  • Обновления
  • Глюки
• Полезные файлы и плагины
  • Components by Const Lab
• Бесплатный аккаунт для создания дизайн-систем
  • Сложно, но можно
• Платный аккаунт
  • Зачем дробить файлы
• Лучшие практики
  • Не блокировать слои (если на слое стоит замочек, то человек с правами view only не сможет перенести, посмотреть и пр.)

Разработка компонентов

• Степень проработки и универсализации
• Компоненты
  • Вариативность
  • Именование
  • Адаптивность (автолейауты и констрэинтсы)
  • Интерактивность
• Сетка и модуль
  • 4/8 рх vs 5/10 рх
  • Настройка гридов
• Иконки
  • Проблема однопиксельности
• Цвет
  • Подход к подбору цветовой палитры с тонкой настройкой оптических искажений цвета
  • Темная тема
• Работа со сценами (принципы и тонкости)
• Типографика
  • Плюсы и минусы большого количества стилей
• Единая система отступов

Слияние и разделение дизайн-систем

• Особенности слияния
  • Поглощение
  • Создание новой
• Особенности деления

Создание спецификаций

• Понятность описательного языка
• Инфостиль
• Tone of voice
• Инфографика
• Навигация

Внедрение и работа с разработчиками

• Волшебной кнопки нет
• Создать проще, чем внедрить
  • Влажные фантазии и сухая реальность
    • Вовлекать разработчиков с первых этапов создания (ключевых)
  • Постоянная проверка пульса и обсуждение возможностей с разработчиками на каждом из этапов
  • Помним о бизнес-целях: лучше работающий сухой стандарт сегодня, чем глючный, непроверенный через неопределенное количество времени
  • Начинаем с MVP, сначала жизненно необходимое и то, что точно внедрится на первых порах
  • Гибкость и компромиссность — то, что не получается сейчас, внедряем на следующем этапе
    • Возможные проблемы и последствия
  • Пульс
    • Комментарии в фигме при важных изменениях
      • Важность
      • Методы
        • Стандартные комментарии
        • Кастомные (создание вариативных компонентов в определенном стиле)
    • Общий чат разработки
    • Регулярные созвоны
    • Все, что всплыло — заносится в гайд — если один человек задал вопрос, то скорее всего, он возникнет и у другого
• Всего не предусмотреть и это нормально. Учитываешь ошибки прошлого. Появляются новые затыки. Находишь решения. Оттачиваешь. Внедряешь.
• Подрядчики
  • Проблема закрытости библиотек
  • Работа в других средах разработки

Библиотека компонентов

• Тестирование
• Закрытая/открытая
• Инструменты
  • Storybook
  • Bit
  • Zeroheight
  • Supernova
  • Кастомные решения