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

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

Figma — один из самых популярных инструментов для UI/UX-дизайна, веб-прототипирования и векторного рисования. Его гибкость и облачная природа делают его незаменимым как для фрилансеров, так и для крупных команд. Однако несмотря на простоту интерфейса, некоторые задачи, такие как обрезка линий, могут вызывать затруднения у новичков. В отличие от классических графических редакторов, Figma не имеет прямой кнопки «Обрезать», но предлагает несколько мощных альтернатив, основанных на работе с векторными путями и булевыми операциями.

Основы векторных линий в Figma

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

Понимание структуры векторного пути критически важно для точной обрезки. Линия может быть открытой (начало и конец не соединены) или замкнутой (например, круг или прямоугольник). Обрезка чаще всего применяется к открытым путям — например, к линиям сетки, стрелкам или декоративным элементам.

Когда вы создаете линию с помощью Line Tool или Pen Tool, Figma автоматически генерирует два узла. Добавляя больше точек, вы увеличиваете контроль над формой. Удаление точек позволяет упростить путь или изменить его длину. Именно этот механизм лежит в основе большинства методов обрезки.

Типы векторных путей

• Открытые пути — линии с двумя конечными точками. Часто используются для иконок, чертежей и направляющих.
• Замкнутые пути — фигуры, где начальная и конечная точки совпадают. Пример: круг, многоугольник.
• Сложные пути — комбинированные формы, состоящие из нескольких подпутей. Могут включать дыры (через операцию Exclude).

Для обрезки чаще всего работают с открытыми путями, хотя методы применимы и к замкнутым.

Как обрезать линию с помощью пера (Pen Tool)

Инструмент Pen (P) — самый гибкий способ редактирования векторных линий. Он позволяет добавлять, удалять и перемещать точки, что даёт полный контроль над формой.

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

1. Выберите линию с помощью инструмента Selection (V).
2. Нажмите P, чтобы активировать Pen Tool.
3. Щёлкните на одном из концов линии, чтобы добавить новую точку (если нужно).
4. Выделите лишние сегменты с помощью инструмента Direct Selection (A).
5. Нажмите Delete, чтобы удалить выбранный сегмент.

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

Пример: укорачивание диагональной линии

Представьте, что у вас есть диагональная линия длиной 200 пикселей, и вам нужно оставить только 120 пикселей от начала. Выберите линию, активируйте Direct Selection (A), кликните на конечную точку и потяните её в сторону начала. Figma автоматически пересчитает путь.

Если линия кривая (с контрольными ручками), будьте осторожны — при перемещении точки может измениться форма. Чтобы сохранить кривизну, удерживайте Alt при перетаскивании одной ручки.

Обрезка через маски: пошаговый метод

Маскирование — один из самых визуально понятных способов обрезки. Он работает как «обтравочный контур»: вы накладываете фигуру поверх линии, и всё, что выходит за её пределы, скрывается.

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

1. Создайте линию, которую нужно обрезать.
2. Нарисуйте поверх неё фигуру (прямоугольник, круг и т.п.) в том месте, где должен остаться видимый участок.
3. Выделите оба объекта: сначала линию, затем фигуру (или наоборот — порядок важен).
4. Нажмите Ctrl+Alt+M (Cmd+Option+M на Mac) или выберите в меню: Layer → Mask → Create.

После этого линия будет видна только внутри области маски. Вы можете редактировать форму маски в любой момент, и изменения отразятся мгновенно.

Ограничения масок

Маски в Figma — это визуальный эффект. При экспорте в SVG или PNG скрытые части не удаляются физически. Если вам нужен «чистый» вектор без скрытых сегментов, лучше использовать булевы операции или ручное редактирование.

Булевы операции: Subtract и Intersect

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

Чтобы использовать её:

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

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

Intersect: когда нужна точная маска

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

Например, если линия проходит через круг, а вы хотите оставить только ту её часть, что внутри круга — Intersect сделает это за один клик.

Распространённые ошибки и как их избежать

Даже опытные пользователи Figma иногда сталкиваются с проблемами при обрезке линий. Вот самые частые ошибки и способы их решения.

• Забыли конвертировать в вектор: попытка применить Subtract к обычной линии или тексту завершится ошибкой. Всегда используйте Convert to Vector перед булевыми операциями.
• Неправильный порядок выделения: в масках и булевых операциях порядок объектов имеет значение. Первый выделенный объект — основа, второй — инструмент воздействия.
• Потеря контрольных точек: при удалении сегментов с помощью пера можно случайно испортить кривую. Используйте Undo (Ctrl+Z) и работайте пошагово.
• Маска не применяется: убедитесь, что объекты перекрываются. Если маска находится вне области линии, эффекта не будет.

Чек-лист перед обрезкой

• Преобразован ли объект в вектор? (Ctrl+Shift+K)
• Правильно ли выделены объекты? (сначала линия, потом маска/фигура)
• Есть ли перекрытие между объектами?
• Создана ли резервная копия оригинала?

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

По его словам, ключ к эффективной обрезке — не в поиске аналога старого инструмента, а в понимании логики Figma. «Здесь важнее структура, чем пиксельная точность. Да, вы не можете «разрезать» линию в произвольном месте одним кликом, но вы получаете бесшовную интеграцию с прототипированием, стилями и компонентами.»

Он рекомендует использовать комбинацию методов: маски для макетов, Pen для иконок, Boolean — для автоматизации. «Например, создайте компонент «Trimmed Line» с параметрами ширины и формы. Это сэкономит часы в проектах с множеством одинаковых элементов.»

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

Заключение

Обрезка линий в Figma — это не одна команда, а целый набор методов, каждый из которых подходит для своей задачи. Понимание различий между Pen Tool, масками и булевыми операциями позволяет выбрать оптимальный подход в зависимости от контекста: точности, скорости или обратимости изменений.

• Для точного редактирования используйте Pen Tool и Direct Selection.
• Маски идеальны для временной или сложной обрезки.
• Boolean Operations дают чистый векторный результат.
• Всегда конвертируйте объекты в вектор перед булевыми операциями.
• Сохраняйте оригиналы — это спасёт от ошибок.