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

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

Инструмент «Перо»: самый точный способ

Наиболее универсальный и контролируемый метод создания прямоугольного треугольника — использование инструмента Pen (P). Он позволяет строить векторные фигуры с высокой точностью, особенно когда нужно задать конкретные координаты или соблюсти прямой угол.

Для начала выберите инструмент Pen на панели слева или нажмите клавишу P. Затем кликните в трёх точках: первая — начало катета, вторая — конец катета и вершина прямого угла, третья — конец второго катета. После третьего клика соедините линию с начальной точкой, чтобы замкнуть фигуру. Убедитесь, что при перемещении курсора вы видите подсказку Smart Guides, указывающую на перпендикулярность линий.

1. Активируйте инструмент Pen (P).
2. Щёлкните, чтобы установить первую точку (например, внизу слева).
3. Переместитесь вправо и щёлкните — получится горизонтальный катет.
4. Затем переместитесь вверх (или вниз, если треугольник направлен иначе) и щёлкните — второй катет.
5. Соедините третью точку с первой, чтобы завершить треугольник.

Если вы держите Shift во время рисования, линии будут строиться под углами кратными 45°, что помогает точно выдерживать 90°. Это особенно полезно при работе без сетки.

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

Figma не отображает углы автоматически, но вы можете использовать плагины вроде «Angle Inspector» или вручную проверить пропорции. Если вы построили катеты по осям X и Y, угол между ними гарантированно 90°. Также можно включить показ направляющих векторов в правой панели Properties.

Преобразование прямоугольника в треугольник

Если вам нужно быстро получить прямоугольный треугольник без точного контроля над координатами, проще всего начать с прямоугольника и удалить одну из вершин. Этот способ особенно удобен для новичков.

Начните с создания прямоугольника с помощью инструмента Rectangle (R). Нарисуйте его произвольного размера. Затем выберите фигуру и нажмите Ctrl+Enter (или Cmd+Enter на Mac), чтобы перейти в режим редактирования векторов. Теперь вы увидите четыре точки — вершины прямоугольника.

Выберите инструмент Node (N) и выделите одну из вершин — ту, которая находится напротив предполагаемого прямого угла. Удалите её с помощью Delete. Останется три точки, образующие прямоугольный треугольник. При необходимости переместите оставшиеся точки, чтобы скорректировать размеры катетов.

Шаги преобразования

• Создайте прямоугольник с помощью R.
• Перейдите в режим редактирования: Ctrl+Enter (Windows) или Cmd+Enter (Mac).
• Выберите инструмент Node (N).
• Выделите и удалите одну вершину.
• Замкните контур, если он не закрылся автоматически.

Обратите внимание: после удаления вершины Figma автоматически соединяет соседние точки. Убедитесь, что треугольник остаётся замкнутым — иначе он будет считаться открытой кривой.

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

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

Перейдите в меню View (Вид) и включите следующие опции:

• Snap to Grid — привязка к сетке;
• Pixel Snapping — привязка к пикселям;
• Show Layout Grids — отображение сетки (если добавлена);
• Snap to Geometry — привязка к границам объектов.

Вы также можете задать шаг сетки вручную. Для этого нажмите на холст правой кнопкой и выберите «Show Grid» или зайдите в File → Settings → Canvas. Рекомендуемый шаг — 10 или 20 пикселей, чтобы легко масштабировать фигуры.

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

Использование Constraints и Auto Layout для адаптивности

Если вы используете треугольник в интерфейсе (например, как иконку раскрытия меню), важно, чтобы он корректно масштабировался. Добавьте фигуру в фрейм и задайте Constraints: например, «Left & Top» или «Center». Это предотвратит деформацию при изменении размеров родительского блока.

Плагины и автоматизация: экономия времени

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

Один из самых популярных плагинов — Geometric. Он предлагает набор стандартных фигур, включая прямоугольные треугольники, с возможностью указать длину катетов. Другой вариант — Shapes, где есть опция «Right Triangle» с выбором ориентации (влево, вправо, вверх, вниз).

Чтобы установить плагин:

1. Откройте панель плагинов (квадрат в правом нижнем углу).
2. Найдите «Geometric» или «Shapes» через поиск.
3. Нажмите «Install».
4. Запустите плагин и выберите нужную фигуру.

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

Распространённые ошибки и как их исправить

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

• Угол не прямой. Причина — отсутствие привязки к сетке или случайное смещение точки. Решение: включите Snap to Grid и перестройте треугольник с учётом осей X и Y.
• Фигура не замкнута. После удаления вершины контур может остаться открытым. Проверьте в правой панели: если есть значок «Open Path», соедините точки вручную с помощью инструмента Pen.
• Треугольник дрожит при масштабировании. Это происходит из-за нечётных координат (например, X=10.5). Исправьте положение точек, чтобы они были на целых значениях.
• Невозможно залить фигуру. Причина — некорректный векторный контур. Убедитесь, что все точки соединены и нет пересекающихся линий. Используйте функцию «Vector Operations → Join».

Как проверить целостность фигуры

В правой панели Properties найдите раздел «Vector network». Там должно быть указано: «Closed path». Если написано «Open path», значит, контур не замкнут. Щёлкните по значку карандаша рядом и вручную соедините начальную и конечную точки.

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

Прямоугольный треугольник — не просто геометрическая фигура. Он активно используется в UI/UX-дизайне:

• Как стрелка в выпадающих меню.
• В качестве маркера прогресса (например, в шагах настройки).
• В диаграммах и инфографике для обозначения роста или падения.
• Как часть логотипа или брендового элемента.

Например, в мобильном приложении треугольник может служить индикатором «раскрыть описание». Его часто поворачивают с помощью инструмента Rotate (R) — просто выделите фигуру и вращайте за угол.

Как повернуть треугольник

Выделите фигуру и нажмите R. Появятся маркеры вращения. Щёлкните и тяните за них. Чтобы повернуть точно на 90°, держите Shift. Альтернатива — ввести угол вручную в поле «Rotation» в правой панели.

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

Анна также отмечает, что в командной работе важно стандартизировать такие элементы. «Если один дизайнер рисует треугольник через Pen, а другой — через удаление вершины, могут возникнуть различия в точности. Лучше договориться о едином подходе или использовать Shared Library.»

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

Заключение

Создание прямоугольного треугольника в Figma — простая, но важная операция, требующая внимания к деталям. Независимо от выбранного метода — через инструмент Pen, преобразование прямоугольника или с помощью плагинов — ключ к успеху лежит в точности и соблюдении привязок.

• Используйте Pen с Shift для точного построения прямого угла.
• Преобразуйте прямоугольник, удалив одну вершину — быстрый способ для прототипов.
• Настройте сетку и привязки, чтобы избежать погрешностей.
• Применяйте плагины для автоматизации при частом использовании.
• Сохраняйте часто используемые фигуры как Components или в библиотеке.