Как сделать вектор в Figma: рисуем и редактируем векторные изображения

Векторные инструменты в Figma

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

В Figma есть несколько инструментов для работы с векторной графикой. Какой из них выбрать, зависит от задачи: для точных контуров удобнее «Перо», для свободного рисования — «Карандаш», а простые формы быстрее собирать из готовых фигур.

Перо

Инструмент Pen, или «Перо», позволяет создавать векторные контуры из отдельных опорных точек. Выберите его на панели инструментов или нажмите клавишу P, затем поставьте точки на холсте. Таким способом можно рисовать как открытые линии, так и замкнутые фигуры.

Прямые отрезки получаются при последовательной установке точек, а для кривых используются кривые Безье: направление и форму изгиба можно менять с помощью управляющих маркеров. После создания контура в правой панели настраиваются его цвет, толщина и другие параметры обводки, а для замкнутой фигуры можно настроить еще и заливку. В Figma такие контуры входят в векторные сети — Vector Networks, которые могут состоять из нескольких соединенных и даже разветвляющихся путей.

Геометрические фигуры

Если нужно быстро нарисовать простую фигуру в Figma, необязательно строить ее «Пером». В редакторе есть готовые инструменты Rectangle, Line, Arrow, Ellipse, Polygon и Star — прямоугольник, линия, стрелка, эллипс, многоугольник и звезда. Например, треугольник можно создать с помощью многоугольника с тремя сторонами.

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

Карандаш

Инструмент Pencil, или «Карандаш», подходит для свободного рисования: им удобно создавать неровные линии, наброски, декоративные детали и абстрактные формы. Пользователь ведет курсор по холсту, а Figma автоматически размещает вдоль нарисованной линии векторные точки.

В Figma Draw для иллюстраций также доступен инструмент Brush — «Кисть». И «Карандаш», и «Кисть» создают векторные сети, которые после рисования можно открыть в режиме редактирования и скорректировать вручную.

Как рисовать векторные изображения в Figma

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

Дальше можно комбинировать разные векторные инструменты. Базовые элементы быстрее создать с помощью геометрических фигур, точные и сложные контуры — «Пером», а свободные линии — «Карандашом» или «Кистью». Цвет объекта задается через Fill, параметры контура — через Stroke.

Не обязательно сразу объединять все элементы. Пока изображение находится в работе, удобнее сохранять отдельные части на разных слоях: так проще менять их размер, положение, цвет и форму. Когда базовая композиция готова, отдельные векторные элементы можно отредактировать точнее.

Как редактировать вектор в Figma

Чтобы изменить векторное изображение в Figma, выделите нужный объект и нажмите Enter или дважды щелкните по нему. Откроется режим редактирования вектора: на холсте появятся точки и пути, из которых построена фигура. Можно перемещать отдельные точки, менять положение участков контура и редактировать сразу несколько элементов.

Для выбора группы точек и путей удобно использовать инструмент Lasso. В актуальной версии Figma в режиме редактирования также доступны специальные векторные инструменты, в том числе Shape Builder, Cut и Bend. Они позволяют изменять уже созданные формы, не перерисовывая их с нуля.

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

Как закруглить линию или угол в Figma

Способ закругления зависит от типа объекта. Если нужно скруглить угол замкнутой векторной фигуры, перейдите в режим редактирования, выделите нужную точку и измените параметр Corner radius в правой панели. Радиус можно задать для всей фигуры или только для отдельных точек.

У открытой линии Corner radius не работает так же, как у замкнутой фигуры. Чтобы сделать закругленным конец линии, в настройках Stroke выберите тип окончания Round. Если нужно сгладить место соединения двух отрезков, используется настройка соединения линий Rounded.

Как объединять векторные элементы

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

Команда Flatten («Сведение») работает иначе: она объединяет выбранные слои в один векторный слой. Это удобно, когда необходимо получить единый векторный объект, но использовать Flatten слишком рано не стоит: после сведения исходные самостоятельные слои уже нельзя просто разделить обратно.

Экспорт векторной графики из Figma

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

Для растрового экспорта подойдут PNG и JPEG. PNG удобно использовать, если нужен прозрачный фон: при экспорте отдельного объекта прозрачность сохранится, если под ним нет фонового слоя. Figma также позволяет экспортировать материалы в PDF.

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

Частые ошибки при работе с вектором в Figma

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

Ошибка №1: использовать слишком много опорных точек. Чем их больше, тем сложнее получить плавный контур и тем труднее потом редактировать вектор. Для точных форм лучше начинать с минимального количества точек и добавлять новые только там, где без них нельзя передать нужный изгиб.

Ошибка №2: слишком рано применять функцию Flatten. Пока изображение не закончено, обычно удобнее хранить его части на отдельных слоях или объединять их в группу. Так можно в любой момент вернуться к конкретному элементу и изменить его.

Ошибка №3: путать скругление угла фигуры и закругление конца линии. Для углов используется Corner radius, а для открытых линий — настройки окончания и соединения Stroke. Из-за этой разницы попытка увеличить радиус у обычной открытой линии может не дать ожидаемого результата.

Ошибка №4: работать неправильным инструментом. «Карандаш» удобен для свободного движения руки, а «Перо» — когда требуется контролируемая геометрия и точные кривые. Попытка построить сложный аккуратный контур большим количеством штрихов карандаша обычно только усложняет дальнейшее редактирование.

FAQ