Работа с изображениями

В этом разделе мы узнаем как работать с изображениями в фигме

Добавьте одно или несколько изображений в макет через панель File, инструмент Place Image или просто перетащите их с рабочего стола.

В Фигме фото вставляется как shape, а не как отдельный объект. По сути мы заливаем изображением фрейм — прямоугольник. Поэтому, мы можем изменить заполнение фрейма параметрами Fill, Fit, Crop, Tile. Чтобы вывести функциональную панель, нажмите на фотографию 2 раза.

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

С включенным параметром Fit, изображение отображается во фрейме полностью. Если пропорции фрейма не совпадают с пропорциями картинки, в нём появится пустое пространство.

С включенным параметром Crop, можно приблизить нужный ракурс изображения, обрезав «лишние» части.

С включенным параметром Tile, вы сможете создать паттерн или узор.

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

Чтобы добавить изображению градиент, используйте знак «+» в панели свойств. Выберите стиль градиента: Linear (Линейный), Radial (Радиальный), Angular (Угловой) или Diamond (Ромбовидный).

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

Вы можете добавлять цвета или другие фотографии к изображению с инструментом «смешивание слоёв». Например, чтобы попасть в фирменный стиль сайта или добавить фотографии индивидуальности.

Применение маски

Вы можете применять векторные объекты к фотографиям и использовать их как маски. Чтобы сделать маску в Фигме, создайте объект, перенесите слой ниже фотографии. Выделите оба слоя и выберите панель Object → Use as mask (горячие клавиши для Windows: Ctrl + Alt + M, для Mac OS: Cmd + Opt + M).

Шаг 1. Создайте векторный объект и поместите его на фото.

Шаг 2. Выделите векторный объект, нажмите на ПКМ и выберете в выпадающем меню пункт Use as mask.

Шаг 3. Поместите слой с фото в маску (Mask group).

Результат

Плагины иконок

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

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

Как найти плагин

В окне с инструментами (там же где Фрейм, Прямоугольник, Перо и так далее) найдите иконку Resources (Горячая клавиша Shift + I)
Переключитесь на табу Plugins
Введите назание в поиск
Кликните на нужный вам плагин и откроется его карточка
Нажмите Run

Home