Как изменять фигуры в фигме

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

Основные типы фигур в Figma

Figma предлагает несколько базовых инструментов для создания фигур: прямоугольник, эллипс, линия, многоугольник и звезда. Каждый из них доступен на верхней панели инструментов или через сочетания клавиш (например, R — прямоугольник, O — эллипс). Эти фигуры создаются как векторные объекты, что позволяет свободно их масштабировать без потери качества.
При создании фигуры вы можете сразу задать её параметры: размер, положение, цвет заливки и обводки. После добавления на холст фигура становится полноценным элементом, который можно изменять через правую панель свойств (Inspector). Здесь доступны все ключевые параметры: ширина, высота, X/Y-координаты, угол поворота, непрозрачность и стили.
Фигуры в Figma могут быть как простыми, так и составными. Простые — это стандартные геометрические формы. Составные создаются с помощью булевых операций или путём ручного редактирования векторных точек. Например, кнопку с закруглёнными краями и иконкой внутри можно собрать из нескольких фигур, объединённых в один слой.

Когда использовать какие фигуры?

Выбор типа фигуры зависит от задачи. Прямоугольники чаще всего применяются для карточек, кнопок и блоков контента. Эллипсы — для аватарок, иконок и круговых прогресс-баров. Линии помогают строить сетки, рамки и разделители. Многоугольники и звёзды полезны при создании декоративных элементов или сложных иконок.

• Прямоугольник — универсальная форма для 80% интерфейсных элементов.
• Эллипс — идеален для круглых и овальных форм, включая маски под изображения.
• Линия — используется не только как графический элемент, но и как направляющая.
• Многоугольник — настраивается по количеству сторон (от 3 до 100), что позволяет создавать шестиугольники, восьмиугольники и другие формы.
• Звезда — редко используется, но незаменима в дизайне иконок и UI-декора.

Изменение размеров и позиции фигур

Один из самых частых действий — изменение размера фигуры. Это можно сделать двумя способами: перетаскиванием углов или через панель свойств. При перетаскивании держите Shift, чтобы сохранить пропорции (например, при масштабировании круга). Для точного контроля лучше использовать поля «Width» и «Height» в правой панели.
Позиция фигуры определяется её координатами X и Y относительно верхнего левого угла фрейма или страницы. Вы можете изменять их вручную, что особенно полезно при выравнивании элементов. Figma автоматически показывает расстояния между соседними объектами, что упрощает построение согласованной сетки.
Также доступны инструменты выравнивания и распределения. Если выделено несколько фигур, в верхней панели появятся кнопки: «Выровнять по центру», «Распределить по горизонтали» и другие. Эти функции критически важны при создании макетов с высокой точностью.

Горячие клавиши для быстрого изменения

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

1. Shift + перетаскивание — сохранение пропорций.
2. Alt + перетаскивание — копирование фигуры.
3. ↑↓←→ — перемещение на 1 пиксель.
4. Shift + ↑↓←→ — перемещение на 10 пикселей.
5. Ctrl/Cmd + G — группировка выбранных фигур.

Работа с углами и скруглениями

Скругление углов — одна из самых востребованных возможностей при проектировании современных интерфейсов. В Figma вы можете установить радиус скругления от 0 до 9999 пикселей. Настройка находится в правой панели рядом с размерами фигуры. Доступны четыре значения: верхний левый, верхний правый, нижний правый, нижний левый.
Если нужно скруглить все углы одинаково, достаточно изменить одно значение — остальные синхронизируются. Чтобы задать разные радиусы, отключите синхронизацию, нажав на иконку цепи рядом с полями. Это полезно при создании каплевидных форм, закладок или сложных карточек.

Как создать овал или круг с идеальными пропорциями?

Чтобы нарисовать идеальный круг, выберите инструмент эллипса (O) и, начиная рисовать, удерживайте Shift. То же самое работает и с прямоугольником — при зажатом Shift получается квадрат. Если вы уже создали фигуру, её можно привести к идеальному соотношению 1:1, вручную установив одинаковые значения ширины и высоты.
Для более сложных форм, например, капсулы (прямоугольник с максимальным скруглением), установите радиус скругления равным половине высоты. Например, если высота — 40 пикселей, радиус должен быть 20. Так вы получите идеально закруглённые концы, характерные для современных кнопок.

