Фигма как обрезать

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

Что значит «обрезать» в Фигме?

В Фигме термин «обрезать» часто используется не совсем корректно. Пользователи ожидают, что инструмент «обрезать» удаляет часть объекта навсегда — как в Photoshop. Но в Фигме такого прямого инструмента нет. Вместо удаления здесь применяется принцип невидимости: вы скрываете лишнее, не уничтожая исходные данные. Это ключевое отличие от растровых редакторов и основа гибкости Figma.

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

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

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

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

1. Создайте или импортируйте объект, который нужно обрезать (например, фотографию).
2. Нарисуйте форму, которая будет служить маской: круг, прямоугольник, произвольный путь — всё, что задаст границу.
3. Убедитесь, что форма находится над объектом в стеке слоёв. Если нет — перетащите её вверх.
4. Выделите оба слоя: сначала форму (маску), затем объект (который нужно обрезать). Порядок важен!
5. Нажмите Cmd + Shift + M (Mac) или Ctrl + Shift + M (Windows).
Либо щёлкните правой кнопкой → «Сделать маской».
6. Объект автоматически обрежется по форме. Маска становится видимой как граница — но вы можете её скрыть, нажав на значок глаза рядом с ней в панели слоёв.

Чтобы отредактировать маску позже — просто дважды кликните по маске в панели слоёв. Вы попадёте в режим редактирования. Можно изменить форму, сдвинуть её, изменить радиус скругления — и обрезка автоматически подстроится.

Обрезка через вычитание форм

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

1. Нарисуйте основную форму (например, прямоугольник).
2. Нарисуйте вторую форму, которая будет «вырезать» часть первой (например, круг).
3. Разместите вторую форму так, чтобы она пересекала первую.
4. Выделите обе формы — важно: сначала основную, потом вырезающую.
5. Перейдите в верхнее меню → «Объединить» → «Вычесть» (Subtract).

Результат: первая форма будет обрезана по контуру второй. Теперь это один объект, и вы не сможете вернуть вырезанную часть без отмены (Ctrl+Z).

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

Использование контура обрезки (Clipping Path)

Контур обрезки — это продвинутый способ, когда вы используете путь (Path), созданный с помощью инструмента «Перо» или «Полилиния», чтобы обрезать изображение или вектор. Он особенно полезен при работе с нестандартными формами — например, обрезка фото под силуэт человека, животного или абстрактного объекта.

1. Импортируйте изображение.
2. Перейдите в режим рисования: выберите инструмент «Перо» (Pen Tool).
3. Тщательно нарисуйте контур по краям объекта, который нужно оставить.
4. Убедитесь, что контур замкнут — иначе обрезка не сработает.
5. Выделите и контур, и изображение.
6. Нажмите Cmd + Shift + M — как при маске.

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

Как обрезать текст по форме

Обрезка текста — одна из самых востребованных задач в дизайн-системах. Например, вы хотите, чтобы текст «перетекал» в круг или был ограничен волнистой линией.

Фигма не позволяет напрямую обрезать текст по форме, как в Illustrator. Но есть обходной путь:

1. Создайте текстовый блок.
2. Нарисуйте форму, которая будет ограничивать текст (например, эллипс).
3. Выделите форму и текст — важно: сначала форму, потом текст.
4. Нажмите Cmd + Shift + M.

Текст автоматически обрежется по форме. Но есть важный нюанс: текст не становится векторным. Он остаётся редактируемым, но его видимость ограничена маской. Вы можете менять шрифт, размер, содержимое — и обрезка сохранится.

Если вы хотите, чтобы текст действительно «вписался» в форму — используйте функцию «Поместить текст в путь» (Text on Path). Она доступна через контекстное меню после выделения текста и пути. Это не обрезка, но даёт эффект обтекания.

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

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

• Неправильный порядок слоёв — маска должна быть выше объекта. Если вы выделили сначала объект, а потом форму — маска не применится.
• Использование вычитания для изображений — вычитание не работает с растровыми файлами. Это частая причина, почему новички думают, что Фигма «не умеет» обрезать фото.
• Удаление маски вместо отключения — если вы удалите слой маски, обрезка исчезнет. Лучше просто скрыть её (глаз) или заархивировать в папку.
• Обрезка без проверки на границах — после обрезки всегда проверяйте, не обрезаются ли важные элементы (например, буквы «г», «п» или глаза на фото).
• Не используете компоненты — если вы обрезаете одинаковые элементы (аватары, карточки), сделайте из них компонент. Маска сохранится, и вы сможете легко заменять содержимое.

Чтобы избежать ошибок, создайте чек-лист перед экспортом:
— Все ли маски активны?
— Не перекрывает ли что-то обрезанный слой?
— Сохранён ли исходный файл в отдельной папке?
— Работает ли обрезка в режиме Preview?

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

«Многие дизайнеры считают, что чем больше обрезок — тем сложнее и круче дизайн. Это заблуждение. Профессиональный дизайн — это когда всё выглядит просто, но работает безупречно. Я всегда начинаю с маски. Она — как резинка в карандаше: не удаляет, а временно скрывает.

Если вы работаете с командой, особенно с разработчиками — всегда оставляйте исходные слои. Скажите им: “Вот маска — это граница, а вот оригинал — для адаптивности”. Это сэкономит вам 10–15 часов на правки в месяц.

Я также рекомендую использовать именование: называйте маски как “Mask — Avatar — User 1”. Это помогает быстро ориентироваться в сложных файлах. И никогда не удаляйте маску, если не уверены — просто выключите её.»

— Екатерина Павлова, Lead UI/UX-дизайнер, руководитель дизайн-лаборатории «Тинькофф»

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

Заключение

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

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

• Фигма не обрезает — она маскирует. Это ключевое отличие от Photoshop.
• Маска — самый гибкий и безопасный способ обрезки. Используйте её по умолчанию.
• Вычитание — только для векторных форм. Не применяйте к изображениям.
• Всегда сохраняйте исходные слои и именуйте маски для командной работы.
• Анимация обрезки возможна — используйте Prototype для интерактивных прототипов.