В первую очередь Figma предназначена для создания макетов интерфейсов и векторных иллюстраций. Но в программе также есть базовый функционал для редактирования изображений: можно обработать фото для сайта, не открывая Photoshop.
Содержание
- Как вставить изображение в макет Figma: пошаговая инструкция
- Как масштабировать и обрезать изображения в Figma правильно
- Дополнительные функции редактирования изображений в Figma
- Как использовать маску слоя в Figma: просто о сложном
- Лайфхаки и приёмы работы с изображениями в Figma
Как вставить изображение в макет Figma: пошаговая инструкция
Есть несколько способов вставить картинку в файл Figma.
Можно перетащить изображение из папки компьютера прямо на рабочую область.
Можно воспользоваться нижней панелью инструментов: вызвать контекстное меню рядом с иконкой квадрата и выбрать последний пункт Image/Video. Так вы откроете окно для выбора изображения. Это же действие удастся выполнить горячими клавишами Ctrl + Shift + K.
Если одновременно выделить несколько файлов, зажимая Ctrl, получится вставить их в макет все сразу. Картинки будут добавляться последовательно по клику: можно выбрать для каждой нужное место. В нижней части интерфейса появится окно с подсказкой и кнопкой Place all: если нажать на нее, все изображения одновременно появятся по центру экрана.
Если при добавлении картинки кликнуть на ранее созданный фрейм, изображение окажется вставленным в него. Если кликнуть на фигуру, фотография станет ее заливкой — это отобразится в правой панели в меню Fill.
Наконец, можно скопировать изображение из папки или из другого файла Figma с помощью клавиш Ctrl + С. А затем вставить в нужное место: зажать Ctrl + V или кликнуть правой кнопкой мыши на рабочую область и в открывшемся меню выбрать Paste here.
Как масштабировать и обрезать изображения в Figma правильно
Чтобы начать работу со вставленной картинкой, нужно кликнуть на нее левой кнопкой мыши. Вокруг активного изображения появится голубая рамка, в углах будут белые точки, а внизу вы увидите указание размера в пикселях.
Масштабирование. На панели справа, в блоке Layout, рядом со значениями ширины и высоты есть квадратная иконка — Lock Aspect Ratio. Если эта опция установлена, иконка будет подсвечена голубым. Тогда картинку можно масштабировать, просто вытягивая за один из углов в нужную сторону.
Если же отключить эту опцию, кликнув на иконку, значок станет серым. Тогда при вытягивании за угол изображение будет деформироваться: становиться более узким или широким. В этом случае пропорционально масштабировать картинку можно с зажатым Shift.
Обрезка. Чтобы обрезать изображение по одной из сторон, достаточно кликнуть левой кнопкой мыши вблизи нужной стороны и потянуть с зажатым Ctrl. Если не зажимать Ctrl, картинка будет растягиваться или сжиматься по одной из сторон.
Если дважды кликнуть на картинку, вы увидите ее целиком: за рамками обреза она будет полупрозрачной. Можно зажать левую кнопку мыши и тянуть в нужную сторону, чтобы в рамке оказался желаемый фрагмент изображения.
Справа вы увидите меню с настройками:
- Fill — изображение будет минимально обрезано рамкой, только для изменения пропорций.
- Fit — изображение будет вписано в рамку, но не обрезано. Если пропорции не совпадают, по какой-то из сторон появятся пустые поля.
- Crop — основной инструмент обрезки. Потянув за курсор, можно свободно менять и положение изображения, и его размер.
- Tile — можно задать в процентах, какая площадь изображения будет помещена в рамку.
Скругление углов. За это отвечает иконка с четырьмя уголками в блоке Appearances на правой панели. По умолчанию значок серого цвета — это значит, что все углы будут изменяться синхронно. Можно кликнуть по одной из белых точек на картинке и вести курсор к центру изображения до тех пор, пока радиус скругления не будет вас устраивать. Если при этом зажимать Alt, скругляться будет один выбранный угол, а остальные останутся без изменений. Также в поле около иконки можно ввести точное значение скругления для всех углов.
Если кликнуть на иконку с уголками, появится синяя подсветка — так вы активируете опцию Individual Corners. Откроются четыре новых поля, где можно ввести отдельное значение скругления для каждого угла. Теперь, если кликнуть по одному из углов на картинке и тянуть его к центру, скругляться будет только один выбранный угол. А если захотите таким методом скруглить все углы, нужно зажимать Alt.
Дополнительные функции редактирования изображений в Figma
Прозрачность. Изменяется в меню Appearance. В левом верхнем поле по умолчанию стоит 100% непрозрачность. Можно ввести любое другое значение, и картинка изменится.
Яркость, контрастность и цветокоррекция. Эти настройки появятся, если дважды кликнуть на картинку. Можно изменить экспозицию, контрастность, насыщенность, температуру, добавить цветовой оттенок, сделать свет более ярким или тени более глубокими. Меню не такое обширное, как в Photoshop, но для базовой обработки опций достаточно.
Режимы наложения. В меню сверху справа, прямо под иконкой с крестиком, есть значок с каплей. Это режимы наложения, знакомые продвинутым пользователям Photoshop. Картинку можно поместить поверх фона — другого изображения или цветной фигуры. Например, создать прямоугольник, залить цветом и поэкспериментировать. Чтобы фон оказался под картинкой, нужно кликнуть на объект правой кнопкой мыши и выбрать опцию Send to back.
Разные режимы наложения будут менять цвета на картинке и ее контрастность.
Поворот изображения. Самый простой способ — кликнуть вблизи угла картинки и начать двигать курсором в нужную сторону. При зажатом Shift можно делать фиксированные повороты по 15 градусов. Одновременно в меню Position на правой панели будет показано, на сколько градусов вы повернули картинку. Если нужны точные значения в градусах, их можно вписать в соответствующие поля.
Отражение. Горячие клавиши Shift + H помогут отразить картинку по вертикали, а Shift + V — по горизонтали. Также можно кликнуть по картинке правой кнопкой мыши и воспользоваться меню: пункты Flip horizontal и Flip vertical находятся в самом конце.
Как использовать маску слоя в Figma: просто о сложном
Маска позволит вставить изображение в нестандартную рамку, которую вы сами нарисуете. Наример, можно создать фигуру, они доступны в нижней панели меню.
Правее от инструмента Shape Tools с фигурами есть инструмент Pen («Перо»). С его помощью можно нарисовать произвольную форму.
Чтобы маска слоя работала, важно, чтобы у фигуры была заливка. По умолчанию при работе «Пером» появляется только контур. Поэтому нужно найти меню Fill на правой панели и выбрать любой цвет.
Чтобы сделать маску слоя, сначала надо наложить изображение поверх фигуры. Если фигура получается впереди, ее следует переместить: кликнуть правой кнопкой мыши и выбрать пункт Send to back — эту функцию мы уже упоминали.
Далее нужно выделить одновременно фигуру и картинку. Для этого кликните левой кнопкой мыши на любую точку рабочей области и тяните курсор так, чтобы оба объекта попали в синее поле. Также можно выделить фигуру и изображение, последовательно кликнув на них с зажатым Shift.
Когда объекты выделены, нужно найти иконку с полумесяцем внутри круга, она расположена в верхней части на панели справа. Кликнув на значок, вы вставите изображение в рамку фигуры.
Маску слоя легко отменить: если повторно кликнуть на иконку, вы снова получите целое изображение. Картинку можно перемещать внутри фигуры, для этого надо дважды по ней кликнуть и потянуть в нужную сторону.
С помощью маски слоя также получится убрать фон с некоторых фотографий. Для этого придется аккуратно выделить все нужное «Пером». Способ подходит, если на фото простые объекты с гладкими контурами.
Лайфхаки и приёмы работы с изображениями в Figma
Обводка. Ее можно добавить в меню Stroke на левой панели: настроить цвет, толщину и местоположение контура — внутри картинки, снаружи или по центру.
Эффекты. Меню эффектов расположено чуть ниже. Для изображений доступны те же опции, что и для векторных фигур: подсветка, тень и разные виды размытия.
Настройки экспорта. Для сохранения изображения доступны четыре формата: PNG, SVG, JPEG или PDF. Также можно увеличить или уменьшить изображение. По умолчанию стоит параметр «1х» — c ним картинка при экспорте сохранит свой размер. Вручную можно задать любые другие значения, например «3х» или «0,5х».
