Как вырезать фрагмент в фигме

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

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

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

Инструмент «Slice» 

В мире цифрового дизайна редко когда работа существует исключительно внутри инструмента. Рано или поздно любой макет должен быть «расчленен» на составные части - будь то набор иконок для верстки, баннер для рекламной кампании или просто скриншот конкретного состояния интерфейса для постановки задачи разработчику.

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

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

Освоение «Slice» - это не просто изучение функции; это переход на новый уровень осознанности в подготовке материалов, где контроль над экспортом становится таким же точным, как и сам процесс проектирования. Этот инструмент превращает хаотичный экспорт «как получится» в предсказуемый и управляемый конвейер поставки готовых активов.

Этот инструмент создает специальную область, которую Figma воспринимает как отдельный объект для экспорта. Это самый правильный и управляемый способ, если вам нужно вырезать часть макета и сохранить ее как отдельное изображение (PNG, JPG, SVG и т.д.).

Найдите и выберите инструмент «Slice»

• На панели инструментов вверху нажмите на иконку меню (она выглядит как квадрат с линией или просто стрелка).
• В выпадающем списке выберите инструмент «Slice» (иконка похожа на бритву или нож для пиццы).
• Горячая клавиша: S - это самый быстрый способ активировать инструмент.

Создайте область среза

• После выбора инструмента ваш курсор превратится в крестик.
• Зажмите левую кнопку мыши и растяните прямоугольную область вокруг того фрагмента, который вы хотите вырезать.
• Отпустите кнопку мыши. Вы увидите, что на слое появился новый объект с иконкой ножа и названием «Slice».

Важные моменты:

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

Настройте экспорт

Это ключевой шаг, если ваша цель - получить файл.

• Выделите созданный срез (рамку среза).
• В правой панели перейдите на вкладку «Export».
• Нажмите кнопку «+» рядом с надписью «Export».
• Выберите настройки: Формат: PNG, JPG, SVG, PDF - в зависимости от ваших нужд. Множитель (Scale): 1x, 2x, 3x и т.д. - определяет разрешение экспортируемого файла. 2x и 3x используются для дисплеев с высокой плотностью пикселей (Retina). Суффикс (Suffix): Можно добавить, например, @2x, чтобы автоматически подписать файл.

Экспортируйте фрагмент

• Выделить срез и нажать кнопку «Export [Название Среза]» в правой панели.
• Щелкнуть правой кнопкой мыши по срезу и в контекстном меню выбрать «Export Selection».
• Если срез находится внутри Фрейма, можно выделить сам фрейм, и в настройках экспорта фрейма будут показаны все срезы, находящиеся внутри него. Это удобно для экспорта нескольких элементов разом.

Итог по способу 1: Вы создали специальную зону, которую Figma теперь видит как самостоятельный экспортируемый объект. Это «виртуальные ножницы» для вырезки картинок.

Обтравочная маска 

Если инструмент «Slice» - это хирургический скальпель для экспорта, то обтравочная маска - это волшебная рамка, определяющая саму суть визуальной композиции внутри дизайна. Ее фундаментальная задача - не создание файлов, а управление вниманием и формой.

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

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

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

Этот способ не создает отдельный файл, а визуально "прячет" все, что выходит за границы родительского объекта. Он используется внутри дизайна, а не для экспорта.

Когда использовать? Например, вам нужно поместить большую фотографию в круглый аватар.

Подготовьте объекты

1. «Обтравочный контур» (Mask): Объект, который будет формой «окна». Это может быть круг, прямоугольник, любая векторная форма.
2. «Содержимое» (Content): Объект, который вы хотите обрезать (например, фотография).

Расположите объекты правильно

• Поместите объект-«содержимое» поверх объекта-«контура». На панели слоев «содержимое» должно находиться выше.

Примените обтравочную маску

• Выделите оба объекта (зажмите Shift и кликните на них).
• Есть три способа применить маску: Горячие клавиши: Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac). Правая кнопка мыши: Кликните по выделенным объектам и выберите «Use as Mask». Через меню: В верхнем меню нажмите «Object» - «Use as Mask».

Результат и управление

• Вы увидите, что все, что было за пределами нижнего объекта (обтравочного контура), стало невидимым.
• На панели слоев объекты будут сгруппированы. Верхний объект получит иконку обтравочной маски (пунктирный квадрат).
• Чтобы отредактировать: Выделите группу маски. Дважды кликните по области, чтобы войти внутрь группы. Теперь вы можете перемещать и трансформировать как само «содержимое» (фото), так и «обтравочный контур» (круг) независимо друг от друга.

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

Вывод

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

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

Характеристика	Slice	Clipping Mask
Основное назначение	Экспорт части макета в файл.	Визуальное отображение части объекта внутри другой формы.
Результат	Отдельный файл (PNG, JPG, SVG).	Группа слоев внутри Figma.
Влияние на дизайн	Срез - это невидимая при экспорте область, которая не меняет исходные объекты.	Маска физически скрывает часть содержимого на холсте.
Аналогия	Ножницы: вы режете готовый плакат, чтобы отдать кому-то кусок.	Рамка для фото: вы вставляете большую фотографию в рамку, и края не видны.

 

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