Руководство по работе с изображениями в Figma
Не секрет, что изображения являются огромной частью мира дизайнера. От поиска и редактирования до манипулирования и экспорта, мы постоянно работаем с изображениями в наших файлах дизайна. Вы могли заметить, что в Figma изображения обрабатываются немного иначе, чем в других инструментах. Есть несколько разных способов их импорта и несколько уникальных опций редактирования. Есть также пара приемов, которые облегчают работу с изображениями в Figma. Так что, независимо от того, новичок ли вы и пользуетесь другим инструментом или просто хотите улучшить свой рабочий процесс, эти рекомендации наверняка заставят ваших коллег и арт-директоров спросить: «Погоди . как ты это сделал?!»
Импорт изображений в Figma
Через меню
Это может показаться очевидным, но, чтобы начать работать с изображениями в Figma, вам нужно сначала импортировать их в свой файл дизайна. Вы можете сделать это из меню, перейдя в File, затем щелкнув Place Image. Вы также можете найти эту же опцию в нижней части раскрывающегося списка Shape Tools или нажав удобную комбинацию клавиш Shift + Command + K. Затем откроется файловый браузер, позволяющий выбрать несколько изображений. Отсюда мы не просто бросаем их как попало на холст. Вместо этого Figma позволяет вам добавлять их по одному, кликая или перетаскивая. Это дает вам гораздо больший контроль над размещением и даже размером изображений при импорте. Это может показаться простой вещью, но на самом деле она довольно мощная, особенно если учесть, как обрабатываются изображения в Figma. Позвольте мне быстро объяснить, почему. В Figma мы не рассматриваем изображения как отдельный тип объекта, вместо этого мы рассматриваем их как заливку. Когда вы импортируете изображение, мы создаем прямоугольник с такими же размерами * и применяем к нему заливку изображения. Если вы знакомы с CSS, подумайте об этом как об установке изображения в свойстве background элемента div. Это значительно упрощает обрезку, изменение размера и замену изображения в процессе работы над дизайном. Итак, вернемся к импорту. Как я уже сказал, когда вы используете метод Place Image, вы получаете возможность добавить несколько изображений по одному. Круто то, что, поскольку изображения обрабатываются как заливка, вы можете использовать этот метод для добавления выбранных изображений к уже существующим фигурам. Один из вариантов использования этого – быстрое добавление изображений профиля к трем разным дизайнам (круг, квадрат и прямоугольник с закругленными углами), которые вы хотите проверить.
С помощью перетаскивания
Второй способ импорта – перетаскивание. С вашего рабочего стола или из папки на вашем компьютере вы можете просто перетащить одно или несколько изображений в Figma. С помощью этого метода мы размещаем их на холсте ровными рядами по десять. Вы можете быстро воспользоваться нашими новыми функциями Smart Selection. Просто выберите все изображения, которые вы импортировали, а затем отрегулируйте интервал. Или, если вы хотите стать по-настоящему модным, вы можете быстро создать сетку, а затем поменять их местами, как в настоящем фотофиде. Хотите больше узнать о Smart Selections? Ознакомьтесь с нашей справкой и статьей в блоге Эти два метода импорта – импорт с помощью place image или перетаскивание – являются чрезвычайно универсальными, но они требуют, чтобы у вас уже были изображения, загруженные на ваш компьютер. Итак, что, если вы хотите быстро проверить кучу идей, не занимая драгоценное место на жестком диске? Не волнуйтесь, Figma поможет вам.
С помощью метода копировать + вставить
Третий способ импортировать изображения — это просто скопировать их и вставить в документ. Когда вы нашли идеальное изображение в Интернете, просто щелкните по изображению правой кнопкой мыши и выберите «Копировать». (Это должно работать в любом браузере). Вернувшись к Figma, вы можете вставить скопированное изображение в ваш файл. Хотя этот метод работает только с одним изображением за раз, это быстрый способ опробовать кучу идей, плюс не нужно сохранять изображения на жестком диске.
Манипулирование изображениями в Figma
Теперь, когда у вас есть изображения в Figma, вы можете редактировать их по своему желанию. Несмотря на то, что мы не утверждаем, что Figma является инструментом редактирования фотографий, мы предоставляем вам возможность сделать несколько быстрых изменений, таких как настройка экспозиции или контраста. По умолчанию изображения настроены так, чтобы заполнить любую фигуру, но мы даем вам полный контроль над этим. Если вы щелкнете по параметру заливки на панели свойств, вы увидите всплывающее окно. В верхней части этого окна вы найдете небольшой выпадающий список, который позволяет переключаться между Fill, Fit, Crop и Tile.
Fill
Как вы можете видеть, режим Fill расширяет изображение до размеров фигуры, в которой оно находится.
Fit
Режим Fit гарантирует, что вы всегда будете видеть полное изображение в вашей фигуре. Это может привести к появлению пустого пространства вокруг изображения.
Crop
Режим Crop позволяет изменять размеры и перемещать изображение по границам фигуры.
Tile
Ну . вы поняли! Замостить плиткой 🙂
Советы и приемы
Теперь, когда вы являетесь экспертом по импорту и обработке изображений в Figma, я хотел бы поделиться несколькими советами и приемами, которые помогут применить эти методы на практике.
Быстрое кадрирование (Quick Crop)
Нужно быстро обрезать изображение? Выберите слой изображения, а затем нажмите кнопку кадрирования на верхней панели инструментов. Или, если вы являетесь поклонником сочетаний клавиш (что и должно быть), просто нажмите и удерживайте клавишу option и дважды кликните по изображению, чтобы открыть настройку кадрирования.
Изображения, как стили
Знаете ли вы, что вы можете создать стиль из своего изображения, а затем опубликовать его в своей командной библиотеке? Для этого просто выберите изображение, нажмите кнопку «Создать стиль» и дайте ему имя. Отсюда вы можете либо сохранить стиль локально для файла, в котором вы работаете, либо опубликовать его в своей библиотеке.
Слои заливки и режимы наложения
Я не буду вдаваться в подробности всех режимов наложения, но я объясню, как полезно добавить несколько слоев заливки. Допустим, вы хотите, чтобы ваше изображение было черно-белым. Один из способов сделать это – настроить ползунок насыщенности под настройками заливки. Однако, если вам когда-нибудь понадобится заменить это изображение на другое, вам придется повторно применить этот параметр насыщенности. Здесь пригодятся слои заливки и режимы наложения. Добавив сплошную заливку, установив цвет на черный или белый, а затем изменив режим наложения на color, вы получите черно-белые изображения с более точным контролем.
Копирование слоев заливки
Одна хитрость, которую я обнаружил в Figma, которая сэкономила мне массу времени, заключается в том, что вы можете копировать и вставлять слои заливки (это также относится и к слоям Stroke и Effect). Продолжая приведенный выше пример, это позволяет быстро взять этот черно-белый заливочный слой и применить его к дополнительным изображениям с помощью сочетания клавиш command+c и command+v.
Изображения, как контур
Хотя может быть не так много вариантов использования изображения в качестве контура, полезно знать, что Figma поддерживает это. J Как я уже говорил, изображения являются важной частью процесса проектирования. Независимо от того, работаете ли вы с ними ежедневно или только когда вам нужно обновить аватар в Twitter, вы не можете их игнорировать. Итак, от поиска предпочтительного метода импорта для ускорения процесса проектирования с использованием стилей изображений, надеюсь, это руководство было полезным. Есть какие-нибудь дополнительные советы и рекомендации, которые я, возможно, упустил? Обязательно дайте мне знать в Twitter! * Обратите внимание, что разрешение изображений, размер которых превышает 4000 пикселей, будет уменьшено для обеспечения производительности. * Все изображения в этом руководстве взяты с unsplash.com и diverseui.com. Перевод статьи Josh Dunsterville
Как изменить размер фото из фигмы чтобы оно подходило под экран?
Делаю свой первый сайт из своей модели в фигме. Сделала фрейм на 1440пх, фото обрезано уже под такой размер сайта. Верстаю сайт, а фото оказывается не того размера и появляется возможность прокрутить экран. Теперь переделывать макет сайта. ( Если да, то под какие размеры?
- Вопрос задан 07 февр.
- 410 просмотров
Комментировать
Решения вопроса 1
Линуксоид-энтузиаст и SQL разработчик
У вас контейнер? Если да — изображениям в нем пропишите width: 100%, с уменьшением контейнера они тоже будут меняться. Изображению можно любой размер сделать, от фиксированного, до обрезки прямо на сайте под точное количество пикселей (object-fit). Если интересно, можете посмотреть эти видео: https://youtu.be/RQqzOTUa9Ig
https://youtu.be/nTtuiBXKp88
https://youtu.be/XbnAKjjlgc4
Ответ написан 07 февр.
Комментировать
Нравится Комментировать
Как сжать изображение в Figma?
Проблема:
Мой файл слишком тяжелый из-за качественных картинок в нем. Файл невозможно сохранить. Что делать?
Например, в Sketch есть функция, после которой изображение теряет в качестве и становится легче, если его до этого масштабировали в меньшую сторону (например Scale 50%).
Как уменьшить изображения в Figma?
- Вопрос задан более трёх лет назад
- 9854 просмотра
4 комментария
Простой 4 комментария
10 хитростей Figma, которые я хотел бы знать раньше
Меня всегда поражало количество полезных функций, которые Figma встроила в свое приложение. То, что раньше было обходным решением в Sketch, теперь является продуманной функцией в Figma.
Я часто натыкаюсь на функции, позволяющие сэкономить время, я хотел бы узнать о них раньше. Надеюсь, часть из них будет вам интересна и пригодится в работе.
1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни
Я понятия не имел об инструменте «Arc», пока однажды случайно не перетащил его на артборд, это просто взорвало мой мозг. Он позволяет создавать простые и красивые индикаторы прогресса.
2. Используйте инструмент масштабирования, чтобы избежать искажения
Сохраняйте идеальные пропорции вашего дизайна с помощью инструмента масштабирования – просто выберите элемент, который вы хотите масштабировать, затем нажмите клавишу K на клавиатуре и потяните курсор, вуаля.
Раньше я всегда отказывался от масштабирования дизайна, потому что всегда что-то ломалось, и мне приходилось вносить коррективы. С помощью инструмента масштабирования этих проблем больше нет – все идеально масштабируется и сохраняет пропорции без необходимости доработки.
3. Перетаскивайте объекты за пределы фрейма, удерживая их внутри контейнера
Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.
4. Приведите сетку в порядок
Приведите в порядок свои проекты, щелкнув по иконке сетки в углу после выбора нескольких объектов в массиве. Это сделает все интервалы между объектами одинаковыми, а затем вы сможете перетаскивать объекты, чтобы изменить их расположение и отрегулировать интервалы.
5. Продублируйте последнее действие
Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.
6. Предварительно просмотрите цвет с помощью пипетки
При использовании инструмента «Пипетка» (i) удерживайте левую кнопку мыши, чтобы просмотреть как меняется цвет элемента.
7. CMD + / разблокировать все объекты
Сочетание клавиш СMD + / имеет массу полезных быстрых действий, которые помогут в рабочем процессе и позволят сэкономить массу времени. Если вы еще не используете его, я настоятельно рекомендую посмотреть, какие действия доступны в меню. Действие, которое я часто использую – это быстрая разблокировка всех объектов и изменение шрифтов.
8. Легко вставляйте изображения внутрь фигур-плейсхолдеров
Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.
9. Другие приемы с пробелом
Перетащите область выделения, а затем удерживайте пробел, чтобы увеличить размер выделения указателя.
Если вы рисуете фигуру, вы также можете удерживать пробел, чтобы переместить объект во время его создания.
А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!
10. Content Reel + Unsplash
Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.
11. БОНУС! Исправить высоту строки за секунду
Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!