Чистенько, аккуратненько: как эффективно организовать новый проект в Figma

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

В статье мы расскажем, как правильно оформлять проекты в Figma на основе наших внутренних чек-листов и регламентов.

Сайт состоит из множества страниц, а каждая страница из множества компонентов. Какие-то из элементов используются лишь раз, но многие повторяются: иконки, кнопки, цвета и шрифты. Если каждый дизайнер подбирает шрифты и цвета «на глаз», получить красивый слаженный продукт сложно. А если добавить туда еще клиентов и разработчиков, то вообще невозможно.

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

Figma ― главный рабочий инструмент многих дизайн-команд. Поэтому будем рассказывать на примере этого инструмента.

Каждый новый проект создается в отдельной папке. Это база. У папки должно быть понятное название на латинице:

•

Project name — PT, если это прототип;

•

Project name — DZN, если это дизайн.

Разработчики используют в коде латиницу, так что так передавать проекты будет гораздо удобнее.

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

В Figma есть полезные плагины, которые позволяют сделать обложку за пару секунд: Better File Thumbnails и Cover Status.

Затем в проекте создаются нулевые страницы, например, 01_info.

Такая страница есть у каждого проекта. На ней можно найти самую главную информацию по проекту ― ссылку на папку проекта, ТЗ от заказчика, чек-листы для проверки дизайна.

Архив — это история проекта, туда складываем уже не актуальные макеты.

У каждой страницы есть название на латинице с указанием порядкового номера и разрешения. Например: project_index_1440. Версии пронумерованы.

Чтобы комментировать проекты, в Figma есть инструмент «Комментарии». Нужно выделить фрейм и тегнуть исполнителя, чтобы создать комментарий. Закрывает коммент всегда тот, кто его открыл.

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

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

Кнопки

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

•

Нормальное — элемент интерактивен и включен;

•

Фокус — пользователь выделил элемент;

•

Ховер — пользователь поместил курсор на интерактивный элемент;

•

Активное (или нажатое) — пользователь нажал на кнопку.

Figma Variants позволяет добавлять новый вариант, так что они вложены в варианты одного компонента в Figma.

Набор компонентов для кнопки называется button. Внутри кнопки должен быть настроен Auto Layout, а заливка и скругления заданы свойствами фрейма. Цвета и текст задаются стилями.

Меню

Как и для кнопок, если у меню есть разные состояния, их нужно отрисовать и поместить в variants. Например, для меню-гамбургера нужно отрисовать dropdown, или выпадающее меню.

Иконки

Все иконки собраны одним паком. Внутри пака созданы варианты по типу, размеру и другим свойствам.

Иконки должны быть в формате SVG. Каждый вектор вставлен в квадратный фрейм, все фреймы иконок одного вида одинаковы.

Направления иконки, например, стрелки отрисовываются отдельно. Нужно настроить Constraints — Scale по вертикали и горизонтали. Constraints помогают задать «резиновую» ширину/высоту, чтобы при растяжении элементы не деформировались.

У иконок должно быть свойство либо Fill (заливка), либо Stroke (обводка), но не оба одновременно.

Иконки должны попадать в пиксельную сетку.

Поле ввода

Поля ввода расположены в наборе компонентов inputs. Input состоит из поля ввода с названием.

Поле ввода ― отдельный мастер-компонент, в нем настроен Auto Layout с фиксированными отступами до границ. Все input одинаковой длины или пропорциональны и сделаны по сетке. Заливка или скругления задаются свойствами фрейма. Цвета и текст ― стилями. Для каждого поля ввода отрисованы состояния, которые находятся в variants.

Чекбоксы и радиобаттоны

Чекбоксы расположены в соответствующем наборе компонентов. Внутри настроен AutoLayout для самого поля и для галочки. При этом поле для галочки ― отдельный мастер-компонент.

Заливки и скругления, цвета, текст и состояния задаются, как у других элементов.

Дропдауны

Работа с дропдауна похожа на работу с инпутами. Каждый уникальный дропдаун отрисовываем как отдельный компонент.

Хлебные крошки

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

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

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

Стиль состояний

Состояние указывают рядом с компонентом и разрешением на соответствующей странице. Каждое состояние ― это вариант в составе общего мастер-компонента.

Стиль текста

Каждая строчка текста ― это стиль. Для адаптивов создается свой вариант и указывается стиль. Отдельные стили текста создаются, когда разрешение 360. Если разрешение 768, то стили сохраняются с десктопа.

Стиль цвета

Каждый цвет в проекте оформляется как стиль. У каждого цвета свой HEX или RGB код, чтобы при выборе цвета не возникало неточностей. Для конкретных состояний можно добавить пометки, например, error ―красный, но не тот что в логотипе.

Тени, размытие и другие эффекты тоже сохранены стилем. Градиенты сохраняются как стиль. Если у фото есть эффекты, они также отражены в style guide.

Использование сетки

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

Поэтому для каждого проекта создается фиксированная сетка и система отступов: 8, 16, 24, 32 и так далее. Чтобы настраивать отступы, используется Auto Layout.

Сетка должна быть задана с помощью Layout Grid и занесена в стили проекта. Для каждого разрешения свой стиль.

Использование Auto Layout

Все отступы задаются с помощью Auto Layout. Так легко изменить отступы по необходимости в один клик, без необходимости двигать все вручную. А еще сохраняется единообразие.

Отступы в тексте не создаются с помощью Enter. Для подгонки содержимого в контейнере используется Fill Container.

Использование фото

Фото находится во фрейме. Маски применяются только в исключительных случаях. Фото в макете меняется через свойство заливки Fill — Image. Чем меньше слоев, тем легче макет.

При адаптации пропорции фото должны соблюдаться.

Изображения должны быть оптимизированы с помощью ImageOptim или других сервисов. В изображениях отсутствует цветовой профиль.

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

Изображения из края в край хранятся в full hd. Для ретины ― x2.

Использование линий

Линии создаются с помощью инструмента Rectangle, со значениями высоты и ширины не меньше одного пикселя.

Для таблиц, в сетках и отделениях блоков линии расположены в сетке. Если линии повторяются в макете, то она создана компонентом или вставлена в компонент, например, таблицу.

Работа с текстом

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

Кавычки-елочки, знаки копирайта, длинного тире и знака умножения вставляются символами Unicode.

Важно учесть состояния перезаполненности и недозаполненности текстом.

Теперь вы знаете, как оформлять макеты в Figma профессионально. Чтобы не пропустить новые полезные материалы про дизайн, диджитал, разработку и управление проектами, подписывайтесь на наш Telegram-канал.