Готовим макет и графику к передаче в вёрстку

Это подготовка и экспорт графических материалов из дизайн-макета в форматах, подходящих для дальнейшей вёрстки сайта.

Это небольшая иконка сайта, которая отображается во вкладке браузера и помогает визуально идентифицировать страницу.

Это область экспорта в Figma, которая позволяет сохранить выбранный фрагмент макета независимо от границ отдельных Frame и слоёв.

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

Материалы урока:

• Создание фавиконки - ссылка

Работа дизайнера не заканчивается после согласования внешнего вида лендинга. Перед передачей проекта необходимо подготовить сам файл и материалы для вёрстки.

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

Названия должны однозначно показывать назначение страницы. Верстальщик, открыв ссылку, должен сразу понимать, где находится актуальный макет и с какой версией ему нужно работать.

Перед экспортом проверяем структуру всего лендинга.

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

Основной Frame также лучше назвать понятно, например с указанием разрешения или типа макета.

Особое внимание уделяем объектам, которые визуально относятся сразу к нескольким секциям. Если изображение выходит за границы одного блока и Clip content не позволяет оставить его внутри Frame, такой объект допустимо хранить отдельным слоем. Главное — дать ему понятное имя и сохранить логичное положение в структуре.

Верстальщик видит только то, что есть в макете. Поэтому недостаточно показать один кадр слайдера или закрытый выпадающий список, если на сайте предусмотрены другие состояния.

Нужно отдельно подготовить:

• остальные изображения слайдера;
• состояния элементов при наведении;
• открывающиеся подсказки и списки;
• дополнительные изображения товаров;
• варианты кнопок;
• другие элементы, которые появляются после взаимодействия.

Если, например, в слайдере меняется не только товар, но и положение стрелки, это тоже нужно показать.

Все состояния должны быть понятны без необходимости самостоятельно додумывать механику.

Один и тот же визуал можно реализовать разными способами.

Иногда композицию удобнее передать одной готовой картинкой. В другом случае отдельные бутылки, круги и декоративные элементы потребуется экспортировать раздельно для анимации.

Поэтому сложные случаи лучше заранее обсудить с человеком, который будет собирать сайт.

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

Не каждый элемент макета превращается в изображение.

Как правило, отдельно не нарезаем:

• текст;
• простые однотонные фоны;
• стандартные кнопки;
• прямоугольные поля ввода;
• простые рамки и скругления;
• обычные тени;
• числовые значения.

Такие свойства проще и правильнее воспроизвести средствами HTML и CSS.

То же относится к простым формам поп-апов: фон карточки, кнопки и поля ввода верстальщик может собрать по параметрам макета.

Экспортировать стоит именно графику, которую невозможно или нецелесообразно воссоздавать кодом.

Векторные элементы сохраняем в SVG. К ним относятся логотипы, иконки, стрелки, галочки и другая графика, построенная в кривых.

Дополнительно к SVG в рамках курса сохраняем PNG-превью. Оно помогает быстро увидеть содержимое папки, особенно если файлов много или сама иконка белая и плохо различима при стандартном просмотре SVG.

PNG также используем для растровых объектов с прозрачным фоном.

JPEG подходит для больших фоновых изображений и фотографий, где прозрачность не требуется. Такие файлы обычно весят меньше и позволяют не перегружать сайт.

Если одна и та же стрелка, галочка или иконка встречается на странице несколько раз, экспортировать каждую копию не нужно.

Достаточно подготовить один файл, который затем будет переиспользован в вёрстке.

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

Кроме графики самого лендинга, нужно подготовить favicon.

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

В уроке исходник создаётся примерно в размере 100×100 px. Его можно оставить на прозрачном фоне или добавить простую подложку.

Сначала favicon экспортируем из Figma в PNG, после чего через специализированный сервис преобразуем в формат .ico.

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

Нарезку лучше сразу разделить по типам файлов.

Например:

• backgrounds — фоновые изображения;
• elements — отдельные декоративные элементы;
• icons — иконки;
• fonts — используемые шрифты;
• favicon — favicon.

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

Такая организация ускоряет поиск и уменьшает количество вопросов при вёрстке.

В папку со шрифтами добавляем только те семейства и начертания, которые действительно использованы в макете.

Если в дизайне применяется один Bold из большого семейства, необязательно передавать все существующие веса.

Архивы лучше заранее распаковать. Верстальщик должен открыть папку и сразу увидеть нужные файлы без дополнительных действий.

Если декоративные объекты статичны и не предполагают анимации, их иногда удобнее объединить с фоном.

Перед экспортом отключаем текст, кнопки, навигацию и другие элементы, которые будут реализованы отдельно. Оставляем только графическую композицию и сохраняем Frame как JPEG.

Если отдельный объект должен двигаться или анимироваться, его, наоборот, экспортируем отдельно в PNG с прозрачным фоном.

Главный вопрос при нарезке — должен ли элемент в готовом сайте существовать самостоятельно.

Чтобы ничего не пропустить, удобно двигаться по странице последовательно.

Начинаем с хедера и первого экрана, затем переходим к следующим блокам и проверяем каждый:

1. Что здесь является обычным HTML/CSS-элементом?
2. Что нужно экспортировать?
3. Есть ли скрытые состояния?
4. Нужна ли прозрачность?
5. Векторный это объект или растровый?
6. Планируется ли у него анимация?

Такой подход помогает не забыть отдельные изображения, иконки или фоновые композиции.

Все файлы должны иметь уникальные и понятные названия.

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

Если материалов много, можно применять групповые названия с категорией, проектом, датой и порядковым номером.

Например:

• bg-targroup-01
• element-targroup-01
• icon-targroup-01

Главное — выбрать единую систему и придерживаться её во всей нарезке.

При большом количестве экспортированных файлов вручную переименовывать каждый неудобно.

В уроке для этого используется Total Commander с функцией группового переименования. Она позволяет одновременно задать общую часть имени и автоматически добавить порядковый номер.

Так можно быстро привести к одной системе фоны, элементы, иконки и другие группы файлов.

После переименования стоит выборочно проверить пары PNG и SVG, чтобы убедиться, что одинаковые номера действительно относятся к одному элементу.

Перед передачей нужно посмотреть на проект глазами человека, который видит его впервые.

Верстальщик должен без дополнительных догадок понимать:

• где находится актуальный дизайн;
• какие состояния есть у интерфейсных элементов;
• какие изображения относятся к слайдерам;
• где лежит нарезка;
• какие шрифты используются;
• какие элементы повторяются;
• какие графические файлы относятся к конкретным блокам.

Чем аккуратнее подготовлен макет и структура файлов, тем меньше уточнений возникнет во время вёрстки и тем точнее итоговый сайт будет соответствовать дизайну.

Перейти к следующему уроку