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

Вырезать круг в круге (создать кольцо) в Figma - это очень просто. Вот несколько способов, от самого правильного до альтернативных.

Способ с использованием Boolean Operations

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

1. Нарисуйте два круга. Используйте инструмент Ellipse (O).
2. Расположите их друг на друге. Маленький круг должен быть поверх большого.
3. Выровняйте по центру. Выделите оба круга и используйте инструменты выравнивания по горизонтали и вертикали.
4. Выделите оба объекта. Кликните на большом круге, затем, зажав Shift, кликните на маленьком.
5. Примените операцию "Subtract". В панели инструментов вверху нажмите на выпадающий список с иконкой плагинов и выберите Subtract (или используйте горячие клавиши Ctrl+E / Cmd+E).

Результат: Вы получите идеальное кольцо. Вы можете менять размер внешнего и внутреннего круга, выделив получившуюся фигуру и войдя в режим векторного редактирования (двойной клик или нажатие Enter).

Быстрый способ с помощью обводки

Этот способ отлично подходит для простых колец, где важна только видимая толщина. Действия, которые необходимо выполнить:

1. Нарисуйте один круг.
2. На панели справа в разделе Stroke установите толщину обводки. Это и будет толщина вашего кольца.
3. Уберите заливку (Fill). Нажмите на иконку заливки и выберите вариант с перечеркнутым красным.

Плюсы этого способа заключаются в том, что с ним очень быстро, легко менять толщину кольца.
Минус состоит в том, что это не настоящая "дырка". Если вам нужно, чтобы сквозь кольцо был виден сложный фон или другие элементы, этот способ может не подойти, так как внутренняя часть просто прозрачная, а не вырезанная.

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

Стиль обводки	Лучше всего подходит для
Basic (Сплошная)	Классических иконок, простых разделителей, UI-элементов.
Dashed (Пунктирная)	Стилизованных загрузчиков (progress rings), декоративных элементов.
Gradient (Градиент)	Создания современных, ярких акцентов и неоновых эффектов.

 

Как применить эти стили:

1. Нарисуйте круг (O).
2. На панели справа в разделе Stroke:

• Выберите тип линии (вторая кнопка): Solid (сплошная), Dashed (пунктирная) и т.д.
• Для градиента нажмите на образец цвета обводки и выберите тип заливки Linear или Radial.

Ручной способ для нестандартных форм

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

1. Нарисовать большой круг.
2. Выбрать его и нажать Ctrl+E / Cmd+E (или кнопку Subtract вверху). Это переведет фигуру в режим векторного редактирования.
3. Внутри большого круга нарисуйте маленький круг.
4. Готово. Figma автоматически вычтет внутренний контур из внешнего.

Как сделать круглое отверстие в любой фигуре

Тот же принцип, что и в Способе 1, работает для любой формы. Для этого выполните следующие действия:

1. Поместите круг поверх фигуры, в которой нужно сделать отверстие.
2. Выделите и фигуру, и круг.
3. Примените операцию Subtract.

Принцип остаётся неизменным: просто расположите круг поверх нужной фигуры и примените к ним операцию Subtract. Таким образом можно легко создавать отверстия в прямоугольниках, треугольниках и даже в сложных составных объектах.

Вывод

Для идеального, редактируемого кольца используйте Способ 1 (Boolean Operations). Для быстрого кольца с постоянной толщиной используйте Способ 2 (Обводка). Чтобы вырезать круг из произвольной фигуры используйте логику Способа 1.