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

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

Что значит разделить вектор в Figma

Разделение вектора — это операция, при которой один замкнутый или незамкнутый путь разбивается на две или более отдельных части. Это не просто копирование или вырезание — это физическое изменение структуры контура. Например, вы можете разделить круг пополам, чтобы получить две полуокружности, или разбить сложную иконку на отдельные элементы для анимации. В Figma это возможно благодаря системе векторных сеток и операциям над путями (Boolean Operations).

Почему это важно? Дизайнеры часто используют разделение для создания модульных компонентов — например, для кнопок с разными состояниями (нормальное, наведение, нажатие), где только часть формы меняется. Также разделение позволяет точно вырезать формы под сложные контуры, например, под изогнутые рамки или арки в мобильных интерфейсах. Без этого навыка невозможно создавать адаптивные и масштабируемые системы дизайна.

Инструменты для разделения векторов

Figma предоставляет несколько способов разделить вектор, каждый из которых подходит для разных задач. Основные инструменты — это Boolean Operations, Knife и Path Operations. Они находятся в верхней панели инструментов при выделенном векторном объекте.

• Divide — разбивает пересекающиеся объекты на отдельные части по линиям пересечения. Идеален для сложных форм, например, когда вы накладываете прямоугольник на круг и хотите получить сегменты.
• Subtract — удаляет область пересечения одного объекта из другого. Используется для вырезания, а не разделения, но часто применяется как промежуточный шаг.
• Intersect — оставляет только область, где два объекта пересекаются. Полезен, когда нужно извлечь конкретный фрагмент.
• Union — объединяет объекты, но иногда используется перед разделением, чтобы создать единый контур для последующего разбиения.
• Knife — ручной инструмент, который позволяет «резать» путь вручную, кликая по контуру. Подходит для нестандартных разрезов, где нельзя использовать геометрические формы.

Помните: все Boolean Operations работают только с двумя или более выделенными объектами. Если вы хотите разделить один объект — вам нужно создать вспомогательную форму (например, линию или прямоугольник), которая пересечёт его.

Пошаговое руководство: как разделить вектор

Разделение вектора — это не одна операция, а последовательность действий. Ниже — детальный алгоритм для типичной задачи: разделения круга на две равные половины.

1. Создайте круг с помощью инструмента Ellipse (O).
2. Создайте прямоугольник с помощью Rectangle (R). Сделайте его шире и выше круга.
3. Поместите прямоугольник так, чтобы он точно пересекал круг по центру. Используйте Align → Vertical Center и Horizontal Center, чтобы выровнять.
4. Выделите оба объекта — сначала круг, затем зажмите Shift и кликните по прямоугольнику.
5. В верхней панели инструментов найдите раздел Path и выберите Divide.
6. После операции круг разобьётся на две отдельные части: левую и правую полуокружности.
7. Теперь вы можете перемещать, окрашивать или анимировать каждую часть независимо.

Если вы работаете с незамкнутым путём (например, линией), то Divide не сработает — вместо этого используйте Knife. Кликните по инструменту Knife (или нажмите K), затем проведите по линии там, где хотите разрезать. Figma добавит новый узел и разобьёт путь на два отдельных сегмента.

Для точного разреза по диагонали: удерживайте Shift при рисовании линии-разделителя, чтобы она была идеально под 45°, 90° или 180°.

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

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

• Не дублируют исходный объект — после Divide оригинал исчезает, и если вы ошиблись — восстановить его невозможно. Решение: всегда копируйте (Ctrl/Cmd + C) и вставляйте (Ctrl/Cmd + F) объект перед разделением.
• Используют Divide с не пересекающимися объектами — если формы не пересекаются, операция не сработает. Figma не выдаст ошибку, просто ничего не произойдёт. Решение: включите режим «Outline» (View → Outline) и убедитесь, что линии действительно пересекаются.
• Разделяют группированные объекты — если вектор находится в группе, Boolean Operations могут работать некорректно. Решение: разгруппируйте (Ctrl/Cmd + Shift + G) перед операцией.
• Забывают про узлы — после разделения в некоторых местах появляются лишние узлы, которые искажают форму. Решение: используйте Smooth или Remove узлов в панели Edit Points.

Продвинутые техники разбиения

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

Вот три продвинутых приёма:

• Разделение по сетке — создайте сетку из линий (например, 3×3), наложите её на иконку, выделите всё и примените Divide. Вы получите 9 отдельных фрагментов — идеально для анимаций или градиентных переходов.
• Разделение с помощью маски — если вы хотите разделить объект по нестандартному контуру (например, волнистой линии), создайте маску: поместите путь поверх объекта, выделите оба, затем выберите Intersect. Это оставит только ту часть, что попала в маску.
• Комбинирование с Auto Layout — после разделения поместите фрагменты в Auto Layout-контейнер. Теперь вы можете динамически менять расстояние между частями, и они будут вести себя как единый компонент — идеально для кнопок с изменяющейся иконкой.

Представьте, что вы создаёте систему иконок для мобильного приложения. Одна иконка — «Уведомление» — состоит из колокольчика с линией. Вы хотите, чтобы линия могла быть включена/выключена. Разделите колокольчик и линию, сделайте их отдельными компонентами, и теперь вы можете переключать их видимость в вариантах компонента — без перерисовки.

Экспертное мнение

«Я веду курсы по Figma для крупных IT-компаний, и 80% студентов не знают, как правильно разделить вектор. Они копируют, вырезают, пытаются использовать кисть — и теряют контроль. Правильный подход — это работа с путями, а не с видимостью. Вы должны понимать, что каждый узел — это точка данных. Разделение — это не визуальное действие, это структурное изменение.»

— Екатерина Морозова, UX-архитектор, более 10 лет работы с Figma, автор курса «Vector Mastery for Design Systems»

Она рекомендует всегда использовать следующий чек-лист перед разделением:

• Объекты выделены в правильном порядке (важно для Boolean)
• Нет группировок
• Используется только один тип операции за раз
• Создан дубликат исходного объекта
• Проверен режим Outline

«После разделения — всегда проверяйте размеры. Иногда Figma сдвигает позицию новых фрагментов на 0.5 пикселя. Это критично для пиксель-перфекта.»

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

Заключение

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

• Всегда дублируйте вектор перед разделением — это спасёт вас от потери данных.
• Divide работает только при пересечении объектов — используйте вспомогательные формы для точного разреза.
• Knife — ручной инструмент для сложных разрезов, но требует практики и точности.
• После разделения проверяйте стили и позиции — Figma не копирует их автоматически.
• Разделение — это структурное изменение, а не визуальное. Думайте как системный дизайнер.