Figma – основной инструмент дизайнера и «прослойка между дизайном и разработкой».

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

• В Dev Mode можно выбрать элемент и просмотреть его параметры: свойства layout; отступы, включая padding и margin; стили и другие характеристики; код для разных платформ и языков, в том числе CSS, iOS и Android.
• Принцип проектирования: понимать, какие свойства задаются элементу в Figma и как они будут интерпретированы в коде.
• Основной режим повседневной работы – Design Mode. Набор доступных режимов и функций зависит от подписки.

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

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

Фреймы
– Фрейм – основная конструкция для сборки интерфейса
– Экран, кнопки, панели и другие части макета можно представлять отдельными фреймами
– Интерфейс строится как вложенная структура: фрейм внутри фрейма, вплоть до отдельных компонентов и иконок
– В отличие от группы, фрейм позволяет задавать больше параметров и использовать Auto Layout

Группы
– Группы подходят для объединения графических объектов в ограниченных случаях, например для небольших графических элементов
– Для интерфейсов предпочтительнее фреймы: группы предоставляют меньше информации и контроля для разработки – например, в них нельзя так же гибко настроить поведение вложенных объектов при изменении размера
– Короткая команда для группировки – Command+G

Для построения интерфейсов и простой графики используются:
- прямоугольники;
- эллипсы;
- линии и стрелки;
- полигоны и звёзды.

Многие интерфейсные элементы можно свести к прямоугольникам и цветовым областям. У отдельных фигур есть собственные параметры. Например, у стрелок настраиваются наконечники; у эллипса можно задавать дугу; у полигона – число углов; у звезды – число лучей, их глубину и скругление.
Изображения также можно добавлять в макет и корректировать встроенными средствами Figma: менять контраст и экспозицию, а также способ размещения в слое.

Fit показывает изображение целиком. Fill заполняет изображением заданную область. Tile повторяет изображение как паттерн.

Boolean-операции позволяют получать сложные формы из простых фигур:
– Subtract вырезает одну фигуру из другой;
– Intersect оставляет только область пересечения;
– Exclude исключает область пересечения;
– Union объединяет фигуры.

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

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

– Для финального графического ассета используются Outline Stroke (преобразует обводку в замкнутую форму) и Flatten (превращает составную структуру в векторную фигуру).

Для слоёв доступны эффекты, в том числе:
– внешняя и внутренняя тень;
– свечение;
– размытие слоя;
– размытие фона за объектом;
– текстуры и шумы.

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

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

Возможные варианты поведения Constraints:
– привязка к верхнему и левому краям;
– привязка к противоположным краям;
– центрирование;
– привязка к правому и нижнему краям;
– пропорциональное масштабирование (Scale);
– растягивание объекта по нескольким сторонам.

По умолчанию новые объекты привязаны к левому верхнему краю. Если требуется другое поведение, его нужно настроить в параметрах Сonstraints.

Auto Layout
Управляет расположением и поведением элементов при изменении размеров контейнера. Он помогает настраивать адаптивность интерфейса и автоматическое перераспределение элементов.
В Auto Layout можно задавать:
– направление расположения – строка или колонка;
– расстояние между элементами (gap);
– внутренние отступы (padding);
– поведение элементов при нехватке места и изменении ширины;
– в отдельных случаях – отрицательный gap, чтобы элементы перекрывались.
В отличие от обычного фрейма без Auto Layout, элементы внутри контейнера могут автоматически перестраиваться при изменении его размеров.

Вложенная структура интерфейса
Интерфейс можно собирать как вложенную систему:
1. отдельная иконка;
2. кнопка с иконкой;
3. панель из нескольких кнопок;
4. экран приложения.
Например, Tab Bar или Navigation Bar может состоять из фрейма панели, фреймов отдельных табов и вложенных иконок. Такой подход упрощает управление отступами, делает адаптацию элементов более удобной.

Принципы построения
– Иконки можно собирать из прямоугольников, эллипсов, линий и Boolean-операций.
– Для контурных элементов применяются обводки;
– Перед финальной передачей их следует преобразовать в формы с помощью Outline Stroke;
– Для корректной векторной структуры используется Flatten;
– При редактировании формы инструментом Pen можно добавлять и удалять точки;
– Для точного построения полезно соблюдать выравнивание и проверять радиусы углов;
– Для иконок, состоящих из нескольких частей, важно аккуратно объединить или вычесть формы и проверить результат при увеличении.
Финальную иконку рекомендуется помещать в отдельный фрейм фиксированного размера. В примере использовались размеры 24×24 px и 32×32 px. Иконку иногда нужно немного сместить относительно геометрического центра: так учитывается визуальная компенсация, чтобы она воспринималась центрированной.

Подготовка к экспорту (чек-лист):
1. Для линий выполнить Outline Stroke, чтобы линия стала замкнутым векторным объектом;
2. Выполнить Flatten, чтобы упростить итоговую форму;
3. Проверить ограничения размеров (constraints); для иконки установить центр, чтобы случайно изменённый размер родительского фрейма не растягивал её;
4. Включить экспорт и задать осмысленное имя;
5. Если фон не должен экспортироваться, отключить его заливку и проверить прозрачность областей.
Экспортируемый формат – SVG. Также объекты и фреймы можно копировать между Figma-файлами.

Компонент помогает хранить графический элемент как целостную сущность – например, иконку.
– Компоненты могут быть вложены друг в друга и сочетаться с Auto Layout.
– Для навигации в мобильных интерфейсах используются: Tab Bar в iOS и Navigation Bar в Android.
– В примере компонента панели можно выбирать количество элементов: 3, 4 или 5, а также состояние выбранной кнопки и иконки.

У таба могут быть разные состояния: выбранное и невыбранное (для них могут использоваться разные варианты иконки).
Прототип в Figma позволяет связать экраны переходами. Для простейшего прототипа достаточно настроить действие: при нажатии на кнопку показывать следующий экран. Экраны можно обозначить простыми фигурами: на этом этапе важен сам переход и смена содержимого, а не детальная визуальная проработка.

Использование ИИ
К Figma-файлу можно подключать модели через MCP (например, ChatGPT и Claude). ИИ может помочь читать файл и извлекать из него информацию, например, собирать ссылки в список вида «название – ссылка». Результат нужно проверять: модель может пропустить часть ссылок.

NB! Генерация законченного качественного дизайна пока ненадёжна: результат может содержать повторы заголовков, дублирующиеся сущности и другие проблемы информационной архитектуры. Сгенерированные компоненты и компоновки можно рассматривать как черновую основу, но не как готовый дизайн.