Как кадрировать в фигме

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

Что такое кадрирование в Figma и зачем оно нужно

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

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

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

Frame и Mask: в чём разница и когда что использовать

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

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

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

Когда использовать Frame

• При создании карточек, слайдеров, плиток — где нужна строгая сетка.
• Для адаптивного дизайна, когда контент должен подстраиваться под разные размеры.
• Если вы планируете часто перестраивать макет — Frame легко масштабируется.
• При работе с текстом, который может изменяться — Frame сохраняет читаемость.

Когда использовать Mask

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

Пошаговое кадрирование через Frame и Mask

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

Кадрирование через Frame

1. Выделите изображение, которое нужно обрезать.
2. Нажмите F, чтобы создать новый Frame, или перетащите изображение внутрь существующего Frame.
3. Измените размер Frame так, чтобы он соответствовал нужной области обрезки.
4. Убедитесь, что в правой панели в разделе «Design» стоит режим «Clipping» (по умолчанию активен).
5. Перемещайте изображение внутри Frame — всё, что выходит за границы, будет скрыто.

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

Кадрирование через Mask

1. Добавьте изображение на холст.
2. Создайте фигуру (например, круг) поверх изображения — она будет маской.
3. Выделите оба слоя: сначала изображение, затем фигуру (порядок важен).
4. Нажмите Ctrl + Alt + M (Windows) или Cmd + Option + M (Mac), или выберите в меню: Layer → Mask → Create.
5. Изображение примет форму верхней фигуры. Теперь его можно двигать, но нельзя выйти за пределы маски без её изменения.

Чтобы отредактировать маску, дважды щёлкните по ней. Чтобы отключить — выберите слой и нажмите Ctrl + Shift + M.

Продвинутые техники кадрирования

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

Адаптивное кадрирование с Constraints

Constraints — это правила привязки элементов внутри Frame. Они позволяют изображению вести себя предсказуемо при изменении размеров контейнера. Например, можно зафиксировать изображение по центру, растянуть его на всю ширину или привязать к одной из сторон.

• Выберите изображение внутри Frame.
• В правой панели установите Constraints: «Center», «Left & Right», «Top & Bottom» и т.д.
• Измените размер Frame — изображение будет вести себя согласно выбранным правилам.

Это мощный инструмент при создании responsive-макетов, особенно если вы используете Auto Layout.

Кадрирование в компонентах

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

Маски с прозрачностью и градиентами

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

• Создайте градиентную заливку (линейную или радиальную).
• Примените её к фигуре, которая будет маской.
• Создайте маску как обычно — изображение будет плавно исчезать по краям.

Обратите внимание: такой эффект не всегда корректно экспортируется. Проверяйте результат в Preview.

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

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

Ошибка 1: Физическое удаление вместо маскирования

Некоторые дизайнеры просто обрезают изображение, удаляя лишние части. Это критическая ошибка — теряется возможность редактировать композицию. Всегда используйте Frame или Mask, чтобы сохранить исходный контент.

Ошибка 2: Неправильный порядок слоёв при создании маски

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

Ошибка 3: Игнорирование Constraints

Без Constraints изображение внутри Frame может вести себя непредсказуемо при изменении размеров. Это особенно заметно в прототипах с переменной шириной.

Ошибка 4: Экспорт маскированных элементов без проверки

Иногда при экспорте маскированных слоёв появляются артефакты — белые края, обрезанные тени. Всегда используйте Preview перед экспортом.

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

Михаил отмечает, что в 70% случаев команды используют Frame, потому что он проще и стабильнее. Но Mask — это инструмент для брендовых проектов, где важна уникальность. Он рекомендует новичкам начинать с Frame, а затем осваивать Mask на примерах реальных задач: аватарки, иконки, сложные баннеры.

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

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

Заключение

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

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