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

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

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

Для заказчика аккуратная Figma — это источник актуальной информации по продукту. Для исполнителя — способ быстро онбордить новых участников и без потерь передавать работу дальше (аналитикам, разработчикам, тестировщикам). Любое решение в макете становится не «личной договоренностью в чате», а зафиксированным артефактом.

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

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

•

Solaris — PT (имя проекта + PT) — прототип;

•

Solaris — DZN (имя проекта + DZN) — дизайн;

•

Solaris — site (имя проекта + site) — готовые страницы сайта.

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

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

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

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

Статус макетов в Figma отмечается в названии страницы с помощью эмодзи. Это помогает команде синхронизироваться в работе по проекту. На иллюстрации выше зелеными галочками отмечены макеты, готовые к передаче на верстку: десктоп согласован, адаптивы нарисованы, ТЗ на верстку подготовлено.

Карина Твердохлеб

дизайнер в Uplab

Легенда к эмодзи-статусам содержится на странице info.

Большие проекты содержат разные типы страниц: помимо самих макетов и стайл гайда (Style Guide) там есть обложка, информация о проекте, структура, презентация для клиента и так далее. Чтобы сделать навигацию в файле удобнее, используйте разделители между группами страниц.

Чтобы создать разделитель, нужно выделить страницу, после которой планируется вставить разделитель, нажать кнопку создания новой страницы и в поле с ее названием ввести любое количество дефисов. Появится тонкая линия-разделитель в списке страниц. Чтобы удалить разделитель, кликните по нему правой кнопкой мыши и выберите пункт «Удалить».

Карина Твердохлеб

дизайнер в Uplab

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

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

На нейминг, или названия фреймов, не все обращают внимание. А он тоже важен. При создании сложных компонентов с вложенными компонентами и несколькими уровнями Auto Layout понятные имена фреймов облегчат работу не только другим дизайнерам, которые будут работать на этом проекте, но и самому дизайнеру когда он откроет этот файл через полгода. Без имен фреймов, намекающих на их содержимое, разобраться во вложенных автолейаутах будет сложнее.

Так в Figma называется инструмент для управления макетами на одной странице.
Иногда макеты на одной странице в Фигме нужно сгруппировать. Например, если есть одна страница в разных локализациях. Или дизайнеры внесли правки в существующую страницу и отправили новую версию на ревью, не отправляя старую в архив. В этом случае и пригодится инструмент Section. Он создает область на странице, которая может содержать фреймы, сама не являясь при этом фреймом.

Секции в рабочей области Figma визуально выглядят как прямоугольники с тонкой рамкой, обозначенные Section 1, Section 2 и так далее. На каждую секцию можно дать ссылку, я чаще всего пользуюсь этим при отправке макетов на ревью.

Карина Твердохлеб

дизайнер в Uplab

Главное правило Figma: если в проекте есть повторяющиеся блоки, обязательно используйте опцию Style guide. И больше никаких произвольных или выставленных на глаз значений — в проекте используются только стили из Style Guide.

Style Guide в Figma — это единый источник визуальных правил проекта. В нём собраны стили (Color, Text, Effects, Grid), базовые токены и примеры их применения. Это фундамент дизайн-системы: компоненты, макеты и прототипы опираются на одинаковые цвета, шрифты, отступы и эффекты, а не на значения, выставленные для каждого элемента вручную.

Что обязательно включить в Style Guide:

• палитру с ролями (Primary/Secondary/Success/Warning/Error) и степенями (100−900);
• типографику (иерархия заголовков, текст, ссылки, интерлиньяж, трекинг);
• базовую модульную сетку и правила отступов (например, шаг 4/8 px);
• эффекты (тени, блюры), состояния (hover/focus/disabled), иконки и иллюстрации;
• требования по доступности (контраст, минимальные размеры интерактивов).

Как это работает в Figma:

• вы создаёте отдельный файл/страницу 00_Style Guide и задаёте локальные стили: палитру, типографику, тени/блюры, сетки;
• публикуете файл как библиотеку (Library) — команда подключает её в проектах через Assets, и стили становятся доступными всем;
• любое обновление стиля раскатывается на все экраны, где он применён, с контролем через версионирование и описание изменений;
• для сложных проектов добавляются переменные (Variables) и темы (например, Light/Dark, бренды A/B), чтобы менять наборы значений без ручной правки.

Зачем это заказчику и исполнителю:

• Единообразие: все экраны выглядят консистентно, соответствуют брендбуку без «рассинхрона».
• Скорость: дизайнеры и разработчики быстрее верстают и вносят правки, так как это можно сделать один раз в палитре стилей, а не в каждом макете.
• Контроль качества: проще проверять соответствие гайдлайнам, контрастность, состояния элементов.
• Прозрачность для разработки: в Dev Mode и Inspect разработчик видит точные параметры стилей.

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

Кнопки

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

•

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

•

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

•

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

•

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

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-канал.