Булевы операции: объединение, резка и другое

Булевы операции позволяют комбинировать фигуры, создавая сложные формы из простых. В Figma доступны четыре основные операции: Объединить (Union), Вычесть (Subtract), Пересечение (Intersect) и Исключение (Exclude). Они находятся в верхней панели при выделении двух и более фигур.
Объединение — самый частый вариант. Он соединяет несколько фигур в одну, убирая внутренние границы. Например, вы можете соединить два прямоугольника, чтобы получить Г-образную форму. Вычитание позволяет «вырезать» одну фигуру из другой — идеально для создания отверстий или иконок с прозрачными зонами.
Пересечение оставляет только ту часть, где фигуры перекрываются. Исключение удаляет пересекающиеся области, оставляя всё остальное. Эти операции особенно полезны при создании логотипов, сложных иконок или декоративных элементов.

Практический пример: создание иконки «профиль»

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

1. Нарисуйте большой круг (фон).
2. Добавьте текст с инициалом.
3. Выделите оба элемента.
4. Примените операцию «Вычесть», чтобы текст «вырезался» из фона.
5. Измените цвет заливки на нужный.

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

Векторы и контурный редактор

Когда стандартных фигур недостаточно, приходит время работать с векторами. Любой объект в Figma можно преобразовать в векторный путь с помощью команды «Convert to Vector» (Ctrl+Shift+K / Cmd+Shift+K). После этого вы получаете полный доступ к узлам, сегментам и направляющим.
Инструмент «Pen» (P) позволяет рисовать произвольные формы. Вы можете добавлять точки, создавать кривые Безье, редактировать углы. Контурный редактор активируется при выборе векторного объекта. Точки можно перемещать, удалять, менять тип (острый, гладкий, симметричный).
Работа с векторами требует практики, но открывает огромные возможности. Например, вы можете создать уникальную форму кнопки, иконку в стиле line art или сложный график. Также векторы легко анимируются в прототипах и экспортируются в SVG без потерь.

Как редактировать отдельные точки?

• Выберите фигуру и нажмите «Edit Object» (двойной щелчок или Enter).
• Щёлкните по любой точке, чтобы переместить её.
• Тяните за ручки Безье, чтобы изменить кривизну.
• Щёлкните правой кнопкой по точке, чтобы изменить её тип.
• Используйте Alt для временного переключения на инструмент перемещения точек.

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

Чтобы не тратить время на рутинные действия, используйте лучшие практики Figma. Во-первых, применяйте компоненты для часто используемых фигур: кнопок, иконок, карточек. Это обеспечит единообразие и упростит внесение изменений.
Во-вторых, используйте плагины. Например, «Corner Copier» позволяет копировать радиусы скругления между фигурами, а «Vector Tools» даёт дополнительные функции для редактирования путей. Плагины экономят десятки кликов в день.
В-третьих, настройте библиотеки стилей. Сохраняйте часто используемые заливки, обводки и эффекты как «Style». Тогда вы сможете применять их одним кликом, не задавая параметры каждый раз вручную.

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

Современный дизайн требует скорости и точности. Умение быстро изменять фигуры в Figma — не просто навык, а основа эффективной работы. Профессионалы используют комбинацию из стандартных инструментов, булевых операций и векторного редактирования, чтобы минимизировать рутину.
Главный принцип — начинать с простого. Не пытайтесь сразу рисовать сложные формы вручную. Собирайте их из базовых фигур, как из конструктора. Это ускоряет процесс и делает дизайн более предсказуемым.
Также важно следить за иерархией слоёв. Название фигуры, группировка, использование фреймов — всё это влияет на удобство редактирования. Хороший макет легко понять даже коллеге, который к нему не прикасался.

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

Заключение

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

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