Работа с изображениями в Figma. Без картинок в дизайне никуда. Давайте… | by Figma Tips

Без картинок в дизайне никуда. Давайте посмотрим, какие инструменты предлагает 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 или кликните по иконке маски в верхнем баре программы.

Круглые изображения и маска

1. Figma поддерживает самые распространенные форматы изображений: PNG, JPEG, GIF. Также поддерживаются форматы типа TIFF и WEBP, но они могут не отображаться в некоторых браузерах. Так что, если пользуетесь браузерной версией Figma, обратите на это внимание.
2. Когда вы помещаете изображение в Figma, все метаданные (EXIF) у изображения стираются.
3. Максимальный размер фотографии, которую вы можете поместить в макет — 4096px по одной из сторон. Если изображение больше, то Figma сожмет качество изображения и оно будет выглядеть пикселизовано.
4. Иногда, открывая файл в Figma, мы видим что фотографии в макетах пикселизованы, в таком случае просто обновите вкладку (правый клик по вкладке / Reload Tab)

На этом пока все. Спасибо за внимание! Присоединяйтесь 👉

подробная инструкция по работе для новичков

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

Получить бесплатно 24 раздела landing page для 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

Через инструмент «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 на клавиатуре.

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

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

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

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

Это может показаться очевидным, но чтобы начать работать с изображениями в Figma, вам нужно сначала импортировать их в свой файл. Вы можете сделать это из меню, перейдя к File , затем нажав Place Image . Вы также можете найти этот же параметр в нижней части раскрывающегося списка Инструменты для фигур или нажав удобную комбинацию клавиш Shift + Command + K .

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

Это может показаться простой вещью, но на самом деле она довольно мощная, особенно если учесть, как изображения обрабатываются в Figma. Позвольте мне очень быстро перемотать назад и объяснить почему.

В Figma мы не рассматриваем изображения как отдельный тип объекта, вместо этого мы рассматриваем их как заливки. Когда вы импортируете изображение, мы создаем прямоугольник с такими же размерами и применяем к нему заливку изображения. Если вы знакомы с CSS, подумайте об этом как о установке изображения в свойстве background элемента div. На первый взгляд, это не обязательно так уж много значит, ваше изображение все равно должно выглядеть одинаково, но преимущество в том, что его намного проще обрезать, изменять размер и заменять изображение во время разработки.

Итак, вернемся к импорту. Как я уже сказал, когда вы используете метод Place Image , вы получаете возможность добавлять несколько изображений одно за другим. Круто то, что, поскольку изображения обрабатываются как заливки, вы можете использовать этот метод для добавления выбранных изображений к уже существующим фигурам. Одним из вариантов использования этого может быть быстрое добавление изображений профиля к трем различным дизайнам (круг, квадрат и прямоугольник со скругленными углами), которые вы хотите протестировать.

Второй метод импорта — перетаскивание. Со своего рабочего стола или из папки на компьютере вы можете просто перетащить одно или несколько изображений в Figma. С помощью этого метода мы размещаем их на холсте выровненными рядами по десять штук. Преимущество этого заключается в том, что вы можете быстро воспользоваться преимуществами наших новых функций Smart Selection. Просто выберите все изображения, которые вы импортировали, а затем отрегулируйте интервал. Или, если вы хотите получить действительно фантазию, вы можете быстро создать сетку, а затем поменять местами ее, как настоящую фотоленту.

Эти два метода импорта — импорт с помощью метода размещения изображений или путем перетаскивания — чрезвычайно универсальны, но они требуют, чтобы у вас уже были загружены изображения на ваш компьютер. Итак, что, если вы хотите быстро изучить кучу идей, не занимая драгоценное место на жестком диске? Не волнуйтесь, Figma вас прикроет.

Третий способ импорта изображений — простое копирование и вставка. Когда вы просматриваете это идеальное изображение и думаете, что нашли его, просто щелкните правой кнопкой мыши изображение и выберите «Копировать». (Это должно работать в любом браузере.) Вернувшись к Figma, вы можете вставить скопированное изображение в свой файл.

