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

Изображения в 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. Выберите изображение для вставки на компьютере.
Вставка изображений в Figma (прямоугольник, круг)
Вставка картинок в фигугу в Figma

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

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

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

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

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

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

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

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

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

Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «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 на клавиатуре.

В этой статье мы разобрали как работать с изображениями в Figma.

P.S. Вы можете получить бонусный урок и специальные материалы для быстрого создания дизайн макетов в Figma. Для этого нажмите на эту ссылку.

Теги

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *