В этой статье мы узнаем несколько разных способов изменения размеров элементов и групп в Figma (в дополнение к методу по умолчанию). Мы также узнаем, как изменять размеры фреймов, не перемещая элементы в фреймах.
В Figma есть и другие способы изменения размера элементов, кроме метода по умолчанию. Так что не волнуйтесь, если использование дозы подхода по умолчанию не даст вам нужного результата.
Сначала мы рассмотрим метод по умолчанию, чтобы вы с ним были знакомы, а затем мы увидим некоторые другие способы изменения размеров элементов и групп.
Метод по умолчанию для изменения размера чего-либо в Figma — просто щелкнуть и перетащить . Чтобы изменить размер элемента с помощью метода по умолчанию, все, что вам нужно сделать, это выбрать свой объект и использовать любой из элементов управления преобразованием и изменять его размер, пока вы не будете довольны.
Удерживая при этом нажатой клавишу SHIFT, вы поможете сохранить пропорции.
Иногда подход по умолчанию может не работать для некоторых элементов. Щелчок и перетаскивание в этих случаях может привести к искажению объекта. Так что вы можете сделать вместо этого?
Как изменить размер объекта со свойствами в Figma
Чтобы действительно точно изменить размер объекта, перейдите к инспектору свойств, расположенному в верхней правой части вашего файла. Найдите поля высоты и ширины и введите нужные значения. Вы также можете перетаскивать значения с помощью курсора мыши. Вы всегда можете использовать этот метод, чтобы получить точные пропорции, которые вам нужны, например, 140 x 140, 100 x 50 и так далее.
Помните, что любые значения, которые вы вводите в поля свойств, будут отражены в вашем кадре, поэтому важно выбрать пропорции, которые не будут искажать ваш кадр. Например, элемент размером 150 x 20, скорее всего, будет выглядеть искаженным.
Вы всегда можете поэкспериментировать со значениями, пока не измените размер элемента на свое усмотрение. Все зависит от тебя.
Инструмент масштабирования Figma расположен в верхнем левом углу экрана. Чтобы использовать инструмент масштабирования, выберите кадр, щелкните инструмент масштабирования и перетащите его с помощью элементов управления масштабированием.
Этот инструмент особенно полезен, когда вы имеете дело с изменением размера значков. Некоторые значки теряют форму, когда вы пытаетесь изменить их размер. Инструмент масштабирования помогает убедиться, что ваш элемент или элементы вашего кадра не искажены.
Масштабирование работает для текстовых объектов, фреймов, компонентов и т. д. Вы можете использовать инструмент масштабирования для изменения размера элементов в любое время.
Как изменить размер объектов с помощью сочетаний клавиш в Figma
Чтобы изменить размер объекта с помощью сочетания клавиш, выберите объект, удерживайте нажатой клавишу CTRL и используйте клавиши со стрелками , чтобы изменить размер объекта. Вы можете увеличивать или уменьшать ширину или высоту на 1 пиксель за раз. Вы можете использовать сочетания клавиш в любой ситуации.
Совет: удерживая нажатой клавишу SHIFT на клавиатуре, вы ускорите изменение размера до 10 пикселей за раз.
Как изменить размер без перемещения объектов внутри рамки в Figma
Иногда при попытке изменить размер фреймов, содержащих поля ввода, вы обнаружите, что некоторые объекты перемещаются вместе с фреймом из-за ограничений.
Конечно, это не желаемый результат. Чтобы игнорировать ограничения элемента при изменении размера, удерживайте клавишу CTRL при перетаскивании. Кроме того, удерживание Ctrl + Alt во время перетаскивания пропорционально изменит размер вашего элемента.
Вывод
Знание того, как изменять размеры элементов, действительно может помочь вам создавать одинаковые красивые рамки для ваших проектов.
Оригинал – тут
2 843 просмотров
Отказ от ответственности: Вся размещенная информация была взята из открытых источников и представлена исключительно в ознакомительных целях а также не несет призыва к действию. Создано лишь в образовательных и развлекательных целях. | Так же, если вы являетесь правообладателем размещенного на страницах портала материала, просьба написать нам через контактную форму жалобу на удаление определенной страницы, а также ознакомиться с инструкцией для правообладателей материалов. Спасибо за понимание.
Если вам понравились материалы сайта, вы можете поддержать проект финансово, переведя некоторую сумму с банковской карты, счёта мобильного телефона или из кошелька ЮMoney.
Тема сегодняшней инструкции «Изображения в Figma». Разберемся как правильно работать с картинками и рассмотрим различные вопросы по этой теме от простого к сложному.
Оглавление статьи
- Как вставить картинку в фигме
- С компьютера
- С интернета
- Сделать скриншот
- Через плагины
- Вставка изображений в фигуру (прямоугольник, круг)
- Как обрезать изображения в Figma
- Сохранить картинку в фигме на компьютер
- Как размыть фото в фигме
- Отразить фото в фигме по горизонтали или вертикали
- Как изменить прозрачность картинки
- Наложить текст поверх картинки в Figma
Как вставить картинку в фигме
Вставить нужную картинку в Figma можно 4 разными способами.
С компьютера:
Выберете нужное изображение на вашем компьютере и поместите картинку в фигму простым перетаскиванием в ваш проект (зажав левую клавишу мыши).
С интерента:
Вы можете скопировать нужную картинку с любого сайта. Для этого наведите на нужную картинку и нажмите правую клавиши мыши. Выберите пункт «Копировать изображение». Перейдите в фигму и нажмите на клавиатуре 2 клавиши «Ctrl + V», чтобы его вставить.
Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.
Сделать скриншот:
Можно вставить снимок экрана в Figma. Для этого нужно сделать скриншот. Это легко реализовать с помощью различных программ, таких как: «Lightshot», «Joxi».
Через плагины:
Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.
Вставка изображений в фигуру (прямоугольник, круг)
Вы можете вставлять картинки в любые фигуры созданные в фигме. Это может быть круг, прямоугольник, квадрат, звезда, многоугольник и т.д. Также с помощью этого способа можно сделать фон картинкой в фрейме.
3 способа вставить изображение в любую фигуру в Figma.
Через правую панель:
Чтобы вставить изображение в фигуру через правую панель сделайте следующее:
- Выберите нужную фигуру.
- В правой панели нажмите на цвет.
- Кликните на «Fill» и выберите из списка «Image».
- Нажмите на кнопку «Place image».
- Выберите изображение для вставки на компьютере.
Через инструмент «Place images»:
Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.
- Выберите в панели сверху, слева инструмент «Place images». Он находится во вкладке с фигурами (Shape tools).
- Найдите на рабочем столе нужные изображения и выделите их для вставки.
- Рядом с курсором появится количество вставляемых изображений. Вставьте их в нужные фигуры кликнув на них левой клавишей мыши.
C помощью плагина:
Подробная инструкция по вставке изображений с помощью плагина Unsplash находится здесь.
Как обрезать изображения в Figma
Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.
- Выделите нужную картинку
- Активируйте инструмент «Crop image»
- Уменьшите изображение, выбрав какой-либо край с зажатой клавишей мыши
Как сохранить картинку в фигме на компьютер
Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:
- Выделите нужную картинку, в панели справа,
- Напротив надписи «Export» нажмите на пиктограмму «+».
- Выберите нужный формат для сохранения (JPG, PNG, SVG, PDF).
- Нажмите на кнопку экспорта и сохраните на компьютер в нужное место.
Подробнее об экспорте в различных форматах, читайте в этой статье.
Как размыть фото в фигме
Чтобы размыть изображения в Figma сделайте следующие шаги:
- Выберите нужную картинку.
- В правой панеле напротив надписи «Effects» нажмите на иконку плюса.
- Замените значение «Drop shadow» на «Layer blur».
- Кликните на иконку солнца и поставьте значение размытия. Чем больше значение, тем больше размытие.
Как отразить фото в фигме
По горизонтали:
Для отражения изображений по горизонтали в фигме, нажмите на горячие клавиши «Shift + H». Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».
По вертикали:
Чтобы отразить картинку в Figma по вертикали выделите её и нажмите на 2 горячие клавиши «Shift + V». Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».
Как изменить прозрачность картинки
Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».
Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.
Как наложить текст поверх картинки в Figma
Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:
- Создать текстовый фрейм и вставить изображение. Текст должен быть расположен внизу изображения (убедитесь, что это так в слоях).
- Совместите 2 этих элемента вместе и выделите.
- Нажмите сверху по центру иконку «Use as mask»
Как вырезать объект в фигме на фото и удалить задний фон
Чтобы вырезать объект в фигме и затем удалить у фото задний фон, воспользуйтесь инструкцией, которую я подготовил в отдельной статье и видео уроке.
Как удалить фото в Figma
Чтобы удалить не нужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.
В этой статье мы разобрали как работать с изображениями в Figma.
P.S. Вы можете получить бонусный урок и специальные материалы для быстрого создания дизайн макетов в Figma. Для этого нажмите на эту ссылку.
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with 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
Плагины для работы с изображениями помогут сгенерировать нужную картинку по запросу, вставлять большие изображения в Figma и сжимать их без потери качества, удалять фон и лишнее пространство, разрезать картинку на части, находить, собирать и упорядочивать все изображения в одном месте. Вы сможете редактировать изображения, накладывать фильтры и применять эффекты прямо в Figma. А ещё распознавать текст с картинки, превращать растровые изображения в вектор и создавать красивые мудборды в один клик
Ando — AI Copilot for Designers — генерирует изображения на базе ИИ по текстовому запросу на английском языке или референсу (другому изображению)
Insert Big Image — сохраняет высокое качество больших изображений при вставке в Figma
Downsize — сжимает и меняет размеры изображений, чтобы файлы быстрее загружались и занимали меньше памяти
TinyCanvas — автоматически сжимает изображения одним щелчком мыши с помощью API TinyPNG
TinyImage JPG/PNG Compressor — сжимает экспортируемые из Figma изображения до 90% без потери качества и упаковывает в архив
Icons8 Background Remover — удаляет фон с одного или нескольких изображений одновременно
PixCut remove background — убирает фон с изображений
Autocrop — автоматически обрезает лишнее пространство у изображения
Image Cutter — разрезает любое изображение на части
Image Grid — рандомно размещает изображения по сетке
Image Extractor — находит все изображения в файле и собирает их в одном месте
Image Editor — помогает редактировать изображения с помощью настроек цвета и фильтров. Можно сохранять и загружать свои пресеты
Batch Image Editor — помогает настроить экспозицию, контрастность или насыщенность сразу нескольких изображений в один клик
Mini Photo Editor — упрощает быструю обрезку, поворот, отражение, фильтрацию, точную настройку и редактирование изображений
Photopea — Photoshop внутри Figma — позволяет редактировать фотографии, применять эффекты, фильтры, добавлять текст, обрезать или менять размер изображений
Recognize — распознаёт текст с картинки на 24 языках
Text From Image — распознаёт и копирует текст с изображения
Export Original Images — экспортирует картинки из макетов в оригинальном разрешении и без обрезки
Sources — показывает все изображения в файле и где они используются. Позволяет скачивать их по одному или все сразу
Image Tracer — трассирует чёрно-белые изображения
Moodz — позволяет быстро создать мудборд из выбранных изображений
