Как в фигме сделать фигуру

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

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

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

Figma предоставляет набор стандартных инструментов для создания фигур, доступных на левой панели. Каждый из них активируется горячей клавишей и позволяет строить определённый тип формы. Инструменты расположены под иконкой курсора и включают: прямоугольник (R), эллипс (O), линию (L), многоугольник и звезду. Эти инструменты являются основой для большинства дизайнерских задач.
Чтобы создать фигуру, выберите нужный инструмент и кликните на холсте. Удерживая кнопку мыши, растяните форму до нужного размера. При этом вы можете использовать модификаторы: Shift — для сохранения пропорций (например, квадрат или круг), Alt — для рисования из центра, а сочетание Shift+Alt — для масштабирования симметрично из центра.
После создания фигура становится объектом на холсте с собственными свойствами. Её можно перемещать, копировать, изменять цвет заливки и обводки, добавлять тени и скругления. Все параметры доступны в правой панели Inspector, где можно точно задать ширину, высоту, радиус углов и другие значения.

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

Ускорьте процесс с помощью сочетаний:

• R — прямоугольник;
• O — эллипс;
• L — линия;
• P — перо (Pen Tool);
• V — курсор (выбор);
• Shift + клик — ограничение пропорций;
• Alt + клик — рисование из центра.

Эти комбинации позволяют не отрывать руки от клавиатуры и работать максимально продуктивно.

Основные типы геометрических фигур

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

Прямоугольник и квадрат

Прямоугольник — самый часто используемый элемент в UI-дизайне. Из него создаются кнопки, карточки, поля ввода, баннеры и блоки контента. Чтобы сделать квадрат, удерживайте Shift при растягивании. Скругление углов регулируется в правой панели: можно задать единый радиус или разный для каждого угла.

Эллипс и круг

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

Линия

Инструмент Line (L) создаёт прямые линии с настраиваемой толщиной обводки. Важно понимать, что линия — это не просто тонкий прямоугольник, а векторный объект с направлением. Вы можете менять её стиль: сплошная, пунктирная, штрихпунктирная — всё настраивается в разделе Stroke.

Многоугольник

Многоугольник создаётся с помощью инструмента Polygon. После клика на холсте появляется форма с 6 сторонами по умолчанию, но количество сторон можно изменить в правой панели. Этот инструмент удобен для создания шестиугольников в сетках (например, для honeycomb-эффекта) или треугольников.

Звезда

Инструмент Star создаёт звёзды с двумя радиусами: внешним и внутренним. По умолчанию — 5 лучей. Количество лучей и соотношение радиусов можно настроить. Звёзды часто используются в рейтингах, декоративных элементах и иконках.

Редактирование и трансформация фигур

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

Масштабирование и пропорции

Чтобы изменить размер фигуры, потяните за угол или сторону рамки. Удерживайте Shift для сохранения пропорций. Если нужно масштабировать симметрично из центра — используйте Alt+Shift. В правой панели можно ввести точные значения ширины и высоты.

Поворот и наклон

Для поворота наведите курсор за пределы рамки, пока не появится иконка вращения. Кликните и поверните объект на нужный угол. Точное значение угла можно задать в правой панели в поле «Rotation». Наклон (skew) также доступен через контекстное меню или плагины.

Скругление углов

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

• Единый радиус для всех углов;
• Разные значения для каждого угла (включая верхний левый, нижний правый и т.д.);
• Автоматическое скругление при создании через настройки документа.

Это особенно полезно при создании современных интерфейсов с мягкими формами.

Создание сложных фигур через векторы

Когда стандартных форм недостаточно, приходит время использовать векторные инструменты. Figma позволяет создавать любые формы с помощью Pen Tool (P) и редактирования узлов.

Перо (Pen Tool)

Выберите инструмент Pen (P) и кликайте на холсте, чтобы создавать точки. Каждый клик добавляет узел. Чтобы создать кривую, потяните за точку после клика — появятся направляющие ручки. Таким способом можно рисовать плавные линии и сложные контуры.

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

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

• Выделить узлы с помощью инструмента «Edit Object» (E);
• Перемещать точки и ручки;
• Добавлять новые точки (двойной клик на линии);
• Удалять точки (Backspace);
• Менять тип точки: острый угол, сглаженный, симметричный.

Это даёт полный контроль над формой.

Замыкание контура

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

Объединение и вычитание фигур

Figma поддерживает булевы операции — способ комбинировать фигуры, чтобы создавать сложные формы. Эти операции аналогичны тем, что есть в Adobe Illustrator.

Типы булевых операций

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

Операции применяются через верхнюю панель после выделения нескольких фигур.

Практическое применение

Булевы операции незаменимы при:

• Создании иконок (например, облако с пузырьком чата);
• Проектировании кнопок со стрелками или вырезами;
• Формировании сложных масок и контуров.

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

Советы по эффективной работе

Чтобы работать в Figma быстро и без ошибок, следуйте этим рекомендациям:

Используйте компоненты для повторяющихся фигур

Если вы создаёте одинаковые элементы (например, иконки или кнопки), превратите их в компоненты. Это позволит вносить изменения в одном месте и автоматически обновлять все экземпляры.

Применяйте авто-расположение (Auto Layout)

Для фигур, которые входят в группы (например, иконка + текст), используйте Auto Layout. Это обеспечит адаптивность и упростит выравнивание.

Работайте с сеткой и привязкой

Включите сетку (View → Show Grid) и привязку к объектам (Snap to Objects). Это поможет выравнивать фигуры и избежать смещений.

Используйте плагины

Figma поддерживает плагины. Например:

• Blush.design — библиотека векторных иллюстраций;
• Geometry Generator — создаёт сложные формы по команде;
• Iconify — поиск и вставка иконок.

Они экономят время и расширяют возможности.

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

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

Заключение

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

• Используйте стандартные инструменты (R, O, L) для быстрого создания базовых фигур.
• Применяйте Shift и Alt для контроля пропорций и центровки.
• Освойте булевы операции для создания сложных форм без потери редактируемости.
• Работайте с векторами через Pen Tool для максимального контроля.
• Сохраняйте готовые фигуры как компоненты для повторного использования.