Красивая изогнутая стрелка — незаменимый элемент для интерфейсов, презентаций и схем. В этой инструкции мы разберем, как быстро создать идеальную стрелку с поворотом в Figma с помощью векторного пера.
Видеоинструкция
Пошаговая инструкция по созданию стрелки
Шаг 1: Активация инструмента Перо
Откройте ваш проект в Figma. Нажмите горячую клавишу P, чтобы активировать инструмент Pen (Перо).
Шаг 2: Рисование изогнутой линии
Поставьте первую точку (начало стрелки), затем кликните во втором месте и, не отпуская кнопку мыши, потяните курсор в сторону. Появятся направляющие («усы»), которые создадут плавный изгиб. Нажмите Enter для завершения рисования контура.
Шаг 3: Добавление наконечника
Выделите созданную линию. В правой панели настроек найдите блок Stroke. Кликните на выпадающее меню конца линии (по умолчанию стоит None) и выберите Line arrow или Triangle arrow для создания наконечника.
Шаг 4: Поворот и тонкая настройка
Чтобы повернуть стрелку, наведите курсор на угол рамки выделения, пока он не превратится в изогнутую двустороннюю стрелку, и потяните. Для точного поворота с шагом в 15 градусов удерживайте клавишу Shift.
Внимание: Если стрелка деформируется при масштабировании, убедитесь, что вы не искажаете векторные точки внутри режима редактирования контура. Используйте инструмент Scale (K) для пропорционального изменения размера всей стрелки целиком.
Частые ошибки / Устранение неполадок
- Стрелка изгибается неровно: Выделите вектор двойным кликом, выберите опорную точку и зажмите Ctrl (или Cmd на Mac), чтобы сбросить направляющие и сделать угол острым, либо плавно потяните за «усы» для настройки скругления.
- Наконечник стрелки слишком мелкий: Размер наконечника напрямую зависит от толщины линии. Увеличьте параметр Stroke width в правой панели, чтобы сделать стрелку крупнее.
- Не получается повернуть объект: Убедитесь, что вы вышли из режима редактирования вектора (для этого нажмите Esc или Enter).
Дополнительно
Если вам нужно реализовать такую стрелку в коде (SVG), используйте следующий шаблон:
<svg width='100' height='100' viewBox='0 0 100 100'>
<path d='M10,80 Q50,10 90,80' fill='none' stroke='black' stroke-width='3' />
</svg>Часто задаваемые вопросы
Как сделать стрелку идеально симметричной?
Используйте сетку (Layout Grid) и зажимайте клавишу Shift при редактировании опорных точек вектора.
Можно ли сохранить созданную стрелку для повторного использования?
Да, выделите готовую стрелку и нажмите комбинацию клавиш Ctrl + Alt + K (Cmd + Option + K на Mac), чтобы создать компонент.
