Многие начинающие дизайнеры ошибочно думают, что их работа заканчивается на передаче макета разработчикам. Это и правда так, если учесть один важный момент: макет не должен быть «сырым» для разработчика. Поэтому Логомашина составила для вас поэтапный чек-лист подготовки макета к вёрстке!
Зачем это делать?
Подготовленный макет значительно упростит работу разработчикам и сэкономит время всей команды, которая работает над проектом.
Благодаря понятному макету разработчики смогут сохранить высокое качество конечного дизайна.
Этот чек-лист — та самая палочка-выручалочка для начинающих дизайнеров, которая поможет избежать конфликта с разработчиками, сэкономить всем время и передать макет без лишних вопросов.
Поехали!
Наведи порядок в слоях и артбордах
Удали все неиспользуемые слои и артборды, в которых нет никакой польз для макета. Оставшиеся обязательно сгруппируй по темам, дай им содержательные названия и сними с них блокировку. Это значительно упростит работу разработчикам.
А чтобы упростить работу себе, установи плагин Clean Document в Figma, который поможет навести порядок и всё отсортировать: удалить скрытые слои, разгруппировать, упорядочить.
Проверь размеры элементов и отступы между ними
Не допускай дробных значений, иначе у разработчика возникнет вопрос: отступ 17,51 пикселя —это 17 или 18? Также отслеживай значения пикселей при выравнивании элементов по центру относительно друг друга, иначе снова возникнут дробные значения.
Для работы с целыми пикселями включи функцию Snap to Pixel Grid в меню Preferences, а чтобы быстро избавиться от дробных значений в размерах и координатах, нажми на подпись слева от них.
Покажи несколько вариантов одного элемента
Текст может содержать как 2, так и 22 слова. Прорисуй оба варианта контента, чтобы разработчик мог предусмотреть возможные ограничения по уровням фреймов, количеству знаков и местам иконок.
Правильно задай размеры текстовых фреймов
Обязательно следи за расстоянием между текстовыми слоями, чтобы они лаконично дополняли друг друга и выглядели одним целым, а не отдельными островами. Чтобы точно измерить расстояние между ними, выберите один из этих объектов и зажми Alt. Не делай рамки текстов пересекающимися, чтобы отступ был очевидным.
Функция Auto Height поможет подогнать вертикальное расстояние между текстовыми фреймами, а функция Auto Width — горизонтальные.
Оставляй заметки для разработчиков
Как бы хорошо ни выглядел макет, перед отправкой оцени его свежим взглядом. Где разработчик может застрять? Что ему нужно знать, чтобы продолжить работать в том же темпе без лишних отвлечений? Напиши плашки с комментариями возле артбордов и сделай их технического цвета, который не используется в твоем дизайне. Так разработчик быстрее заметит комментарии и поймет задумку.
Собери UI Kit
UI Kit — хранилище всех элементов (кнопок, иконок, всплывающих подсказок, ползунков и т. д.), которые использовались в макете. С ним обязательно будут сверяться разработчики на следующих этапах, а тебе это поможет быстро и качественно создавать последующие страницы макета.
Собери все используемые элементы на отдельной странице и прорисуй для каждого этапы состояний: обычное, при наведении, при нажатии, при ошибке и т.д. Здесь же укажи цвета и шрифты, которые Используешь в макете
Посмотри примеры других проектов в Figma Community.
Покажи анимацию отдельно
Согласись, визуально воспринимать информацию намного проще, чем расшифровывать целый текст с описанием. Поэтому анимированный прототип и покажи его разработчику, чтобы он смог правильно воплотить твою задумку.
Несложную анимацию можно сделать прямо в Figma, а более сложную анимацию придется подготовить в специальных программах — Principle, Jitter, ProtoPie. Если ресурсов на подготовку анимации нет, просто покажи референсы с Веhаnсе или Dribbble.
Используй sRGB модель
Чтобы цвета при верстке не поломались и никак не отличались в браузере, используй функцию Color Space → sRGB в Figma.
Приложи шрифты и иконки к макету
Собери вместе все шрифты, картинки и иконки, которые используются в макете. Лучше всего это делать в процессе работы, чтобы не тратить время потом. Отправь разработчикам папку с собранными файлами вместе с макетом. Не забудь аутлайнить иконки — перевести в кривые.
Если используешь шрифт с Google Fonts, то обязательно прикрепи разработчику ссылку на него. В этом случае шрифт на сайт подключают через этот сервис, а не через файл.
Подготовь варианты макетов для разных экранов
Один и тот же дизайн на каждом устройстве смотрится по-разному. Его нужно адаптировать под разрешение конкретного устройства, чтобы какие-то части не поплыли в сторону или не пропали полностью с экрана. Достаточно сделать 3-4 варианта, а остальное выполнить через привязку.
Для этого используй функцию Constraints a Figma.
Презентуй свою работу
Созвонись с командой, включи демонстрацию экрана и расшарь Figma.
Обязательно проведи презентацию макета до окончания работ по дизайну — возможно, ты придумал фичу, которую сложно, долго или вообще невозможно реализовать. Тогда после созвона ты сможешь придумать другое решение. Также позволь разработчикам задавать вопросы — их свежий взгляд поможет найти косяки в работе и улучшить дизайн в целом.
Помни, что требования к макетам зависят от компании, поэтому важно еще на этапе брифинга обсудить все важные вопросы, из-за которых может застопориться работа. А этот чек-лист — те самые универсальные рекомендации, которые пригодятся всегда, так что обязательно сохраняй его на свой рабочий стол и пользуйся с удовольствием.
Хочешь узнать больше о дизайне?
Чтобы прокачивать знания, навыки, развивать круг профессионального общения, быстро осваивать тренды и лайфхаки в дизайне, приглашаем в Логомашину.
Мы регулярно проводим бесплатные мероприятия, где ты можешь попробовать разные направления в дизайне, сделать первые крутые кейсы и даже найти заказчиков. Тыкай по ссылке, чтобы посмотреть ближайшие интенсивы!