Что такое «Дизайн-система»

Уже немного стих хайп и споры вокруг темы дизайн-систем. Пыль улеглась. Но и по сей день некоторые дизайнеры продолжать называть свои UI-киты, сделанные в Sketch, дизайн-системами; другие говорят, что дизайн-системы — это совсем про другое; третьи утверждают, что дизайн-система — это еще и анимация, и документальные гайдлайны, и бла-бла-бла-бла… Однако точной формулировки почти никто не дает.

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

Что такое «Дизайн-система»?

Дизайн-система — это визуальная философия и набор компонентов, сделанных по четким правилами и отраженным в виде кода в единой библиотеке.

Не путать со статичными гайдлайнами и UI-Kit (наборами элементов интерфейсов). Это живые (реализованные) компоненты и принципы взаимодействия с ними, которые находятся в одном репозитории. UI-Kit и гайды — одна из составляющих дизайн-системы.

Например, Facebook использует React JS — готовый фреймворк, который имеет в себе уже готовые компоненты (кнопки, формы и т.д.) в коде. И новым разработчикам, чтобы вставить какой-то компонент в проект, достаточно обратиться к этой библиотеке и использовать его.

Что включает в себя дизайн-система?

1. Философию и визуальный язык
2. Руководство по стилю
3. Готовые компоненты в коде
4. Документацию по принципам и правилам
5. Пропагандистов дизайн-системы

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

Нужна для создания больших сайтов, сервисов, мобильных и веб-приложений, где есть много повторяющихся элементов. А еще:

• Экономит время на дизайн/разработку.
• Динамична и легко обновляемая.
• Служит готовым конструктором.
• Стандартизирует интерфейсы и минимизирует баги.
• Легко масштабируется.

Примеры дизайн-систем

1. Bootstrap
2. Google Material Design
3. Apple Design
4. IBM Design Language
5. Polaris (Shopify)
6. Chulakov Design System
7. Paradigm (Mail.ru)

Вывод

Делая дизайн-систему всегда нужно понимать цель ее создания. Как я уже сказал выше, она нужна, в первую очередь, для больших сервисов с повторяющимися компонентами. Но и на небольших проектах она тоже может быть полезна.

И, конечно, дизайн-система — это всего лишь инструмент, которым нужно правильно пользоваться, регулярно работать над ним и обновлять.

Если чего-то не учел, пишите комментарии, дополняйте и задавайте вопросы. Всем ✋