Разрыв между дизайном и версткой может увеличить стоимость разработки лендинга на 20-30% из-за бесконечных правок и уточняющих вопросов. Профессиональный макет — это не картинка, а техническое задание, где каждый слой говорит программисту, какой CSS-класс применить.
Именование слоев: от хаоса к системе
Слои с названиями «Group 452» или «Frame 12» — главный триггер раздражения верстки. В коммерческих проектах среднего чека (от 50 000 до 150 000 руб. за лендинг) стандарт именования базируется на BEM-подобной логике или функциональном подходе. Например, вместо «Кнопка_красная» используйте btn_primary, вместо «Заголовок_главный» — hero_title.
Кейс: при передаче макета с неструктурированными слоями разработчик тратит до 4 часов дополнительного времени только на поиск нужных элементов и уточнение отступов. Системный нейминг сокращает этот этап до 15 минут. Мой экспертный вывод: называйте элементы по их функции, а не по внешнему виду, так как цвет кнопки может измениться, а её функция — остаться.
Архитектура через Сетка и автолейауты (Auto Layout 5.0)
Передача макета, собранного «на глаз» без использования Auto Layout, — это профессиональное самоубийство. Разработчик видит в Dev Mode конкретные значения gap (расстояние между элементами) и padding (внутренние отступы). Если вы используете фиксированные координаты, верстальщик будет вынужден подбирать цифры вручную, что ведет к погрешности в 5-10 пикселей на разных экранах.
Пример: блок с иконками преимуществ, собранный через Auto Layout с фиксированным шагом в 24px, верстается за 10 минут. Тот же блок, нарисованный группами, требует ручного замера каждого интервала. Вывод: любой повторяющийся элемент или список обязан быть в автолейауте, иначе макет бесполезен для адаптивной верстки.
Работа с Dev Mode: мост к коду
Dev Mode в Figma 2024 превратил макет в интерактивную документацию. Теперь разработчик видит не просто размер шрифта, а конкретный CSS-код (например, font-weight: 600; line-height: 1.2;). Важнейший нюанс: проверяйте, чтобы все ваши размеры были кратны 4 или 8 (система 8pt). Значения вроде 13.47px в Dev Mode выглядят непрофессионально и заставляют программиста округлять их на свой вкус, ломая вашу визуальную концепцию.
Сравнение: передача проекта через обычный просмотр требует от дизайнера создания отдельного UI-kit файла. Dev Mode позволяет интегрировать стили прямо в инспекцию элементов, сокращая время коммуникации на 40%. Мой вердикт: если вы не проверяете макет в режиме разработчика перед сдачей, вы отдаете проект на удачу.
Подготовка ассетов и экспорт ресурсов
Ошибкой новичка является передача иконок в формате PNG или принуждение разработчика «вырезать» их из макета. Все векторные элементы должны быть переведены в Outline (Ctrl+Shift+O) и оформлены как компоненты. Оптимальный формат для веба в 2024 году — SVG для графики и WebP/JPG для фото с оптимизацией через TinyPNG или аналоги, чтобы вес страницы не превышал 2-3 Мб.
Мини-кейс: использование тяжелых PNG-изображений (по 2 Мб каждое) увеличивает время первой отрисовки страницы (LCP) до 5-7 секунд, что снижает конверсию лендинга на 15-20%. Правильная подготовка ассетов с именованием icon_phone.svg позволяет верстальщику просто скачать архив и внедрить его. Вывод: создавайте отдельную страницу «Assets» в файле, где собраны все иконки и фото в один ряд.
Вывод
Чтобы стать востребованным дизайнером, перестаньте рисовать «картинки» и начните проектировать интерфейсы. Начните с внедрения системы именования слоев по функциональному признаку и обязательного использования Auto Layout для каждого блока. Избегайте передачи проектов без проверки в Dev Mode и использования дробных пикселей. Самый быстрый путь к уважению разработчиков — макет, который не требует ни одного уточняющего вопроса по отступам и размерам.