Как обрабатывать картинки в Figma

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

Базовые инструменты для обработки картинок

Для начала добавляем картинку: находим нужный файл на ПК и перетаскиваем его в рабочее пространство Figma.

На панели справа можно найти инструменты для работы с изображением. Дальше разбираем их.

Размеры. В разделе Layout настраиваем высоту и ширину изображения. Квадратный значок справа означает связь сторон: т.е. при изменении одного параметра автоматически меняется и другой. Это помогает сохранять пропорции. 

Прозрачность и радиус скругления углов. Эти два поля находятся в разделе Appearance. 

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

Редактирование изображения. В разделе Fill есть один элемент — Image, т.е. наша картинка. При нажатии на Image открывается окошко с параметрами редактирования.

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

В правом верхнем углу окошка находится значок в виде капли — Blend mode. Там можно выбрать готовые сеты характеристик для изображения: например, затемнение, выгорание цвета, мягкий свет.

Над картинкой можно заметить строку с раскрывающимся меню — это типы расположения.

Fill — изображение заполняет все пространство. Это тип используется по стандарту.

Fit — вписывается в форму.

Crop — обрезка картинки.

Tile — картинка дублируется несколько раз и «выкладывается» плиткой.

На практике это работает так:

Границы. Stroke — это границы, или рамка вокруг изображения. Можно задавать цвет, прозрачность, толщину.

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

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

Для скачивания переходим в раздел Export. Выбираем формат файла: PNG, JPEG, SVG или PDF. Указываем размер: по стандарту стоит 1х — исходный размер файла, но его можно уменьшить или увеличить.

Когда все готово, нажимаем Export *название файла*:

Работа с несколькими картинками

Разбираем инструменты для работы с двумя и более изображениями. 

Для начала две картинки можно объединить в группу или фрейм. 

Group Selection — изображения остаются на своих позициях, но объединяются в одно. Их можно одновременно перемещать и редактировать как единое целое.

Frame Selection — при объединении во фрейм картинки оказываются внутри одного рабочего поля. Фрейм — основной инструмент для дизайна в Figma, именно в нем создают композицию.

Изображения можно выравнивать по центру или краям фрейма:

Если выбрать несколько картинок, на панели справа появляются так называемые Boolean Operations — варианты взаимодействия между изображениями.

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

Subtract — вычитание верхней фигуры. Можно «откусить» часть нижнего элемента.

Intersect — пересечение фигур. Убирает все, кроме пересекающейся части.

Exclude — противоположность Intersect. Оставляет все, кроме области пересечения.

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

Будьте внимательны: оригинальные слои безвозвратно удаляются после применения функции. Сохраняйте резервную копию и используйте инструмент только на финальных этапах работы.

В фигуры также можно вставлять картинки. Для примера возьмем прямоугольник и треугольник, объединим их через Union, чтобы получился домик. Дальше переходим в раздел Fill, кликаем на Image. В открывшемся окошке находим добавление картинки — четвертая по счету иконка.

Загружаем изображение и получаем результат — кот в домике:

Обработка векторных изображений

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

Для примера мы взяли цветную иконку из сети:

Мы разобрали основные инструменты Figma для обработки картинок. Но еще в графическом редакторе есть плагины, которые могут пригодится в работе. 

Например:

1. Photos — библиотека стоковых фото.
2. Icons8 — множество иконок в разных цветах, стилистиках.
3. Downsize — сжатие и изменение размера изображений.
4. Icons8 Background Remover — удаление фона.
5. Image Cutter — разрезание изображения на части.

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