Интерфейс, который не разваливается на втором экране

С чего начинается развал

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

Мы разбираем на своих проектах, что именно ломается первым и какие решения снимают это заранее — без «дизайн-системы на сто компонентов», которую всё равно никто не откроет.

• Сетка задаёт не колонки, а решение, куда класть то, что в колонки не влезло
• У каждой текстовой ступени есть нижняя граница — ниже неё кегль не опускается
• Состояния рисуются сразу: пустое, длинное, ошибка. Не «потом»
• Отступы кратны одному шагу, и этот шаг записан

Система нужна не для красоты, а чтобы правка в одном месте не порождала три правки в других.

Что делаем вместо этого

Сначала собираем текстовую шкалу и сетку, потом рисуем экраны. Звучит очевидно, но на практике половина проектов идёт наоборот: рисуется первый экран, а система вытаскивается из него задним числом. Тогда она наследует все случайности этого экрана.

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