Несмотря на то, что этот метод работает только с одним изображением за раз, это быстрый способ опробовать кучу идей, а также без посредников, таких как ваш жесткий диск.

Руководство по добавлению изображений в Figma

Импорт изображения с размещением изображения

Нажмите стрелку рядом с логотипом Figma на верхней панели и выберите Файл > Поместить изображение или используйте сочетание клавиш:

Mac OS : Shift-Command-K

Windows : Shift + Ctrl + K

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

• Выберите изображение из ваших локальных файлов.

Ваше изображение будет помещено в ваш курсор.

• Нажмите любое место на холсте, и Figma поместит изображение на это место,
• или щелкните и перетащите на холст, чтобы нарисовать изображение на холсте.

Добавить изображение к фигуре

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

• Выберите инструмент формы Прямоугольник на верхней панели или используйте сочетания клавиш R.

• Нарисуйте прямоугольную форму на холсте.
• Выберите Поместите изображение в меню инструментов формы или используйте сочетание клавиш:

MacOS : Shift-Command-K

Windows : Shift + Ctrl + K

• Выберите изображение из ваших локальных файлов.
• Если щелкнуть фигуру, Figma заполнит ее изображением.

Импорт нескольких изображений с помощью Place Image

Place image позволяет импортировать изображения массово. Затем вы можете выбрать, где именно вы хотите разместить каждое изображение. Поскольку Figma обрабатывает изображения как заливки, вы можете добавлять изображения к существующим объектам.

• Выберите Поместите изображение в меню инструмента формы или используйте сочетание клавиш:

MacOS : Shift-Command-K

Windows : Shift + Ctrl + K

• : Выберите три изображения из ваших локальных файлов

MacOS : нажмите и удерживайте клавишу Command , затем щелкните изображения

Windows : нажмите и удерживайте клавишу Shift , затем щелкните изображения отображать номера ваших изображений.

• Нажмите кнопку Поместить все в меню верхней панели, и Figma импортирует все изображения на ваш холст.

• Или нажмите на любую часть холста, и Figma поместит туда первое изображение. Щелкните еще раз в другом месте, чтобы поместить второе изображение, и так далее, пока все ваши изображения не будут на месте.
• Вы также можете щелкнуть и перетащить на холст, чтобы нарисовать изображения на холсте по одному.

Применить

несколько изображений к фигурам

• Выберите инструмент фигуры Прямоугольник на верхней панели или используйте сочетание клавиш R.

• Нарисуйте на холсте три прямоугольные фигуры.
• Выберите Поместите изображение в меню инструмента формы или используйте сочетание клавиш:

MacOS : Shift-Command-K

Windows : Shift + Ctrl + K три ваших локальных изображения

файлы:

MacOS : нажмите и удерживайте клавишу Command, затем щелкните изображения

Windows : нажмите и удерживайте клавишу Shift, затем щелкните изображения

• Щелкните любую фигуру, Figma заполнит фигуру изображением. Щелкните еще раз, чтобы поместить второе изображение в другую форму, и так далее, пока все ваши изображения не будут на месте.

Импорт изображения путем перетаскивания

• Выберите изображение из локальных файлов вашего компьютера.
• Перетащите изображение на холст.

Импорт изображения из браузера

• Нажмите и перетащите изображение из браузера на холст Figma.
• Или Щелкните правой кнопкой мыши по изображению в браузере и выберите скопировать изображение в контекстном меню.
• Перейдите на холст и щелкните правой кнопкой мыши , затем выберите вставить сюда , чтобы вставить изображение, или используйте ярлык:

MacOS : Command-V

Windows 9 : Ctrl + V 9 : Ctrl0009

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

• Выберите инструмент формы Прямоугольник на верхней панели или используйте сочетания клавиш R.