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

Figma - это мощный инструмент для векторного дизайна, и понимание его логики работы с формами открывает огромные возможности. Концепция «фигура в фигуре» - это не просто одно действие, а целый набор методов, основанных на принципах векторной графики и Boolean Operations (логических операций с фигурами).

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

Метод наложения и вычитания

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

Это самый простой способ, который не требует использования инструмента Boolean Operations. Он идеально подходит для быстрого создания «вырезанных» областей.

Шаги

1. Создайте основную фигуру. Например, прямоугольник (клавиша R). Это будет наша внешняя фигура.
2. Создайте вторую фигуру, которую хотите вырезать. Например, круг (клавиша O). Расположите ее поверх прямоугольника в нужном месте.
3. Выделите обе фигуры. Можно кликнуть и протянуть курсором, выделив обе, или кликнуть по одной, а затем, зажав Shift, кликнуть по второй.
4. В правой панели, в разделе «Fill» (Заливка), найдите значок «Многоточие» (...) и кликните по нему.
5. В открывшемся меню выберите режим заливки «Subtract» (Вычитание).

Что произошло

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

Плюсы метода

• Очень быстро и наглядно.
• Позволяет легко редактировать положение выреза.

Минусы

• Не создает «дырку» в классическом понимании пути, а лишь визуально скрывает часть фигуры.

Метод использования Boolean Operations

Для создания по-настоящему чистых и неизменяемых векторных путей с отверстиями необходим более мощный инструмент. Логические операции (Boolean Operations) - это стандарт в работе с векторной графикой.

Это «правильный» метод с точки зрения векторной графики. Он создает единый контур с настоящим отверстием.

Шаги

1. Повторите шаги 1-3 из предыдущего метода: создайте основную фигуру и фигуру для вырезания, расположите их и выделите обе.
2. В верхней панели над холстом появится набор иконок для объединения фигур. Нас интересует вторая иконка - «Subtract» (Вычитание).
3. (Или используйте горячие клавиши Ctrl+E или Cmd+E для быстрого вычитания).

Что произошло

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

Плюсы метода

Создает чистый, корректный векторный путь. Фигура становится единым целым, ее сложнее случайно разъединить. Это стандарт для экспорта иконок в SVG.

Минусы

• Редактировать положение отверстия после объединения сложнее (только через режим векторного редактирования).

Метод использования обтравочных масок

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

Шаги

1. Подготовьте фигуры. У вас должна быть: Фигура-маска: та, которая будет служить «рамкой». В нашем случае - прямоугольник. У этой фигуры не должно быть заливки (или она будет видна только в пределах контура). Содержимое: фигура, которая будет видна внутри маски. В нашем случае - круг.
2. Расположите фигуры правильно. Фигура-маска (прямоугольник) должна лежать поверх содержимого (круга).
3. Выделите обе фигуры.
4. Щелкните правой кнопкой мыши и выберите «Use as Mask» (Использовать как маску) (или используйте горячие клавиши Ctrl+Alt+M или Cmd+Opt+M).

Что произошло

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

Как сделать «фигуру в фигуре» этим методом

Создайте сложную маску, которая уже имеет отверстие (например, с помощью Boolean Operations из метода 2), и используйте ее для обрезки другой фигуры. Это advanced-метод для создания сложных композиций.

Плюсы метода

• Максимальная гибкость
• Исходные фигуры не разрушаются.

Минусы

• Более сложен для понимания.
• Не создает «дырку» в классическом векторном смысле.

Вывод

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

Чтобы систематизировать полученные знания и помочь вам быстро выбрать нужный инструмент в будущем, ниже представлена сравнительная таблица всех трех методов.

Критерий	Наложение и вычитание	Boolean Operations	Обтравочные маски
Сложность освоения	Очень просто	Средне	Сложно
Гибкость редактирования	Высокая (можно двигать вычитаемую фигуру)	Низкая (только через векторное редактирование)	Максимальная (редактируются и маска, и содержимое)
Чистота векторного пути	Низкая (это визуальный эффект, а не настоящий контур)	Высокая (создается корректный векторный путь с отверстием)	Средняя (исходные пути чистые, но результат - это маска)
Влияние на исходные фигуры	Объединяет в компонент	Необратимо изменяет, создавая единый слой	Не изменяет, фигуры остаются независимыми
Идеально для	Быстрых правок, прототипирования, временных решений	Иконок, логотипов, финального экспорта (особенно в SVG)	Сложных композиций, иллюстраций, работы с изображениями и текстом
Ключевое преимущество	Скорость и наглядность	Чистота и надежность	Гибкость и неразрушающее редактирование

 

Итоговые рекомендации:

• Для повседневной скорости: Используйте метод наложения и вычитания, когда нужно быстро что-то проверить или создать макет для обсуждения.
• Для финального качества: При создании иконок, логотипов и любых элементов для передачи в разработку всегда прибегайте к Boolean Operations. Это гарантирует, что ваш векторный объект будет технически корректным.
• Для максимальной гибкости: Освойте обтравочные маски для работы со сложными проектами, где вам может потребоваться вернуться и переработать отдельные элементы спустя время.

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