Как сделать обрезку в фигме

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

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

Хотя Figma не имеет прямой команды «обрезать», как в графических редакторах типа Photoshop, она использует концепцию контейнеров с маскированием. Это означает, что обрезка — это не изменение самого объекта, а ограничение его видимости в рамках родительского фрейма. Такой подход даёт большую гибкость: вы можете в любой момент отредактировать исходное изображение, переместить его внутри маски или изменить форму обрезки. Особенно это важно при работе с компонентами и вариантами, где один и тот же элемент должен отображаться по-разному в разных контекстах.

Как использовать фрейм-маску для обрезки

Фрейм-маска — самый простой и часто используемый способ обрезки в Figma. Он подходит для 90% задач, где нужно ограничить видимость изображения, текста или группы объектов по прямоугольной области. Чтобы применить фрейм-маску, необходимо поместить объект внутрь фрейма и включить опцию маскирования.

Для этого:

1. Создайте фрейм нужного размера с помощью инструмента Frame (F).
2. Поместите внутрь него изображение, фигуру или группу объектов.
3. Выделите фрейм и в правой панели свойств найдите параметр «Mask». Включите его, нажав на значок глаза или переключатель рядом.

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

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

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

Пошаговый пример: обрезка изображения в карточке товара

Представьте, что вы проектируете карточку товара с изображением, которое должно занимать верхнюю часть блока строго 300×200 пикселей.

1. Создайте фрейм размером 300×200 px.
2. Загрузите изображение товара и поместите его внутрь фрейма.
3. Активируйте маску в правой панели (значок глаза в разделе фрейма).
4. Переместите изображение внутри фрейма, чтобы нужная часть была видна.
5. При необходимости зафиксируйте положение с помощью привязки или координат.

Теперь, даже если изображение больше, оно будет отображаться только в рамках заданного размера. Этот метод отлично работает при A/B-тестировании разных композиций — достаточно заменить изображение, и маска сохранит обрезку.

Векторная маска: когда нужна нестандартная форма

Фрейм-маска ограничена прямоугольными формами, даже если у фрейма есть скругления. Но что, если вам нужно обрезать объект по сложному контуру — например, по форме сердца, звезды или произвольной кривой? Для таких случаев Figma поддерживает векторные маски.

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

Чтобы создать векторную маску:

1. Нарисуйте векторную фигуру той формы, по которой вы хотите обрезать (например, эллипс, многоугольник или кривая Безье).
2. Поместите поверх неё объект, который нужно обрезать (изображение, текст, группа).
3. Выделите оба объекта: сначала верхний (который будет маской), затем нижний (целевой объект).
4. Щёлкните правой кнопкой мыши и выберите «Use as Mask» (Использовать как маску).

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

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

Когда использовать векторную маску вместо фрейма?

Распространённые ошибки при обрезке и как их исправить

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

• Маска не применяется. Убедитесь, что объект находится внутри фрейма. Если вы используете векторную маску, проверьте порядок слоёв: маска должна быть выше целевого объекта.
• Изображение не двигается внутри маски. Возможно, вы случайно зафиксировали его положение. Дважды щёлкните по фрейму, чтобы войти в него, и проверьте, активен ли инструмент перемещения.
• Маска обрезает не так, как ожидалось. Проверьте размеры фрейма и положение объекта. Иногда проблема в пропорциях изображения — попробуйте изменить масштаб или использовать опцию «Fill container».
• После экспорта обрезка не сохраняется. Экспорт в Figma учитывает маски по умолчанию. Убедитесь, что вы экспортируете именно фрейм с маской, а не отдельный слой.

Ещё одна типичная ошибка — попытка использовать группу как маску. Группы в Figma не могут быть масками. Только фреймы и векторные объекты.

Как избежать проблем при совместной работе

При работе в команде важно чётко обозначать, где используются маски. Добавляйте комментарии или используйте имена слоёв вроде «[MASK] Аватар» или «Фрейм с маской». Это помогает коллегам быстрее понять структуру.

Продвинутые техники: обрезка в компонентах и при анимации

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

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

Также можно использовать обрезку в сочетании с вариантами компонентов. Например, создать компонент «Прогресс-бар», где заполненная часть — это вектор, обрезанный по маске. Меняя ширину внутреннего объекта, вы управляете отображаемым прогрессом.

Обрезка и автолейаут

Когда фрейм с маской находится внутри автолейаута, важно понимать, как он себя ведёт. Маска не влияет на размер фрейма — он остаётся фиксированным. Однако, если вы используете опции вроде «Fill container» для изображения, оно будет масштабироваться, сохраняя пропорции, что полезно для адаптивных макетов.

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

• Марина Козлова, главный дизайнер в ProductLab: «Я всегда начинаю с фрейм-масок. Они быстрые, предсказуемые и хорошо работают в системах дизайна. Векторные маски — уже уровень продвинутый, когда нужен художественный акцент.»
• Алексей Волков, Figma-коуч: «Главная ошибка — забывать, что маска не удаляет данные. Новички боятся “потерять” изображение, но на самом деле оно всегда доступно для редактирования. Это одно из главных преимуществ Figma перед другими инструментами.»

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

Заключение

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

• Фрейм-маска — основной способ обрезки, работает по прямоугольной области.
• Векторная маска нужна для нестандартных форм и художественных эффектов.
• Маски не удаляют объекты — они только скрывают части вне области.
• При работе с компонентами и прототипами маски сохраняют свою функциональность.
• Избегайте распространённых ошибок: проверяйте вложенность слоёв и порядок объектов.