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

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

Вы можете создать интернет магазин за 1 вечер. Просто выберите готовый шаблон интернет магазина и установите его. Останется только наполнить его своими товарами.

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

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

Подробное руководство по инструменту «Перо»

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

Данное руководство - это исчерпывающая карта, которая проведет вас через все аспекты работы с этим инструментом. Мы начнем с базовых принципов построения контуров, разберем каждый тип точек и их свойства, а затем перейдем к продвинутым техникам редактирования и практическому применению пера в реальных задачах. Структурированный подход позволит вам систематизировать знания и сразу применять их на практике.

Где найти инструмент «Перо»

• На панели инструментов вверху слева есть иконка пера.
• Горячая клавиша: P (от английского Pen).

Основы создания контура

• Клик - создает угловую точку (point).
• Клик и перетаскивание - создает точку сглаживания (smooth point) с рычагами (handles) для создания изогнутых линий.
• Замыкание контура: Чтобы замкнуть контур, кликните на первую точку. Рядом с курсором появится кружок.
• Открытый контур: Если не замыкать контур, он останется линией (например, для создания стрелки).

Редактирование контура:

Инструмент «Указатель» (V): Используется для перемещения точек и изменения длины/направления рычагов.

Инструмент «Изменить контур» (Enter): Позволяет добавлять, удалять точки или преобразовывать их тип.

• Добавить точку: Просто кликните на сегмент контура.
• Удалить точку: Выберите точку и нажмите Backspace/Delete, или используйте инструмент "Ножницы".
• Преобразовать точку: В контекстном меню на панели сверху или через Alt+клик на точке можно сменить ее тип (угловая / сглаженная / асимметричная).

Ключевые советы по эффективной работе

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

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

Освойте три типа точек и их преобразование

Понимание типов точек - фундамент контроля над кривыми.

• Угловая точка (Point): Создается простым кликом. Резкий угол, без изгибов. Идеальна для острых краев и прямых линий.
• Точка сглаживания (Smooth Point): Создается кликом и перетаскиванием. Имеет два симметричных рычага, создающих плавную, симметричную кривую. Используется для мягких, органичных изгибов.
• Асимметричная точка (Mirror Point): Преобразуется из сглаживающей точки путем зажатия Alt и перемещения одного из рычагов. Позволяет создать резкий изгиб сразу после плавной кривой, что незаменимо для сложных форм, например, лепестков цветка или волн.

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

Управляйте рычагами осознанно

Длина и направление рычагов определяют форму кривой.

• Длина рычага определяет "высоту" и "глубину" кривой. Чем длиннее рычаг, тем более пологой и длинной будет дуга.
• Направление рычага задает касательную к кривой в этой точке.
• Правило трети: Старайтесь, чтобы рычаги составляли примерно 1/3 от длины сегмента кривой, который они формируют. Это помогает создавать более естественные и контролируемые изгибы.

Используйте модификаторы клавиш для скорости

Горячие клавиши  главный союзник в быстрой работе.

Alt (Option на Mac):

• Во время рисования: Позволяет преобразовать только что созданную сглаживающую точку в асимметричную, чтобы настроить один рычаг независимо от другого.
• При редактировании: Зажмите Alt и потяните за рычаг существующей точки, чтобы разорвать связь между ними.

Ctrl или Cmd (на Mac): Временно активирует инструмент «Указатель» (V). Позволяет быстро подвинуть misplaced точку или поправить рычаг, не переключаясь с пера.

Shift: Ограничивает углы при создании точек с шагом в 45°. Полезно для создания строго горизонтальных или вертикальных линий.

Enter или Double-Click: Завершает рисование открытого контура.

Клик по первой точке: Замыкает контур для создания фигуры.

Сначала каркас, потом идеальная форма

Не стремитесь к идеалу с первого клика.

• Этап 1: Эскиз. Расставьте все ключевые точки контура, создавая грубый каркас будущей фигуры. Используйте в основном угловые точки.
• Этап 2: Форма. Войдите в режим редактирования контура (Выделите фигуру - Enter) и преобразуйте нужные угловые точки в сглаживающие, создавая основные изгибы.
• Этап 3: Точная настройка. Используя Alt и инструмент «Указатель», тонко настройте длину и направление каждого рычага, чтобы кривая точно повторяла желаемую форму.

Чем меньше точек, тем лучше

Эффективный контур - это контур с минимальным количеством опорных точек.

• Каждая лишняя точка усложняет редактирование и может создавать ненужные "зубцы" на кривой.
• Стремитесь описывать плавные изгибы одной-двумя правильно настроенными точками вместо четырех-пяти угловых.
• Периодически проверяйте контур и удаляйте точки, без которых форма не страдает. Часто контур можно упростить без потери качества.

Вывод

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

Метод «Вырезания»	Суть метода	Пошаговая инструкция	Когда использовать
Создание Маски	Вы создаете контур пером, который становится «окном». Все, что внутри этого окна, видно, что снаружи - скрыто.	Нарисуйте объект/изображение, которое нужно «вырезать». Сверху нарисуйте контур-маску с помощью Пера (P). Это должна быть замкнутая фигура (например, звезда, логотип, любая сложная форма). Выделите оба объекта. Нажмите Ctrl+Alt+M (Win) или Cmd+Option+M (Mac) или Use as Mask в правой панели.	Идеально для кадрирования изображений сложной формы, создания «фотографий в рамке» нестандартной формы.
Булевы операции	Вычитание одной векторной фигуры (созданной пером) из другой. Это и есть классическое «вырезание».	Нарисуйте основную фигуру (например, прямоугольник). Сверху нарисуйте вторую фигуру с помощью Пера (P) - ту, которую хотите «вырезать». Выделите обе фигуры. На панели инструментов или в правой панели выберите Subtract (Вычесть). Иконка выглядит как переднее окно минус заднее.	Чтобы создать отверстие, вырезать часть логотипа, создать сложную геометрическую фигуру.
Редактирование существующего контура	Вы «врезаетесь» в контур уже существующей фигуры, изменяя ее форму.	Выберите стандартную фигуру (например, прямоугольник). Нажмите Enter для входа в режим редактирования контура. Используйте Перо (P) или инструмент «Изменить контур», чтобы добавить новые точки на контур. Перетащите эти точки или их рычаги, чтобы изменить форму фигуры, создав эффект «выреза».	Когда нужно модифицировать простую фигуру во что-то более сложное, не создавая множество объектов.

 

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

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