Как в фигме нарисовать фигуру

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

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

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

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

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

• Прямоугольник (R) — основной инструмент для создания прямоугольников и квадратов. Подходит для карточек, кнопок, блоков контента.
• Эллипс (O) — создаёт круги и овалы. Используется для аватаров, иконок, прогресс-баров.
• Линия (L) — добавляет прямые линии. Полезна для разделителей, стрелок, направляющих.
• Многоугольник (P) — позволяет рисовать правильные многоугольники: треугольники, шестиугольники, звёзды. Количество сторон настраивается.
• Карандаш (P) — инструмент для ручного рисования контуров. Создаёт замкнутые или открытые пути.
• Перо (P) — самый мощный инструмент для создания кастомных фигур. Позволяет строить векторные контуры из точек и кривых Безье.

Горячие клавиши для быстрого доступа

Ускорьте работу с помощью сочетаний клавиш:

• R — Прямоугольник
• O — Эллипс
• L — Линия
• P — Многоугольник или Перо (в зависимости от предыдущего выбора)
• Shift + Z — временный доступ к инструменту увеличения (Zoom)
• Пробел — временный переход к Hand Tool (перемещение по холсту)

Как нарисовать базовую фигуру

Создание простой фигуры — например, прямоугольника — занимает несколько секунд. Вот пошаговый алгоритм:

1. Выберите инструмент Прямоугольник (R) на панели слева.
2. Щёлкните и потяните мышь по рабочему холсту, чтобы задать размер.
3. Отпустите кнопку мыши — фигура будет создана.
4. При необходимости удерживайте Shift, чтобы нарисовать идеальный квадрат.
5. Для центрированного рисования удерживайте Alt (Windows) или Option (Mac) — фигура будет расти от центра.

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

Настройка параметров фигуры

После создания фигуры вы можете изменить её свойства:

• Размер и положение — в верхней панели или через правую боковую панель.
• Скругление углов — установите значение Radius (в px), чтобы скруглить углы. Можно задать разные значения для каждого угла.
• Заливка (Fill) — выберите цвет, градиент или изображение.
• Обводка (Stroke) — добавьте контур, настройте толщину, цвет, тип (сплошная, пунктирная), расположение (внутри, снаружи, по центру).
• Тень (Effects) — добавьте drop shadow или внутреннюю тень для объёмности.

Работа с контурными точками и редактирование форм

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

Чтобы начать редактирование:

• Выделите фигуру.
• Нажмите правой кнопкой мыши и выберите «Edit Object» или используйте сочетание Cmd + Enter (Mac) / Ctrl + Enter (Windows).
• Появятся точки по контуру — тягайте их для изменения формы.

При редактировании вы можете:

• Добавлять новые точки — щёлкните по контуру инструментом «Перо».
• Удалять точки — выберите точку и нажмите Delete.
• Переключать тип точки: прямая, симметричная, скошенная — через контекстное меню или верхнюю панель.
• Редактировать направляющие кривых Безье — для плавных изгибов.

Булевы операции: объединение, вычитание, пересечение

Один из самых мощных инструментов Figma — булевы операции. Они позволяют комбинировать несколько фигур в одну сложную форму. Доступны четыре типа:

• Union (Объединение) — соединяет все выбранные фигуры в одну.
• Subtract (Вычитание) — вычитает верхнюю фигуру из нижней.
• Intersect (Пересечение) — оставляет только ту часть, где фигуры перекрываются.
• Exclude (Исключение) — удаляет область пересечения, оставляя остальное.

Пример использования: создание иконки «профиль»

1. Нарисуйте большой круг — это голова.
2. Нарисуйте меньший круг сверху — это прядь волос.
3. Выделите оба круга.
4. Нажмите иконку Union в верхней панели.
5. Результат — единая кастомная форма.

Булевы операции особенно полезны при создании иконок, логотипов, сложных кнопок и декоративных элементов.

Создание сложных форм с помощью пера

Инструмент Перо (Pen Tool) — ключ к полному контролю над формой. Он позволяет создавать абсолютно любые контуры: от плавных волн до геометрических абстракций.

Как начать:

1. Нажмите P, чтобы активировать перо.
2. Щёлкните на холсте, чтобы поставить первую точку.
3. Щёлкните ещё раз — появится прямая линия между точками.
4. Чтобы создать кривую, при постановке второй точки потяните мышь — появятся направляющие кривых Безье.
5. Продолжайте добавлять точки. Чтобы завершить контур, щёлкните по первой точке или нажмите Esc.

Советы по работе с пером

• Удерживайте Shift, чтобы ограничить угол между точками (15°).
• Нажмите ~ (тильда), чтобы временно переключиться на просмотр (Hand Tool).
• В режиме редактирования: кликните по точке, чтобы переместить её; кликните по контуру — чтобы добавить точку; кликните по точке и нажмите Minus (-) — чтобы удалить.
• Чтобы сделать точку «острой», выберите её и нажмите «Disassociate vectors» в верхней панели.

Форматирование и стили фигур

После создания фигуры важно правильно оформить её визуально. Figma позволяет задавать множество параметров:

Заливка (Fill)

• Сплошной цвет — наиболее распространённый вариант.
• Градиент — линейный, радиальный, угловой. Настройте цвета, угол и положение.
• Изображение — заполните фигуру картинкой (полезно для аватаров, фонов).
• Video / GIF — в новых версиях Figma поддерживается вставка видео в фигуры (экспериментальная функция).

Обводка (Stroke)

• Толщина: от 0.1 до 1000 px.
• Тип: сплошная, пунктирная, штрихпунктирная.
• Кап: закрытие концов линии (butt, round, square).
• Соединение: как соединяются углы (miter, bevel, round).
• Расположение: внутри, снаружи, по центру контура.

Эффекты (Effects)

• Drop Shadow — внешняя тень. Настройте X/Y-смещение, размытие, непрозрачность.
• Inner Shadow — внутренняя тень, создаёт эффект углубления.
• Blur — размытие (Gaussian, Background, Layer). Полезно для фона, overlay-слоёв.

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

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

Анна Волкова, старший UX-дизайнер в IT-компании, 10 лет в индустрии. Провела более 50 мастер-классов по Figma, автор курса «Векторный дизайн с нуля».

«Не бойтесь использовать Pen Tool. Да, он требует времени, но даже базовое понимание кривых Безье открывает огромные возможности. Начните с простых форм: сердце, стрелка, капля — и постепенно переходите к сложным иконкам.»

Игорь Мельников, графический дизайнер, специализируется на иллюстрациях в Figma.

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

Заключение

Умение рисовать фигуры в Figma — базовый, но критически важный навык для любого дизайнера. От простых прямоугольников до сложных векторных иллюстраций — всё начинается с понимания инструментов и принципов работы с контурами. Главное — практика. Чем чаще вы используете Pen Tool, булевы операции и редактирование точек, тем увереннее чувствуете себя в редакторе.

• Используйте сочетание базовых фигур и булевых операций для быстрого прототипирования.
• Освойте Pen Tool — это ключ к созданию уникальных форм и иконок.
• Редактируйте контуры и точки для точной настройки формы.
• Применяйте стили заливки, обводки и эффектов для визуального совершенства.
• Сохраняйте настройки как Shared Styles для командной работы и согласованности.