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

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

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

Перетащите изображение на макет с рабочего стола или из папки:

Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:

Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:

Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:

1. Создайте несколько произвольных фреймов на макете.

2. Нажмите на иконку , выберите пункт File и нажмите на Place Image. Или зажмите клавиши Ctrl (⌘) + Shift + K.

3. В появившемся меню выберите любые изображения.

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

С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:

1. Выберите ваш фрейм или фигуру.

2. На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу нажмите .

3. В том же меню нажмите на серо-белую картинку и выберите любое изображение на компьютере.

Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.

Настройки изображения

В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.

Свойства заливки:

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

Fit — изображение заполняет пространство так, чтобы его было видно целиком.

Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.

Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop или Lightroom.

Читайте также:

Цветокоррекция в Photoshop — подробная инструкция

Настройки цветокоррекции в Figma:

Exposure — экспозиция.

Contrast — контраст.

Saturation — насыщенность.

Temperature — температура.

Tint — оттенок.

Highlights — интенсивность света.

Shadows — интенсивность тени.

Маска слоя

С помощью маски слоя можно придать изображению нестандартную для Figma форму:

1. Создайте любую фигуру, выберите изображение на макете и расположите их друг на друге. Проследите, чтобы на панели слоёв изображение было выше фигуры.

2. Зажмите Shift, выделите фигуру и изображение, затем на панели инструментов нажмите на иконку .

3. Чтобы изменить отображаемую часть изображения, просто выделите её на панели слоёв и измените размер на холсте.

Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.

Полезные приёмы

Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.

Скопировать SVG-иконку с любого сайта в Figma можно через браузер:

1. Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.

2. В окне с кодом на панели сверху нажмите на значок  и выберите нужную иконку на сайте.

3. В HTML-коде выделится тег <path>, прямо над ним будет <svg> — нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.

4. Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.

Быстро вырезать объект поможет плагин Icons8 Background Remover, который автоматически удаляет фон.

Как установить плагин Background Remover:

1. Зайдите на страницу плагина и установите его, нажав Install.

2. В файле выберите изображение, кликните по нему правой кнопкой мыши и перейдите Plugins → Saved plugins → Icons8 Background Remover.

3. Дождитесь, пока плагин сделает своё дело.

Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает неидеально. Но если вам нужно просто показать идею, то Background Remover поможет сэкономить много времени.