Как в фигме отразить картинку

Для этого нам понадобиться использовать клавиатурные сокращения Shift + H (отразить картинку по горизонтали), Shift + V (отразить по вертикали). Либо использовать в меню дублирующие пункты.

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

Как вставить картинку в фигме

Самый простой способ – просто перетащить изображение в окно проекта, и оно импортируется со своими оригинальными размерами.Также есть способ вставить через фигуры. Об этом ниже.

Как обрезать картинку в фигме

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

Для этого нам понадобиться:

  1. Перенести картинку в проект (см. выше)
  2. Создать фигуру по размеру нужно обрезки
  3. Выделяем оба слоя, используем клавиатурное сокращение Ctrl + Alt + M – маска готова.

Важно, чтобы в иерархии картинка была выше, чем фигура.

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

Как вырезать объект в фигме

Чтобы не пользоваться дополнительными инструментами (Photoshop или онлайн-сервисы) - воспользуемся внутренними возможностями программы

  1. Разместите изображение в рабочем поле
  2. При помощи пера, поверх картинки, повторите контур той части изображения, которую нужно обрезать
  3. Залейте получившуюся область любым цветом
  4. Разместите векторный объект ниже по иерархии
  5. Выделите изображение и векторный объект
  6. Примените к обоим слоя свойство "Use as Mask" (Клавиатурное сокращене Ctrl + Alt + M)

Наглядно процесс можно посмотреть на картинке ниже

как вырезать объект в фигме


Важно! Для того, чтобы на практике понять, какими функциями обладает программа - рекомендую ознакомиться с готовыми шаблонами Figma. В них вы сможете отработать новые для вас функции, объекты, фишки и т.д. Ссылки на шаблоны: ссылка 1 и ссылка 2