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

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

Зачем обрезать в Figma: зачем это нужно дизайнеру

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

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

Кроме того, обрезка необходима при создании сложных компонентов, таких как карусели, профили пользователей с круглыми аватарами, кнопки с иконками внутри, или даже текстовые блоки с градиентными фонами. Без масок вы не сможете добиться плавных, профессиональных переходов, которые характерны для современных интерфейсов — от Spotify до Apple.

Как обрезать с помощью масок: пошаговая инструкция

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

1. Создайте или импортируйте объект, который нужно обрезать — например, изображение, текст или фигуру.
2. Нарисуйте форму, по которой вы хотите обрезать: круг, прямоугольник, произвольный путь. Эта форма будет «окном» для видимости.
3. Убедитесь, что форма находится непосредственно под обрезаемым объектом в панели Layers. Порядок слоёв критичен: маска всегда должна быть ниже объекта.
4. Выделите оба слоя: сначала — обрезаемый объект, затем — форму-маску (удерживайте Shift при выборе).
5. Нажмите Ctrl+Shift+K (Windows) или Cmd+Shift+K (Mac). Альтернативно: кликните правой кнопкой → «Mask» или используйте панель Properties → «Mask» → «Create Mask».

После этого ваш объект будет виден только в пределах формы-маски. Если вы измените размер маски — обрезка автоматически обновится. Это особенно полезно при адаптации под разные экраны.

Проверьте результат: если маска не сработала, убедитесь, что вы не выделили маску первым — порядок важен. Также не забудьте, что маска не работает с группами, если они не объединены. Для сложных форм используйте «Union» или «Intersect» перед применением маски.

Инструмент «Clip» — альтернатива маскам

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

Чтобы использовать Clip:

• Выберите объект, который вы хотите обрезать.
• Перетащите его внутрь прямоугольника или фрейма.
• Кликните правой кнопкой → «Clip content» или используйте сочетание Ctrl+Alt+K (Cmd+Option+K на Mac).

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

Однако Clip имеет ограничения: он не работает с произвольными формами, только с прямоугольными контейнерами. Кроме того, при изменении размера фрейма содержимое может «прыгать», если не настроены авто-анкоры. Поэтому Clip лучше использовать для простых случаев, а маски — для сложных и точных задач.

Обрезка с помощью булевых операций

Булевы операции — мощный, но требующий точности инструмент. Они позволяют объединять, вычитать, пересекать и исключать фигуры. Для обрезки чаще всего используется операция «Subtract» (вычитание).

Пример: вы хотите вырезать «окно» в прямоугольнике, чтобы показать фон за ним. Для этого:

1. Нарисуйте большой прямоугольник — это ваш фон.
2. Создайте меньший прямоугольник, который будет «окном».
3. Поместите его поверх большого прямоугольника.
4. Выделите оба объекта.
5. В панели Properties нажмите «Subtract» (или Ctrl+Alt+U).

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

Однако булевы операции разрушают исходные слои. После применения «Subtract» вы не сможете вернуть исходные формы без отмены (Ctrl+Z). Поэтому используйте их только тогда, когда уверены, что не понадобится возвращать исходные элементы.

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

Даже опытные дизайнеры допускают ошибки при обрезке. Вот пять самых распространённых:

• Неправильный порядок слоёв. Маска должна быть ниже объекта. Если вы выделили маску первой — Figma не поймёт, что вы хотите её использовать как границу.
• Использование групп вместо фреймов. Маски не работают с группами, если они не преобразованы в фреймы. Перед применением маски убедитесь, что оба объекта находятся на одном уровне или в одном фрейме.
• Обрезка текста без учёта линий. Если вы обрежете текст маской, нижние части букв (например, «g», «y») могут быть обрезаны некорректно. Используйте «Line height» и «Letter spacing» для компенсации.
• Применение маски к группе с разными типами слоёв. Если в группе есть изображения, текст и фигуры — маска может примениться только к верхнему слою. Лучше объединить всё в один фрейм.
• Забыть проверить на разных разрешениях. Обрезка, которая выглядит идеально на 1920px, может быть слишком агрессивной на 375px. Всегда тестируйте на мобильных макетах.

Продвинутые советы: обрезка текста, градиентов, слоёв

Обрезка — это не только про изображения. С её помощью можно решать сложные задачи:

• Обрезка текста. Вы можете обрезать текст маской, чтобы он «вписывался» в нестандартную форму — например, волнистую линию. Просто создайте путь с помощью Pen Tool, поместите его под текст, примените маску. Текст будет виден только внутри контура.
• Градиенты на нестандартных формах. Нарисуйте фигуру, примените градиент, затем обрежьте её маской — и вы получите градиент только в нужной области. Это идеально для кнопок, баннеров и заголовков.
• Обрезка слоёв с эффектами. Если у вас есть слой с тенью, свечением или внутренней тенью — обрезка маской не удаляет эти эффекты. Они будут видны за пределами маски. Чтобы избежать этого, примените маску до добавления эффектов, или создайте отдельный слой для эффектов и обрежьте его отдельно.
• Обрезка с помощью стилей. Если вы используете компоненты, создайте один шаблон маски и примените его ко всем экземплярам. Это обеспечит единообразие по всему проекту.

Для продвинутых пользователей: можно использовать плагины, такие как «Auto Layout Master» или «Unsplash», чтобы автоматически обрезать изображения по размеру. Но даже с плагинами базовое понимание масок остаётся незаменимым.

Экспертное мнение: как обрезают профессионалы

Марина Белова, Senior Product Designer в Mail.ru Group, работает с Figma уже 7 лет. Её команда разрабатывает интерфейсы для 30+ продуктов. Вот её подход:

Она также рекомендует:
— Использовать имена слоёв: «Image — Masked», «Background — Clip» — это ускоряет поиск.
— Создавать «масочные шаблоны» в библиотеке компонентов.
— Проверять обрезку в режиме «Inspect» — там можно увидеть, какие пиксели обрезаны, а какие остаются в исходном слое.

Часто задаваемые вопросы

Заключение

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

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

• Используйте маски — они сохраняют исходные данные и поддерживают редактирование.
• Clip подходит только для прямоугольных контейнеров, не для сложных форм.
• Никогда не применяйте «Subtract» к изображениям — это необратимо удаляет данные.
• Всегда проверяйте обрезку на разных разрешениях и в режиме Preview.
• Именуйте маски и используйте компоненты для масштабирования.