Figma как вставить картинку в фигуру

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

Без картинок в дизайне никуда. Давайте посмотрим, какие инструменты предлагает Figma для работы с изображениями.

Добавление изображения в макет

1. Drag and Drop.

Просто закиньте изображение на рабочую область. Самый простой и универсальный способ.

2. Copy/Paste.

Скопировать и вставить через буфер обмена. Копируете картинку, например из браузер или из файловой системы компьютера, Cmd+C, и вставляет в Figma Cmd+V.

3. Используя пункт меню Place Image (или сочетанием клавиш Cmd+Shift+K).

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

Удобно вставлять сразу несколько изображений.

4. Заливка фигуры картинкой.

Рисуем любую фигуру. В правом баре программы кликаем на цвет заливки и видим окно выбора цвета. В заголовке окна есть выпадающий список. В нем вместо Solid (сплошная заливка) выбираем Image. Появится шахматная заливка прямоугольника, это означает, что ваше изображение пока не выбрано. Выбираем изображение, нажав на кнопку Choose Image.

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

Стоит заметить, что Figma — это не графический редактор. Здесь вы не сможете редактировать изображения в полной мере, для этих целей в нашем арсенале есть Photoshop.

Давайте использовать инструменты по назначению!☝️

В основе любого изображения в Figma лежит фигура, а само изображение является заливкой этой фигуры.

Всего существует 4 вида заливки:

1. Fill.Изображение заполняет фигуру полностью, при этом оно обрезается
2. Fit.Изображение заполняет фигуру, при этом его видно целиком.
3. Crop.Позволяет выбрать область изображения для отображения.
4. Tile.Замостить фигуру изображением, паттерн.

В окне редактирования можно быстро поправить экспозицию, контрастность, насыщенность, температуру, повернуть изображение, или изменить способ наложения (капелька рядом с крестиком окна)

Маскирование��‍♀️

Если вам нужна круглая картинка, не обязательно рисовать круг, просто установите большой Corner Radius вашему изображению.

Если нужна нестандартная маска, то нарисуйте нужную вам фигуру, выделите слой с маской и вашим изображением и нажмите Cmd+Shift+M или кликните по иконке маски в верхнем баре программы.

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

Как правильно обрезать, вставить, трансформировать изображения в программе Figma.

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

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

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

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

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

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

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

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

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

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

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

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

Изображения в Figma: подробная инструкция по работе для новичков

Тема сегодняшней инструкции «Изображения в Figma». Разберемся как правильно работать с картинками и рассмотрим различные вопросы по этой теме от простого к сложному.

Оглавление статьи

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

Вставить нужную картинку в Figma можно 4 разными способами.

С компьютера:

Выберете нужное изображение на вашем компьютере и поместите картинку в фигму простым перетаскиванием в ваш проект (зажав левую клавишу мыши).

С интерента:

Вы можете скопировать нужную картинку с любого сайта. Для этого наведите на нужную картинку и нажмите правую клавиши мыши. Выберите пункт «Копировать изображение». Перейдите в фигму и нажмите на клавиатуре 2 клавиши «Ctrl + V», чтобы его вставить.

Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.

Сделать скриншот:

Можно вставить снимок экрана в Figma. Для этого нужно сделать скриншот. Это легко реализовать с помощью различных программ, таких как: «Lightshot», «Joxi».

Через плагины:

Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.

Вставка изображений в фигуру (прямоугольник, круг)

Вы можете вставлять картинки в любые фигуры созданные в фигме. Это может быть круг, прямоугольник, квадрат, звезда, многоугольник и т.д. Также с помощью этого способа можно сделать фон картинкой в фрейме.

3 способа вставить изображение в любую фигуру в Figma.

Через правую панель:

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

1. Выберите нужную фигуру.
2. В правой панели нажмите на цвет.
3. Кликните на «Fill» и выберите из списка «Image».
4. Нажмите на кнопку «Place image».
5. Выберите изображение для вставки на компьютере.

Через инструмент «Place images»:

Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.

1. Выберите в панели сверху, слева инструмент «Place images». Он находится во вкладке с фигурами (Shape tools).
2. Найдите на рабочем столе нужные изображения и выделите их для вставки.
3. Рядом с курсором появится количество вставляемых изображений. Вставьте их в нужные фигуры кликнув на них левой клавишей мыши.

C помощью плагина:

Подробная инструкция по вставке изображений с помощью плагина Unsplash находится здесь.

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

Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.

1. Выделите нужную картинку
2. Активируйте инструмент «Crop image»
3. Уменьшите изображение, выбрав какой-либо край с зажатой клавишей мыши

Как сохранить картинку в фигме на компьютер

Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:

1. Выделите нужную картинку, в панели справа,
2. Напротив надписи «Export» нажмите на пиктограмму «+».
3. Выберите нужный формат для сохранения (JPG, PNG, SVG, PDF).
4. Нажмите на кнопку экспорта и сохраните на компьютер в нужное место.

Подробнее об экспорте в различных форматах, читайте в этой статье.

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

Чтобы размыть изображения в Figma сделайте следующие шаги:

1. Выберите нужную картинку.
2. В правой панеле напротив надписи «Effects» нажмите на иконку плюса.
3. Замените значение «Drop shadow» на «Layer blur».
4. Кликните на иконку солнца и поставьте значение размытия. Чем больше значение, тем больше размытие.

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

По горизонтали:

Для отражения изображений по горизонтали в фигме, нажмите на горячие клавиши «Shift + H». Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».

По вертикали:

Чтобы отразить картинку в Figma по вертикали выделите её и нажмите на 2 горячие клавиши «Shift + V». Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».

Как изменить прозрачность картинки

Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».

Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.

Как наложить текст поверх картинки в Figma

Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:

1. Создать текстовый фрейм и вставить изображение. Текст должен быть расположен внизу изображения (убедитесь, что это так в слоях).
2. Совместите 2 этих элемента вместе и выделите.
3. Нажмите сверху по центру иконку «Use as mask»

Как вырезать объект в фигме на фото и удалить задний фон

Чтобы вырезать объект в фигме и затем удалить у фото задний фон, воспользуйтесь инструкцией, которую я подготовил в отдельной статье и видео уроке.

Как удалить фото в Figma

Чтобы удалить не нужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.