Как перевернуть объект в фигме
Изображения в Figma: подробная инструкция по работе для новичков
Тема сегодняшней инструкции «Изображения в Figma». Разберемся как правильно работать с картинками и рассмотрим различные вопросы по этой теме от простого к сложному.
Оглавление статьи
Как вставить картинку в фигме
Вставить нужную картинку в Figma можно 4 разными способами.
С компьютера:
Выберете нужное изображение на вашем компьютере и поместите картинку в фигму простым перетаскиванием в ваш проект (зажав левую клавишу мыши).
С интерента:
Вы можете скопировать нужную картинку с любого сайта. Для этого наведите на нужную картинку и нажмите правую клавиши мыши. Выберите пункт «Копировать изображение». Перейдите в фигму и нажмите на клавиатуре 2 клавиши «Ctrl + V», чтобы его вставить.
Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.
Сделать скриншот:
Можно вставить снимок экрана в Figma. Для этого нужно сделать скриншот. Это легко реализовать с помощью различных программ, таких как: «Lightshot», «Joxi».
Через плагины:
Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.
Вставка изображений в фигуру (прямоугольник, круг)
Вы можете вставлять картинки в любые фигуры созданные в фигме. Это может быть круг, прямоугольник, квадрат, звезда, многоугольник и т.д. Также с помощью этого способа можно сделать фон картинкой в фрейме.
3 способа вставить изображение в любую фигуру в Figma.
Через правую панель:
Чтобы вставить изображение в фигуру через правую панель сделайте следующее:
Через инструмент «Place images»:
Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.
C помощью плагина:
Подробная инструкция по вставке изображений с помощью плагина Unsplash находится здесь.
Как обрезать изображения в Figma
Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.
Как сохранить картинку в фигме на компьютер
Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:
Подробнее об экспорте в различных форматах, читайте в этой статье.
Как размыть фото в фигме
Чтобы размыть изображения в Figma сделайте следующие шаги:
Как отразить фото в фигме
По горизонтали:
Для отражения изображений по горизонтали в фигме, нажмите на горячие клавиши «Shift + H». Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».
По вертикали:
Чтобы отразить картинку в Figma по вертикали выделите её и нажмите на 2 горячие клавиши «Shift + V». Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».
Как изменить прозрачность картинки
Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».
Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.
Как наложить текст поверх картинки в Figma
Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:
Как вырезать объект в фигме на фото и удалить задний фон
Чтобы вырезать объект в фигме и затем удалить у фото задний фон, воспользуйтесь инструкцией, которую я подготовил в отдельной статье и видео уроке.
Как удалить фото в Figma
Чтобы удалить не нужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.
В этой статье мы разобрали как работать с изображениями в Figma.
Как отразить элемент по горизонтали
Фигма позволяет быстро отразить любой элемент по горизонтали и вертикали.
Есть два способа отразить что-то в Figma по горизонтали.
Flip Horizontal
Команда Flip Horizontal доступна из контекстного меню и через сочетание клавиш Shift + H.
Отразить по горизонтали в Figma
Данная операция приводит к отражению элемента с полным сохранением пропорций в горизонтальной плоскости и размеров элемента.
Отраженный элемент (Flip Horizontal)
Изменение ширины перетаскиванием
Если вы наведете на грань элемента курсор, зажмете и переместите в горизонтальной плоскости, то вы измените ширину элемента. Если путь курсора пересечет другую горизонтальную грань, то вы «выверните» элемент наизнанку. При этом стоит учитывать, что пропорции элемента в таком случае будут произвольными, а высота — неизменна.
Если при этом вы зажмете Shift, то пропорции будут неизменны, а размеры элемента — произвольными.
Отраженный элемент (перетаскивание + Shift)
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию
Как работать с изображениями в Figma
Простая инструкция: как добавить изображение на макет и отредактировать его без «Фотошопа».
Meery Mary для Skillbox
В Figma очень удобно работать с изображениями: быстро обрезать, удалить фон или скорректировать цвет. А ускорить работу над ними помогут встроенные функции и плагин.
Как добавить изображение на макет
Перетащите изображение на макет с рабочего стола или из папки:
Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:
Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:
Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:
С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:
Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Настройки изображения
В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.
Fill — изображение полностью заполняет собой доступное пространство, в котором находится.
Fit — изображение заполняет пространство так, чтобы его было видно целиком.
Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.
Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.
Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.
Настройки цветокоррекции в Figma:
Маска слоя
С помощью маски слоя можно придать изображению нестандартную для Figma форму:
Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.
Полезные приёмы
Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.
Скопировать SVG-иконку с любого сайта в Figma можно через браузер:
Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.
Как установить плагин Remove BG:
Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.
Горячие клавиши в Figma
Ниже я привел скриншоты с разделами, а также с переводом.
Вкладка №1 (Основные параметры)
Вкладка №2 (Инструменты)
Вкладка №3 (Просмотр):
Вкладка №4 (Масштабирование):
Вкладка №5 (Инструмент “Текст”):
Вкладка №6 (Векторные изображения):
Работа с точками векторных изображений (Эти функции я не использую)
Вкладка №7 (Выделение):
Вкладка №9 (Редактирование):
Вкладка №10 (Трансформирование):
Вкладка №11 (Выравнивание):
Вкладка №12 (Компоненты):
Управление объектами в Figma
Итак, в начале мы рассмотрим, как осуществлять манипуляцию объектов в Figma. Для этого необходимо создать новый фрейм, и загрузить объекты в программу. Для создания нового фрейма (холста), выберите в верхней части меню вкладку «Frame». Далее в рабочей области появится новый холст, размер которого вы можете задать либо вручную, либо увеличить при помощи левой кнопки мыши. Именно в данном фрейме вы и будете создавать свой проект. Есть горячая клавиша «F», при помощи которой вы сможете создать новый фрейм.
Для того чтобы добавить объект в фрейм, можно просто перетянуть файл.
Для взаимодействия с загруженными элементами можно использовать левую кнопку мыши. Достаточно просто зажать объект левой кнопкой, и переместить в любое место экрана. Чтобы уменьшить или увеличить объект пропорционально используйте углы выделений. Ниже вам будет представлен размер объекта. Кроме того, для изменения размера можно воспользоваться ручным вводом размеров в левой части интерфейса. Так вы сможете задать точный размер, который вам необходим.
Менять размер можно не только пропорционально, но и по длине или ширине потянув за соответствующую сторону левой кнопкой мыши. Чтобы растягивание было пропорциональным выполняйте действия с клавишей «Shift».
Также есть функция вращения объекта. Эта функция появится при наведении курсора мыши на угол объекта. Если использовать клавишу «Shift», то вращение будет составлять по 15 градусов. Чтобы задать градус вращения вручную, можно воспользоваться более точными настройками в левой части меню.
Для того чтобы полностью продублировать объект, выделите его левой кнопкой мыши, и зажмите клавишу «Alt». Таким образом вы создадите точную копию выделенного объекта.
Для манипуляции с объектом важно знать назначение двух инструментов, которые находятся в верхней части меню под вкладкой в виде стрелочки. Это «Move» и «Scale».
По умолчанию будет стоять инструмент Move, горячая клавиша которого «V». Перевод слова «Move» – перемещение. При помощи данного инструмента вы просто можете перемещать объекты таким образом, как мы рассмотрели выше.
Слово «Scale» – масштабирование. Горячая клавиша – «K». При выборе этой вкладки вам будут доступны те же возможности манипуляции объекта, как и при «Move», однако разница в том, что с ее помощью увеличение или уменьшение объекта будет происходить пропорционально. Масштаб вы также можете задать в левой части интерфейса.
Лупа и рука
Это еще два полезных инструмента, которые необходимы при манипуляции объектов в Figma. Если зажать горячую клавишу «Z», то появится инструмент «Лупа», при помощи которого вы сможете увеличивать свой проект. Если нажать на левую кнопку мыши, то проект увеличится. Это будет происходить с каждым нажатием. Для того чтобы отдалить объект необходимо использовать клавишу «Alt». При использовании комбинации клавиш «Shift + Z», вы сможете перемещать проект стрелочками лево право, и вверх низ. Помимо этого, зум объектов происходит при зажатии клавиши «Ctrl» и прокручивании колесика мыши. Вперед – это увеличение, а назад – отдаление. Инструмент лупа может быть полезным для работы с мелкими деталями проекта. При увеличении вы сможете добиться точности работы с объектами, а при отдалении объектов, просматривать полную картину того, что у вас поучается.
Для использования инструмента «Рука» вы можете использовать клавишу пробел. Зажав эту клавишу, а также используя левую кнопку мыши вам будет доступно перемещение всего проекта. Это полезная функция при работе сразу с несколькими фреймами. Кроме того, вы можете перемещать при помощи «Руки» сделанное вами выделение.
Выделение
В Figma есть несколько способов выделения объектов. Первый из них – это ручное выделение мышкой тех элементов, которые вам необходимы. Но иногда при помощи этого метода невозможно сделать выборочное выделение. Поэтому в левой части интерфейса в созданном фрейме будет список всех объектов, которые в нем содержатся. Как видно в примере на иллюстрации – это две картинки и текст. Таким образом, используя клавишу «Ctrl» можно выбрать объекты, которые вы хотите выделить.
Существуют дополнительные параметры выделения, которые находятся во вкладке «Edit», находящиеся в верхнем меню.
Рассмотрим все виды выделений в данном разделе:
Итак, это был первый урок в Figma, из которого вы узнали, как компоновать и выделять элементы в фрейме.
Полезные ссылки: