Сцена, которую видел каждый верстальщик. Заказчик присылает несколько скриншотов дизайна, пишет «вот макет, сверстай как тут» — и искренне ждёт, что результат совпадёт с картинкой до пикселя. А потом удивляется, почему отступы поехали, цвета чуть-чуть другие, а шрифт вообще не тот. И начинается долгая переписка с правками: «тут подвинь», «здесь не так», «цвет не совпадает» — на неделю, хотя сама вёрстка заняла два дня.
Почти всегда корень этой истории не в том, что верстальщик плохой. Он в том, что макет передали мутно. Вёрстка — это перевод дизайна на язык кода, и качество перевода напрямую зависит от того, насколько внятно написан оригинал. Дайте чистый, аккуратный файл с понятными размерами и описанными состояниями — получите точную вёрстку с первого раза. Дайте хаос из картинок — получите догадки верстальщика и бесконечные правки. Разберём, как передать макет так, чтобы результат совпал с дизайном, а не превратился в марафон согласований.
Эта статья — часть раздела про вёрстку. Смежные темы: как составить ТЗ, что такое pixel perfect, как принять готовую работу.
Что вы узнаете из статьи
- Почему картинок недостаточно и нужен сам файл Figma
- Как навести в макете порядок, чтобы вёрстка стала точной
- Что обязательно показать, кроме десктопа: состояния и адаптив
- Почему мутный исходник верстальщик закладывает в цену
- Как проверить, что вы передали всё, и не получить «додуманное»
Почему картинки не работают, а нужен файл
Картинка дизайна — это фотография блюда, а файл Figma — рецепт. По фотографии вы примерно поймёте, что это за блюдо, но повторить точно не сможете: непонятно, сколько чего класть. Так и с макетом. На скриншоте верстальщик видит, что кнопка синяя и где-то сверху, но не знает её точный цвет, размер, отступы и шрифт. Ему приходится всё это измерять на глаз пипеткой и линейкой, а глаз ошибается на пару пикселей, и вот уже вёрстка «почти как макет, но не совсем».
Файл Figma с доступом меняет всё. Из него верстальщик берёт реальные значения: цвет — не «примерно синий», а точный код, отступ — не «на глаз», а ровно столько пикселей, сколько заложил дизайнер. Шрифты, размеры, межстрочные интервалы — всё считывается из файла напрямую. Поэтому первое и главное правило: отдавайте верстальщику доступ к самому макету, а не его экспорт в картинки. Картинки годятся как превью «о чём вообще речь», но источником для вёрстки служит только живой файл.
Тут же закладывается и половина будущего взаимопонимания. Когда у вас на руках общий файл, удобно сразу составить ТЗ на вёрстку и привязать требования к конкретным экранам: не «сделай красиво», а «вот этот блок — приоритетный, вот тут анимация при наведении, вот так он сворачивается на телефоне». Дизайн и требования в одном месте — меньше шансов, что что-то поймут не так.
Как навести порядок в макете перед передачей
Чистый макет верстается быстро и точно, замусоренный — медленно и с ошибками. Несколько вещей, которые стоит привести в порядок до передачи, и они окупаются сторицей.
Слои и группы. Если в файле сотни безымянных слоёв навалены кучей, верстальщик тратит время, просто разбираясь, где что. Сгруппируйте элементы логично, назовите по-человечески: «шапка», «блок преимуществ», «форма заявки». Это как разложить инструменты по полкам перед работой — вроде мелочь, а скорость и аккуратность растут заметно.
Стили цветов и шрифтов. Когда цвета и шрифты собраны в стили, а не раскиданы по элементам вразнобой, верстальщик переносит их в код одним движением и нигде не путается. Когда один и тот же синий в макете встречается в пяти чуть разных оттенках, это либо ошибка дизайна, либо специально — и верстальщику приходится гадать, что именно.
Картинки и иконки. Соберите их отдельно, в нужном разрешении и формате. Иконки лучше векторные, фотографии — достаточного качества, чтобы не размылись на больших экранах. Если этого нет, верстальщик либо вырезает их из макета сам (теряя качество), либо дёргает вас на каждую картинку.
Сетка и отступы. Хорошо, когда дизайн построен на единой сетке с предсказуемыми отступами. Тогда вёрстка ложится ровно и одинаково по всему сайту. Если отступы у похожих блоков везде разные на пару пикселей, верстальщик не понимает, это так задумано или дизайнер промахнулся, — и снова догадки.
Что показать кроме десктопа: состояния и адаптив
Главный источник расхождений между дизайном и вёрсткой — это то, чего в макете нет. Верстальщик не телепат: всё, что вы не показали, он допридумает сам, и не факт, что так, как вы хотели.
Первое, что обязательно нужно показать, — мобильную версию. Большинство людей сегодня заходят на сайты с телефонов, и если макета под мобильный нет, верстальщик придумывает компоновку сам. Получится рабоче, но почти наверняка не так, как вы себе представляли, — и пойдут правки. Покажите, как блоки перестраиваются на узком экране, что прячется, что становится крупнее, и расхождений не будет.
Второе — состояния элементов. Кнопка в покое, кнопка при наведении, кнопка нажатая, кнопка неактивная. Поле формы пустое, заполненное, с ошибкой. Меню закрытое и открытое. Всё это живые состояния, которые есть на реальном сайте, и если их нет в макете, верстальщик придумывает оформление сам. Покажите хотя бы основные — и сайт оживёт ровно так, как вы задумали, а не на усмотрение исполнителя.
Степень точности, с которой нужно повторить макет, — отдельный разговор: где-то критичен pixel perfect вёрстка, а где-то достаточно близкого совпадения. Это полезно обсудить заранее, чтобы не спорить потом из-за двух пикселей, которые на результат не влияют.
Почему мутный макет стоит денег
Тут важная вещь, которую заказчики часто не осознают: качество исходника напрямую влияет на цену. Когда верстальщик видит аккуратный файл с порядком в слоях, собранными стилями и показанным адаптивом, он понимает объём работы и называет честную цену. Когда видит хаос из картинок без размеров и состояний, он закладывает в смету риск — потому что знает, что будут догадки, переделки и долгая переписка с правками. Этот риск оплачиваете вы.
Получается простая арифметика: полчаса наведения порядка в макете до передачи экономят вам и деньги на смете, и нервы на согласованиях. Это та редкая ситуация, где небольшое усилие заказчика напрямую конвертируется в более низкую цену и более точный результат. Аккуратный исходник выгоден обеим сторонам: верстальщику — потому что не нужно гадать, заказчику — потому что получает то, что хотел, с первого раза.
Чек-лист передачи и приёмки
Перед тем как отдать макет, пройдитесь по короткому списку. Доступ к файлу открыт, а не только картинки. Слои сгруппированы и названы. Цвета и шрифты собраны в стили. Картинки и иконки приложены в нужном качестве. Показаны мобильная версия и состояния основных элементов. Описано, что должно происходить при наведении и клике. Если всё это есть, вы передали макет так, что вёрстка имеет все шансы совпасть с первого раза.
А когда работа готова, не принимайте на глаз «вроде похоже». Сверьте по тому же чек-листу, по которому удобно проверить качество вёрстки: открывается ли сайт на телефоне, не разъехались ли блоки, работают ли состояния кнопок, грузится ли всё быстро. Пятнадцать минут осознанной приёмки страхуют от ситуации, когда расхождения всплывают уже после оплаты.
Как платформа помогает получить точную вёрстку
На Где.Эксперт верстальщиков видно не по обещаниям, а по сделанным проектам и отзывам заказчиков. Заметно, кто работает аккуратно по макету, кто задаёт правильные вопросы до старта, а у кого в отзывах мелькают истории про «пришлось переделывать». Это сразу помогает выбрать того, кто переведёт ваш дизайн в код без сюрпризов.
Можно начать с обсуждения: показать макет, услышать, всё ли в нём понятно, и сразу договориться о состояниях и адаптиве. Оплата идёт по факту выполнения, когда вёрстка принята и совпадает с дизайном, а отзывы прошлых клиентов работают страховкой от долгих правок.
Часто задаваемые вопросы
Как правильно передать макет верстальщику?
Дайте доступ к файлу, наведите порядок в слоях, соберите цвета и шрифты в стили, приложите картинки в нужном качестве и опишите состояния и поведение на мобильном. Чем понятнее исходник, тем точнее и дешевле вёрстка.
Хватит ли картинок вместо файла Figma?
Нет. По картинке не вытащить точные размеры, цвета и шрифты — верстальщик меряет на глаз, и совпадения не будет. Нужен сам файл с доступом.
Что показать кроме десктопа?
Как минимум мобильную версию и состояния элементов: кнопки при наведении и нажатии, поля с ошибкой, открытое меню. Всё, чего нет в макете, верстальщик додумает сам.
Почему вёрстка не совпадает с дизайном?
Либо макет передали мутно, без точных значений, либо не показали состояния и адаптив. Аккуратный файл и описанные состояния убирают почти все расхождения заранее.
Можно ли превратить Figma в код автоматически?
Плагины выдают черновик — раздутый код без адаптива и семантики, который всё равно переписывают руками. Для прототипа сгодится, для живого сайта вёрстку делает человек.
Заключение
Точность вёрстки решается не в момент работы, а в момент передачи макета. Картинки заставляют верстальщика гадать, живой файл Figma даёт ему реальные размеры и цвета. Порядок в слоях, собранные стили, приложенные картинки, показанные адаптив и состояния — всё это превращает вёрстку из череды правок в точное совпадение с первого раза.
Главное, что стоит запомнить заказчику: всё, чего нет в макете, исполнитель додумает сам. Хотите получить ровно то, что задумали, — покажите это в файле, а не держите в голове. Полчаса наведения порядка экономят неделю согласований и снижают цену, потому что верстальщик не закладывает в неё риск догадок. А выбирать того, кто переведёт дизайн в код без сюрпризов, проще там, где видны сделанные проекты и отзывы.
Найдите верстальщика на Где.Эксперт — выбирайте по реальным отзывам, обсуждайте макет до старта и платите по факту выполнения.