– Если иконка расположена на белом холсте внутри фрейма, фон может экспортироваться вместе с ней.
– Если белый фон задаётся заливкой самого фрейма, нужно отключить у этой заливки параметр Show in exports: тогда в предпросмотре станет видна прозрачность. Если параметра Show in exports нет, следует проверить структуру слоёв. Возможно, белый фон – это не заливка фрейма, а отдельная белая фигура, например, прямоугольник внизу стека слоёв. В таком случае нужно найти и удалить лишний объект.

Для создания сложной иконки можно собирать форму из нескольких простых фигур и применять к ним булевы операции:
– Union объединяет фигуры в общий результат, но сохраняет исходные объекты и возможность редактировать их по отдельности
– Subtract вычитает одну фигуру из другой
– Intersect оставляет область пересечения
– Exclude исключает область пересечения. Пока иконка создаётся и её форма может измениться, полезно сохранять исходные слои и булевы операции: это оставляет возможность вернуться к составляющим фигурам
– Flatten используют для сведения результата в единую финальную форму – в частности, перед экспортом SVG

После сведения отдельные исходные фигуры перестают редактироваться независимо. Flatten помогает убрать лишние точки и пересекающиеся фрагменты, которые не нужны итоговой форме. В SVG результат представляется как единый контур – path с точками, задающими форму и положение области. Это уменьшает количество ненужных элементов в файле и снижает риск артефактов. Иными словами, Union удобен для дальнейшего редактирования, а Flatten — для финализации формы.

Если координаты фигуры или её размеры заданы дробными числами, например со смещением на 0.3 пикселя, контур может оказаться между пикселями. Тогда линия визуально распределяется между соседними пикселями и выглядит размытой или неровной.

Для проверки следует:
1. Включить Pixel Preview и посмотреть, как контур ложится на сетку;
2. Проверить координаты фигуры по осям X и Y;
3. Проверить ширину и высоту; по возможности убрать дробные значения;
4. Если фигура уже переведена в кривые, проверить расположение отдельных точек. При перерисовке по скриншоту нужно учитывать, что JPEG сам по себе может не совпадать с пиксельной сеткой. Поэтому цель – не воспроизвести изображение «до микропикселя», а построить аккуратный векторный вариант, ориентируясь на пиксельную сетку.

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

Пример последовательности работы с иконками:

1. Построить прямоугольные формы;
2. Настроить скругления;
3. Преобразовать обводки в контуры;
4. Вычесть ненужные области;
5. Объединить готовые части и выполнить Flatten для итогового варианта. При работе с изображением полезно сохранять пропорции при масштабировании и контролировать положение картинки внутри её области. В Figma можно менять режим отображения изображения, например, Fill или Crop; режим влияет на то, как оно будет вести себя при изменении размера. Для равномерного увеличения можно использовать клавиши-модификаторы и настройку сохранения соотношения сторон.

Последовательность действий для настройки эффекта:

1. Начать с круга или скруглённой формы;
2. Преобразовать обводку в контур;
3. Поставить точки в местах начала и конца блика;
4. Удалить лишнюю часть формы и настроить скругления;
5. Использовать эллипс с обводкой, отметить точки с помощью направляющих;
6. Удалить ненужный участок контура и задать закруглённые окончания линии. При подготовке лупы к построению удобно временно выровнять её элементы, чтобы проще было точно совмещать формы. Финальную векторную форму также можно свести в один слой.

Чтобы добавить настройки экспорта, в панели экспорта нажимают плюс. Затем выбирают формат, например SVG. Этот параметр позволяет разработчику скачать подготовленный графический файл из макета. Для одного объекта можно добавить несколько форматов – например, SVG, PNG, JPEG или PDF. Если нужные объекты заранее настроены для экспорта, их можно выгрузить вместе, а не искать по одному в файле.
Экспортировать рекомендуется чистую, проверенную и финализированную форму.

Название нижней панели навигации различается в платформенных руководствах: в IOS она называется Tab Bar, а в Android – Navigation Bar.

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

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

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

Пример сборки таба из иконки:

1. Помещаем иконку во фрейм 32 × 32;
2. Превращаем в компонент и затем используем внутри фрейма таба с автолейаутом;
3. Для таба задаем размеры 74 × 60 и внутренние отступы: 21 пиксель слева и справа, 14 пикселей сверху и снизу. Иконка остается по центру и не меняет собственного размера при изменении размеров внешнего элемента. У таба могут быть состояния Default и Selected. Выбранное состояние отличается серой подложкой и другой иконкой. Несколько табов размещаются в ряд, соблюдаются общие правила компонента.

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

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

