Как в фигме в круг вставить картинку

Вставить изображение в круг в Figma — стандартная задача при создании аватарок, иконок, карточек продуктов или элементов интерфейса. Это достигается за счёт маскирования: вы помещаете картинку внутрь круглого векторного объекта, который становится маской, скрывая всё, что выходит за его границы. Главное — правильно организовать слои и использовать функцию «Create Mask».

Основные принципы маскирования в Figma

Figma не позволяет напрямую «вставить» изображение в фигуру, как это можно сделать в графических редакторах вроде Photoshop. Вместо этого используется система масок — мощный инструмент, позволяющий скрывать части слоёв по заданной форме. Маска может быть любой: прямоугольник, круг, кривая Безье или даже текст. При этом сама маска не отображается — она лишь определяет, какие части нижележащего контента будут видны.

Для вставки картинки в круг маска создаётся из эллипса. Когда вы применяете маску, Figma делает так, чтобы только та часть изображения, которая находится внутри формы маски, была видимой. Всё остальное — обрезается. Это особенно полезно при проектировании пользовательских интерфейсов, где требуется единообразие форматирования аватаров, миниатюр или кнопок.

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

Пошаговая инструкция: как вставить картинку в круг

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

1. Откройте Figma и создайте новый файл или откройте существующий проект.
2. Выберите инструмент Ellipse (E) на панели слева и нарисуйте круг нужного размера. Удерживайте Shift, чтобы получить идеальный круг, а не овал.
3. Вставьте изображение: перетащите его из проводника (Windows/Mac) в рабочую область или используйте команду File → Place Image (Ctrl+K).
4. Разместите изображение так, чтобы оно покрывало круговой объект. Оно должно быть выше по стеку слоёв.
5. Выделите одновременно и круг, и изображение (удерживайте Shift или Shift+Cmd/Ctrl).
6. Нажмите комбинацию клавиш Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac), либо щёлкните правой кнопкой мыши и выберите «Create Mask».
7. Готово: изображение теперь отображается только внутри круга.

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

Как изменить маску после применения

Иногда возникает необходимость скорректировать форму маски. Например, вы хотите увеличить круг или превратить его в овал. Это возможно без потери содержимого.

• Выберите слой с маской (он отображается в виде папки в панели слоёв).
• Щёлкните по значку маски (квадрат с точкой) в верхней панели инструментов.
• Измените размер или форму маски с помощью инструмента Selection (V) или Properties Panel.
• Контент внутри маски автоматически адаптируется.

Как временно отключить маску

Если нужно быстро увидеть всё изображение целиком, не разрушая маску, достаточно отключить её:

• Выделите слой с маской.
• На верхней панели найдите кнопку «Mask» и снимите галочку.
• Маска станет неактивной, но сохранится в проекте.
• Повторно включите, когда понадобится.

Варианты работы с масками: продвинутые техники

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

Одна из них — использование альфа-канала как маски. Вы можете создать маску на основе прозрачности изображения. Для этого:

• Добавьте изображение с альфа-каналом (например, PNG с прозрачным фоном).
• Примените маску, выбрав «Alpha as Mask» в контекстном меню.
• Figma использует уровень прозрачности как форму обрезки.

Другой вариант — вложенные маски. Представьте, что у вас есть круглая аватарка с рамкой. Вы можете создать внешнюю маску для круга, а внутри — вторую маску для эффекта свечения или градиента. Для этого:

• Создайте группу с первой маской.
• Добавьте второй слой-форму выше группы.
• Примените маску ко всей группе.

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

Маски и компоненты: повторное использование

Если вы часто используете круглые аватарки, имеет смысл создать компонент. Это ускорит работу и обеспечит единообразие.

1. Создайте один экземпляр круглой маски с изображением.
2. Выделите его и нажмите «Create Component» (Ctrl+Alt+K).
3. Теперь вы можете дублировать этот компонент через Instance.
4. Чтобы заменить изображение, просто перетащите новое в область маски.

Компоненты с масками особенно полезны в дизайн-системах, где аватарки, логотипы или иконки должны быть унифицированы.

Частые ошибки и как их избежать

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

• Маска ниже изображения по стеку слоёв. Figma не позволит создать маску, если фигура находится под изображением. Решение: перетащите маску выше в панели слоёв.
• Забыли удерживать Shift при рисовании круга. В результате получается овал. Чтобы исправить — измените ширину и высоту на одинаковые значения в панели свойств.
• Изображение не заполняет маску. Часто бывает при использовании узких или вертикальных фото. Рекомендуется использовать квадратные изображения или масштабировать их вручную после маскирования.
• Попытка применить маску к нескольким изображениям одновременно. Figma позволяет маскировать только один слой контента за раз. Если нужно — объедините изображения в группу.

Ещё одна распространённая ошибка — случайное удаление маски. Пользователь кликает по кресту рядом с маской в панели слоёв, и маска исчезает. Чтобы восстановить, придётся начинать сначала. Поэтому рекомендуется дублировать слой перед маскированием.

Практические примеры использования

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

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

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

Фотографии в интерфейсе приложения. Например, в медицинском приложении — фото врача; в фуд-сервисе — изображение шефа. Круглая форма добавляет дружелюбия и снижает визуальную нагрузку.

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

Экспертное мнение

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

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

Вопросы и ответы

Заключение

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

• Для вставки изображения в круг используйте комбинацию Ctrl+Alt+M (Cmd+Option+M на Mac).
• Маска всегда должна быть выше по стеку слоёв, чем изображение.
• Вы можете перемещать и масштабировать изображение внутри маски без её разрушения.
• Маски работают с компонентами, анимацией и корректно экспортируются.
• Используйте квадратные изображения для равномерного заполнения круглой маски.