Дизайн-система
Краткое определение
Дизайн-система - это набор переиспользуемых элементов бренда: цветов, типографики, кнопок и компонентов, собранных в единый свод правил.
Цветовая палитра, шрифты, стили кнопок, поля форм и карточные компоненты определяются один раз, и каждая новая страница собирается из этих готовых компонентов вместо того, чтобы отрисовываться заново. Она существует как библиотека в Figma и как общий набор компонентов в коде.
С ней сталкиваются, как только более одной страницы или продукта должны нести один и тот же бренд, или когда команде дизайна и разработки нужен общий язык.
Ее часто путают с брендбуком. Брендбук - это документ, описывающий, как использовать логотип и цвета; дизайн-система идет дальше и включает реальные, готовые к использованию компоненты кода и дизайна.
Самая частая ошибка: строить систему дизайна как красивую библиотеку в Figma, но никогда не обновлять соответствующие компоненты в коде, из-за чего файл дизайна со временем расходится с тем, что реально показывается на сайте. Правильный подход: считать набор компонентов в коде единственным источником истины и выстроить понятный процесс, по которому Вы переносите туда же каждое изменение дизайна.
Почему это важно
Проектировать и программировать каждую страницу с нуля - это потеря времени и источник несогласованных кнопок и цветов на сайте. Дизайн-система ускоряет создание новых страниц и делает бренд одинаковым везде.
Условный пример
Страницы товаров, услуг и кампаний производителя напольных покрытий строятся из одних и тех же компонентов кнопок и карточек, поэтому новая страница создается за часы, а не за дни.
