01 / Разница
Макет фиксирует кадр, а интерфейс постоянно меняется.
В Figma текст обычно нужной длины, изображение уже загружено, а кнопка находится в нормальном состоянии. В браузере заголовок может занять три строки, данных может не быть, запрос может завершиться ошибкой, а ширина экрана — оказаться между привычными брейкпоинтами.
Поэтому разработка — не механический перенос координат. Это продолжение проектирования, в котором визуальная идея превращается в систему правил.
02 / Что учитывать
У каждого компонента больше одного состояния.
- короткий и длинный контент
- загрузка, отсутствие данных и ошибка
- hover, focus, disabled и touch-взаимодействие
- широкий экран, планшет, телефон и невысокое окно
- обычное и сниженное движение для prefers-reduced-motion
04 / Результат
Хорошая реализация не копирует макет — она сохраняет его логику.
Качество интерфейса определяется не сходством с одним макетом, а устойчивостью визуальной системы в реальных условиях.