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

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

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

Ключевое условие — синхронность. Компоненты в Figma и компоненты в коде должны совпадать, иначе система превращается в красивую, но бесполезную документацию. Помимо элементов в неё входят правила: доступность, поведение состояний, тексты интерфейса.

Связанные термины

UI (User Interface) — это визуальная часть продукта, через которую человек с ним взаимодействует: экраны, кнопки, поля, иконки, шрифты, цвета и отступы. UI-дизайнер отвечает за то, как продукт выглядит и как выглядят его состояния.

Figma

Figma — онлайн-редактор для дизайна интерфейсов. В нём рисуют макеты сайтов и приложений, собирают кликабельные прототипы и передают работу разработчикам, а несколько человек могут править один файл одновременно прямо в браузере.

UX (User Experience) — это весь опыт человека при использовании продукта: насколько понятно, где находится нужное, сколько шагов занимает задача, что происходит при ошибке и остаётся ли ощущение, что цель достигнута без лишних усилий.

CSS

CSS (Cascading Style Sheets) — язык описания внешнего вида страницы: цвета, шрифты, отступы, расположение блоков и поведение вёрстки на разных размерах экрана. HTML задаёт, что находится на странице, CSS — как это выглядит.

Frontend

Frontend — это часть сайта или приложения, которая выполняется в браузере пользователя: вёрстка, стили, анимации и вся логика интерфейса. Всё, что человек видит и с чем взаимодействует, — зона ответственности фронтенда.