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

Прямоугольный треугольник в Figma можно создать несколькими способами: с помощью инструмента «Polygon», ручного построения с использованием линий и узлов, либо через комбинацию прямоугольника и маски. Самый точный и гибкий метод — использование Pen (перо) или конвертирование фигуры с последующей коррекцией узлов.

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

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

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

Каждый из этих методов имеет свои преимущества. Первый — самый простой и подходит новичкам. Второй даёт полный контроль над формой. Третий экономит время при массовом создании фигур.

Почему инструмент Polygon не подходит для прямоугольных треугольников

Инструмент Polygon в Figma позволяет быстро создавать правильные многоугольники: от треугольников до десятиугольников. Однако он генерирует только равносторонние фигуры. Это означает, что все стороны и углы равны. Такой треугольник — равносторонний, а значит, каждый угол составляет 60°, а не 90°.

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

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

Пошаговые инструкции: 3 надежных способа

Рассмотрим три проверенных метода, которые работают в любом проекте: от макетов интерфейсов до иконок и диаграмм.

Способ 1: Из прямоугольника через редактирование узлов

Это самый быстрый и понятный способ для начинающих.

1. Выберите инструмент Rectangle (R) и нарисуйте прямоугольник нужного размера.
2. Нажмите правой кнопкой мыши по фигуре и выберите Convert to Vector (или Ctrl+Shift+K).
3. Активируйте инструмент Object → Insert → Edit Object (или нажмите Enter).
4. Выделите один из угловых узлов (например, верхний правый) и удалите его с помощью клавиши Delete.
5. Figma автоматически соединит соседние точки, образуя треугольник.
6. При необходимости переместите оставшиеся узлы для точной настройки угла 90°.

Способ 2: С помощью Pen Tool (перо)

Pen Tool даёт максимальный контроль и подходит для сложных композиций.

1. Нажмите P, чтобы активировать Pen Tool.
2. Щёлкните в точке, где будет первый угол (например, левый нижний).
3. Переместитесь вправо и щёлкните — это второй угол (по горизонтали).
4. Затем переместитесь вверх (по вертикали) и щёлкните — третий угол.
5. Чтобы замкнуть фигуру, щёлкните по первой точке или нажмите Esc, затем кликните правой кнопкой и выберите Close Path.

Теперь у вас есть идеальный прямоугольный треугольник с прямым углом внизу слева.

Способ 3: Через плагины (ускоренный вариант)

Если вы часто работаете с геометрическими фигурами, установите плагин Shapes или Geometric Generator из Figma Community.

Шаги:

• Откройте панель плагинов (Ctrl+/ или через меню Plugins).
• Найдите «Triangle Generator» или аналог.
• Выберите тип — прямоугольный треугольник.
• Укажите размеры катетов.
• Нажмите «Create».

Плагин моментально сгенерирует фигуру с правильным углом 90° и чистыми векторными узлами.

Точность и работа с сеткой: как избежать ошибок

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

Во-первых, включите Snap to Grid и Snap to Objects в настройках View (нижняя панель). Это обеспечит привязку узлов к целым значениям координат.

Во-вторых, используйте панель свойств справа, чтобы задавать точные X, Y, Width и Height. Например:

• Катет A: 100×0 (горизонтальный отрезок)
• Катет B: 0×100 (вертикальный отрезок)

При соединении они образуют идеальный угол 90°.

В-третьих, проверьте угол с помощью визуальных подсказок Figma. Когда вы перемещаете узел, держа Shift, появляются направляющие под 45° и 90°. Если линия совпадает с направляющей — угол прямой.

Экспертные советы от UI/UX-дизайнеров

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

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

Заключение

Создание прямоугольного треугольника в Figma — простая задача, если знать правильные методы. Хотя прямого инструмента нет, вы можете использовать комбинацию Rectangle + Convert to Vector, Pen Tool или сторонние плагины для достижения идеального результата.

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

• Инструмент Polygon не подходит для прямоугольных треугольников — он создаёт только равносторонние.
• Лучший способ — преобразовать прямоугольник в вектор и удалить один узел.
• Pen Tool даёт максимальный контроль и подходит для точных построений.
• Плагины ускоряют процесс при массовом создании фигур.
• Всегда проверяйте привязку и используйте панель свойств для точных значений.