В одном из примеров для блока (из лекции) задаются отступы по 60 пикселей от краёв. При увеличении ширины в строку помещалось больше фигур; крупный объект влиял на размеры блока и на то, от какого объекта отсчитываются внутренние отступы. Расстояние между фигурами в лекционном примере равно 0. Перед включением автолейаута рекомендуется сначала расположить элементы и определить желаемые расстояния между ними. Затем можно задать правила автолейаута. В более сложной структуре несколько автолейаутов могут быть вложены друг в друга. При адаптации карточек Fiverr для планшетного макета число карточек в ряду менялось с четырёх до трёх, а сами карточки становились меньше. Автолейаут позволяет задать соответствующие правила изменения расположения и размеров.

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

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

Чтобы выделение плавно перемещалось между вкладками, в демонстрационном примере использовался отдельный прямоугольник-индикатор, который менял положение. Для состояний Tab Bar создавались варианты с выбранными вкладками и настраивались переходы между ними.

Индикатор сохранял одинаковое имя во всех вариантах; также для него отключалось влияние автолейаута с помощью настройки Ignore Auto Layout, чтобы он оставался в нужной позиции. В каждой версии панели задавался переход к состоянию, соответствующему нажатой вкладке. Это позволяет переходить к нужному варианту из разных состояний панели.
Такой способ предназначен для более сложной анимации; обычное поведение подобных панелей, по словам лектора, часто уже обеспечивается системой или платформой.

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

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

Для работы с композицией важно учитывать:
– Размер — помогает определить важность элемента и порядок чтения;
– Близость — показывает, какие объекты связаны и образуют группы;
– Роль элемента — например, главная, второстепенная, интерактивная или предупреждающая. Она связана с тем, что элемент делает и какую ценность имеет для пользователя и бизнеса.
Композиция интерфейса также опирается на типографику, размеры, цвет и интервалы.

Условно композицию можно свести к двум составляющим: визуальным пятнам и пространству вокруг них.

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

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

Элементы воспринимаются как группа, когда у них совпадают визуальные свойства и закономерности размещения: размеры, форма, типографика и интервалы.

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

Свободное пространство – не пустое место, которое обязательно нужно заполнить, а средство управления вниманием и группировкой. Оно помогает отделять блоки друг от друга и усиливает визуальный вес элементов.
Сочетание пространства и расположения объектов может создавать ощущение равновесия или, наоборот, дисбаланса и движения.

– Revolut Business: центральное расположение небольшого элемента и заголовка на фоне свободного пространства выделяет основное сообщение; кнопка призывает включить уведомления;
– Slack: изображение и заголовок формируют основную часть экрана онбординга, а кнопка завершает сценарий;
– Airbnb: карточки и фильтры показывают группировку повторяющихся элементов; на экране выбора типа жилья крупное изображение может занимать почти всё пространство, усиливая акцент на выборе. Карта поиска воспринимается как область, которую можно продолжать прокручивать; предложения отображаются в виде ценовых маркеров.
– Fiverr: повторяющиеся карточки услуг демонстрируют, как одинаковая композиционная схема помогает быстро считывать список. Композиция может использовать и традиционные приёмы, например правило третей, которое в лекции демонстрируется на примерах кадров манги.

Для интерфейсов особенно важны конкретные свойства элементов: положение, размер, расстояния и роль.

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

Уровни текстовой иерархии:
– Primary – основной акцент;
– Secondary — дополнительная информация;
– Tertiary – менее приоритетный текст.
Эти уровни помогают организовать чтение от главного к второстепенному.

Лекционный пример (Манга): размер букв, их начертание и интервалы способны создавать впечатление о громкости и эмоциональном состоянии персонажа. Более крупный текст с увеличенными расстояниями между буквами может восприниматься как энергичный или громкий; жирное начертание – как более сильное или напряжённое.

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

Если два объекта имеют одинаковый вес, внимание может переключаться между ними. Чтобы избежать такого соперничества, основной элемент следует выделять размером, контрастом или расположением, а второстепенный — делать менее заметным.

Примеры кнопок:
– В Revolut действие создания аккаунта выделяется как приоритетное, а вход в существующий аккаунт оформляется второстепенно;
– В Slack основное действие представлено кнопкой, а дополнительное действие – ссылкой. Подчёркивание помогает распознать текст как интерактивный;
– В Airbnb контрастная кнопка показа доступных вариантов служит основным действием: прокручиваемое содержимое и фильтры формируют остальную иерархию.

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

– Курс Figma Design for Beginners;
– Туториалы Figma по прототипированию;
– Разделы о навигации по дизайн-файлам и добавлении слоёв во фреймы;
– Документация и библиотеки компонентов для iOS и Android.