Как перевести растровое изображение в вектор и редактировать его в фигме

Что такое растровые и векторные изображения

Растр и вектор — это два основных типа компьютерной графики, которые есть не только в фигме, но и в других редакторах, таких как фотошоп и иллюстратор.

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

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

Плагины фигмы чтобы перевести растровую пнг картинку или фото в вектор

В самой фигме такой функции нет, однако для этой цели существуют различные плагины, например Vectorized (PNG to SVG) или Codia AI VectorMagic: Image to Full-Color Vector/PNG to SVG. Работают они не идеально, но в большинстве случаев выдают вполне приемлемый результат.

Помимо плагинов фигмы, для перевода растра в вектор можно также воспользоваться и сторонними сервисами, их легко найти в поиске по запросу PNG to SVG. Одним из лучших на мой взгляд является конвертер от Adobe Express.

Как перевести текст в вектор в фигме горячими клавишами

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

Если вам нужно превратить текст в обычный вектор, сделать это можно с помощью функции Flatten в меню правой кнопки мыши или с помощью горячих клавиш Alt Shift F (на Windows) или Option Shift F (на Mac).

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

Как преобразовать векторное изображение в растр (пнг)

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

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

Как объединить две векторные фигуры в одну в фигме

Существует несколько способов. Первый — одновременно выделить оба слоя и сделать Union Selection на правой панели фигмы или с помощью горячих клавиш Alt Shift U (на Windows) или Option Shift U (на Mac OS). В этом случае фигуры объединятся в одну, но на панели слоев останется возможность выделить и редактировать их по отдельности.

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

Третий способ — сначала применить Union Selection, а затем — Flatten. Такой метод объединит две фигуры в одну с общим векторным контуром.

Как обрезать, разделить и разрезать вектор в фигме

Вырезать одну векторную фигуру из другой можно с помощью функций Subtract selection, Intersect selection или Exclude selection (все они находятся там же, где и Union selection, о котором мы говорили в прошлой части урока). Горячие клавиши также работают, только вместо U нужно нажать S, I  или E соответственно.

Разрезать и разделить вектор на несколько частей (каждая из которых станет отдельным слоем) можно с помощью плагина Scissors (ножницы). Нужно просто нарисовать линию, выделить её одновременно с векторной фигурой и запустить плагин.

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

Как изменить вектор в фигме, сделать заливку, удалить или добавить точку

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

Нарисовать новую линию или добавить точку можно инструментом перо (Pen Tool). Им же можно удалять лишние точки, если зажать Alt (на Windows) или Option (на Mac OS). Инструмент Bend tool позволяет изменять углы и дуги фигуры, а Paint Bucket — закрасить замкнутый контур вектора или наоборот убрать заливку.

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

Как в фигме редактировать растровые картинки и фото

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

Более сложные изменения можно внести в фотографию или растровую иллюстрацию только с помощью плагинов, например Photopea, которая по сути является аналогом фотошопа в фигме.

Как в фигме сохранить изображение в растровом (пнг) или векторном (свг) формате

Для сохранения нужно просто выделить нужный слой и в нижней части интерфейса фигмы на панели справа нажать плюсик в графе Export. В появившемся поле выбрать нужный формат и нажать кнопку Export. В итоге картинка сохранится на ваш компьютер как растр (если вы выбрали PNG или JPG) или как вектор (если выбрали SVG или PDF).