Хабрахабр

Правила подготовки макетов в Figma

Боль с одним проектом привела нас к решению написать правила работы

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

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

Используй сетку 1.

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

Хорошая статья про сетки.

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

Или хотя бы стремиться к этому. Текстовые фреймы, иконки, менюхи, попапы, дропдауны, контролы вот это всё всё всё должно быть кратно модулям сетки.

Вот что говорят ребята из отдела разработки по поводу сеток:

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

Задавай текстовым блокам осознанные размеры 2.

Описание и цена. Вот два с виду одинаковых текстовых блока. Но если посмотреть как они выглядят в макете — сразу видна разница.

Виталий, разработчик:

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

Следи за боковыми отступами 3.

Разница должна быть чем-то обоснована, не должно получаться случайных значений.

Виталий, разработчик:

Если отступы в блоке одинаковы — свойство, задающее отступ в родительском блоке, имеет вид padding: 0, 24.

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

Используй Grow Vertically для текстовых блоков 4.

Виталий, разработчик:

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

Соблюдай целые значения в пикселях 5.

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

Часто дробные значения возникают, если взять группу объектов и масштабировать ее. Внешне, макеты с дробными значениями не всегда отличимы от «нормальных», но стоит погрузиться в них… и начинаются проблемы. Очень часто такие значения свидетельствуют о том, что дизайнер поторопился и не проверил этот момент.

Виталий, разработчик:

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

Используй компоненты 6.

Создавай компоненты по любой понятной и удобной тебе методике. Идеология компонентов — главное, что отличает Figma от инструментов предыдущего поколения. Например, концепция атомов, при которой начиная с простейших элементов (формы, надписи) постепенно группируются более сложные компоненты на их основе.

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

С описанием работы constraints и сеток внутри компонентов. Компонентам и их использованию посвящены отдельные статьи.

Называй группы и фреймы осмысленно 7.

Понятные названия помогут другим разобраться в твоем макете и не вспоминать тебя “теплыми” словами.

Виталий, разработчик:

А вы, дизайнеры, чем лучше? Среди разработчиков есть культура написания имен переменных и функций. Подписывайте ясно и четко названия фреймов и компонентов. Почему вы с легкостью отдаете макеты с неинформативными названиями?

Делай растр с двукратным или трехкратным запасом по размеру. 8.

Что это означает для дизайнера? Существует много мониторов с увеличенной плотностью пикселей.

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

Виталий, разработчик:

В общем жили не тужили. Помню как в 2000-м году выходил в интернет через старый добрый US Robotics Courier на скорости 14 400 бит/с… Тогда графику делали 1в1, сайты верстали таблицами, не было ретин и прочих смартфонов. При этом не грузить их всем остальным. Сейчас CSS псевдо классы позволяют ребятам с ретиной и прочими hi-end дисплеями подгружать специально для них предназначенные растровые изображения.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть