От макета к коду без потерь: токены, Dev Mode и MCP

Самая частая жалоба заказчиков: «В макете было красиво, а сайт получился другим». Отступы поехали, шрифт не тот, кнопки разные на разных страницах. Расскажу, почему так бывает и как я выстраиваю переход от макета к коду

01Почему сайт не похож на макет

• Макет нарисован как картинка: отступы на глаз, цвета без системы. Разработчику приходится угадывать
• В макете нет состояний: как выглядит кнопка при наведении, что будет с длинным названием, как ведёт себя блок на планшете
• Дизайнер отдал файл и ушёл, а вопросы разработчика остались без ответа

02Дизайн-токены

Токен это именованное значение: цвет «акцент», отступ «средний», размер «заголовок второго уровня». В Figma токены живут в переменных, в коде становятся CSS-переменными с теми же именами

На этом сайте, например, все цвета и размеры заданы токенами в одном месте: фон, основной текст, акцентный красный, размеры заголовков и отступов. Если завтра нужно поменять акцентный цвет, я поменяю одну строку, и он изменится на всех страницах

Главное правило: одинаковые имена в макете и в коде. Тогда разработчик не переводит «красный #FF3B30» в какую-то свою переменную, а берёт готовую

03Dev Mode

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

04MCP-сервер: макет для AI-ассистента

Сейчас многие разработчики пишут код вместе с AI-ассистентом. У Figma есть MCP-сервер: через него ассистент читает макет не как картинку, а как структуру, с компонентами, переменными и данными о раскладке. По данным Figma, чтение макетов через него доступно бесплатно

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

05Авторский надзор

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

06Когда дизайнер и разработчик один человек

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

07Итог

Сайт совпадает с макетом, когда у них общий язык: токены, компоненты и понятные правила. Если хотите сайт, который выглядит так же, как в дизайне, посмотрите, как я работаю над сайтами, или напишите мне