Изменить размер пнг файла в фигму
Тема сегодняшней инструкции «Изображения в Figma». Разберемся как правильно работать с картинками и рассмотрим различные вопросы по этой теме от простого к сложному.
Как вставить картинку в фигме
Вставить нужную картинку в Figma можно 4 разными способами.
С компьютера:
Выберете нужное изображение на вашем компьютере и поместите картинку в фигму простым перетаскиванием в ваш проект (зажав левую клавишу мыши).
С интерента:
Вы можете скопировать нужную картинку с любого сайта. Для этого наведите на нужную картинку и нажмите правую клавиши мыши. Выберите пункт «Копировать изображение». Перейдите в фигму и нажмите на клавиатуре 2 клавиши «Ctrl + V», чтобы его вставить.
Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.
Сделать скриншот:
Можно вставить снимок экрана в Figma. Для этого нужно сделать скриншот. Это легко реализовать с помощью различных программ, таких как: «Lightshot», «Joxi».
Через плагины:
Примеры использования
Пример с линейным графиком:
Пример со скроллом:
Пример со слайдером:
Как видите, инструмент достаточно несложный и полезный.
Здесь стоит иметь ввиду, что если вам нужны адаптивные компоненты, здесь могут возникнуть трудности. Например, если у вас постоянно меняется размер графиков, его значения будут варьироваться в зависимости от размера [расстояние между объектами не меняется при растягивании или сужении элементов].
В качестве статичного объекта можно использовать нулевой фрейм, о котором я говорил в прошлой статье. А материал этой статьи можно посмотреть в видеоформате в моем Youtube-канале.
Надеюсь, что материал оказался для вас полезен. Обязательно оставьте обратную связь в комментариях - это поможет мне стать чуточку лучше. Я также готов ответить на ваши вопросы.
Чтобы экспортировать элементы, выделите их в списке слоев и нажмите на «+» в разделе Export в правом окне инструментов. После этого появится окно с настройками экспорта, в котором вы можете выбрать размер, дополнение к названию (Suffix) и формат файла.
Важное дополнение:
Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).
Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»
P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.
Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.
В Figma невозможно менять размер элементов внутри копий компонента. Один из способов решения этой трудности - изменение размера «начинки» через расстояние между объектами.
Горячие клавиши для изменения масштаба в Figma
Нажмите горячие клавиши Shift + 0, чтобы изменить масштаб до 100%.
Комбинация клавиш Shift + 1 позволяет увидеть все элементы на странице в вашем проекте.
Если хотите изменить масштаб до размеров фрейма, то нажмите на клавиши Shift +2.
Для переключения на новый фрейм нажмите сочетание клавиш Shift + N.
Чтобы переключиться на предыдущий фрейм, нажмите клавишу «N» на клавиатуре.
Как называть файлы, чтобы сохранить их в разные папки при экспорте
Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.
Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:
- 1/Wooman
- 2/Landing Page
- 3/Illustration
Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».
Далее поговорим о форматах и для каких элементов они подходят.
Как отразить фото в фигме
По горизонтали:
Для отражения изображений по горизонтали в фигме, нажмите на горячие клавиши «Shift + H». Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».
По вертикали:
Чтобы отразить картинку в Figma по вертикали выделите её и нажмите на 2 горячие клавиши «Shift + V». Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».
Презентация
Вы можете демонстрировать результаты своей работы, используя режим презентации. Подробнее об этом читайте в этой статье.
Как удалить фото в Figma
Чтобы удалить не нужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.
В этой статье мы разобрали как работать с изображениями в Figma.
P.S. Вы можете получить бонусный урок и специальные материалы для быстрого создания дизайн макетов в Figma. Для этого нажмите на эту ссылку.
Разбираемся как быстро изменять масштаб в фигме, уменьшать или увеличивать. Поговорим про горячие клавиши, которые помогают работать быстрее. Смотрите видео урок по теме или читайте текстовую версию видео ниже.
Сохранение из фигмы файлов в формате PNG
PNG — это растровый формат изображений. Отличие PNG от JPG состоит в том, что этот формат подходит для сохранения изображений с прозрачным фоном.
Инструкция как сохранять в фигме в PNG на компьютер:
Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.
Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.
Что такое custom-size component
Это компонент, размер которого меняется внутри копии компонента через увеличение или уменьшение расстояния между объектами.
Заключение
Итак, в этой инструкции вы узнали как изменять масштаб в фигме. Изучили полезные горячие клавиши, которые помогут ускорить вашу работу.
P.S. Вы веб-дизайнер и хотите ускорить вашу работу? Тогда получите бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке. Вы узнаете секретный метод создания дизайна сайта и сэкономите время при работе.
В этой инструкции вы узнаете, как сохранять проекты или отдельные части вашей работы в фигме на компьютер в следующих форматах:
-
— самый популярный формат. Подходит для сохранения любых изображений, фотографий, макетов и т.д. — формат подходит для картинок с прозрачным фоном. — векторный формат. Подходит для экспорта иконок, иллюстраций, логотипов и т.д. — если нужно создать какой-либо документ или презентацию. — внутренний формат Figma, для сохранения на компьютер. — подойдет, если нужно сохранить сразу много картинок, фото, иконок или других элементов в представленных форматах выше.
Примечание: делать действия, чтобы постоянно сохранять работу в фигме нет необходимости. Все ваши работы автоматически сохраняются на серверах фигмы. Эта инструкция нужна если вы хотите к примеру сохранить дизайн макет для портфолио или экспортировать какой-либо элемент для других целей.
Оглавление статьи
Как вырезать объект в фигме на фото и удалить задний фон
Чтобы вырезать объект в фигме и затем удалить у фото задний фон, воспользуйтесь инструкцией, которую я подготовил в отдельной статье и видео уроке.
Массовый экспорт из Figma
Если у многих элементов уже был нажат плюсик экспорта, то можно массово их экспортировать нажав на сочетание горячих 3 клавиш «Ctrl + Shift + E». Появится специальное окно экспорта.
Как обрезать изображения в Figma
Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.
- Выделите нужную картинку
- Активируйте инструмент «Crop image»
- Уменьшите изображение, выбрав какой-либо край с зажатой клавишей мыши
Как сохранить проект в Фигме в формате FIG (внутренний формат)
Чтобы сохранить файл во внутреннем формате фигмы с расширением «.fig» сверху нажмите на вкладку «File» и выберите пункт «Save As .fig…».
Импорт файлов в Figma в формате «.fig»
Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.
Экспорт области экрана
Если вам требуется экспортировать только часть вашего проекта (по действию похоже на «Ножницы» в Windows и скриншот части экрана в Mac), воспользуйтесь инструментом Slice. Подробнее читайте здесь.
Как сохранить в Фигме в формате PDF
PDF подходит для экспорта различных документов или презентаций.
Чтобы сохранить элементы из фигмы в формате PDF есть 2 варианта — экспортировать каждый элемент отдельно, либо создать 1 файл с множеством страниц. Рассмотрим каждый из этих вариантов по отдельности.
Экспорт из фигмы в PDF с множеством страниц.
Формат PDF подходит если вы хотите создать:
- Презентацию.
- Какой-либо документ в формате A4.
- Книгу.
- Брошюру.
- Маркетинг кит.
- Коммерческое предложение.
Пошаговая инструкция по созданию PDF файлов:
Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).
- Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
- Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.
Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта.
Экспорт в PDF выбранных элементов:
Если вы выберите какие-либо элементы и нажмете справа на иконку плюсика, то можете сохранить несколько файлов в PDF по отдельности. В этом случае не будет создан единый файл в виде книги или брошюры.
Включение горячих клавиш в фигме
Чтобы включить подсказки горячих клавиш для изменения масштаба в фигме, нажмите на иконку вопроса в правом нижнем углу. Затем выберите надпись «Keyboard shortcuts»
Переключитесь на вкладку «Zoom». Горячие клавиши, которые вы использовали будут подсвечиваться синим цветом. Те которые не использовали будут обведены рамкой.
Как размыть фото в фигме
Чтобы размыть изображения в Figma сделайте следующие шаги:
- Выберите нужную картинку.
- В правой панеле напротив надписи «Effects» нажмите на иконку плюса.
- Замените значение «Drop shadow» на «Layer blur».
- Кликните на иконку солнца и поставьте значение размытия. Чем больше значение, тем больше размытие.
Как указать разрешение
В окне разрешения вы можете либо указать кратность — 1X, 2X и т.п. Это значение, на которое будет умножено фактическое разрешение сторон экспортируемой группы/фрейма/элемента.
Либо вы можете указать ширину стороны — высоты или длины. 512w — означает ширину 512 пикселей, 512h — высоту. Вы можете указывать свои значения, либо выбрать из предустановленных вариантов.
Экспорт в формате SVG
SVG — это векторный формат изображений. Векторный формат отличается от растрового, тем, что в нем нет пикселей. Если вы увеличите JPG или PNG, то будет появляться зернистость в виде пикселей. С форматом SVG этого не происходит.
В дальнейшем вы сможете редактировать эти изображения в других графических редакторах, таких как Adobe Illustrator, Inkscape, Affinity Designer, Inscape и других.
Формат SVG подходит, если нужно сохранить:
- Иконки.
- Простые фигуры созданные в Figma с помощью инструментов «Shape tools» (прямоугольники, круги, линии, многоугольники)
- Иллюстрации.
- Элементы созданные с помощью пера или карандаша в фигме.
Как сохранять в фигме в SVG:
Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.
Быстрая инструкция по экспорту файлов в Фигме
Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.
Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».
Изменение масштаба экспортируемых файлов
Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.
Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.
Как изменить прозрачность картинки
Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».
Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.
Как увеличить или уменьшить масштаб в фигме
Чтобы увеличить масштаб в фигме нажмите на клавишу «+».
Если хотите уменьшить масштаб нажмите на клавишу «-».
Второй способ, который вы можете использовать для изменения масштаба в Figma — это зажать клавишу «Ctrl» и прокрутить крутить колесо мыши.
Третий способ — нажать в верхнем правом углу на проценты и изменить масштаб следующим образом:
- Увеличить — Zoom in.
- Уменьшить — Zoom out
- Масштаб изменяется для просмотра всех элементов на странице — Zoom to fit.
- Изменить масштаб до 50% — Zoom to 50%.
- Масштаб 100% — Zoom to 100%.
- Изменить масштаб до 200% — Zoom to 200%.
Сохранение файла проекта
Вы также можете сохранить весь файл на локальный диск, об этом читайте здесь.
Сохранить проект или картинку в Figma в формате JPG
Формат JPG — это растровый формат. Элементы сохраняются с расширением «.jpg».
Формат JPG подходит для сохранения:
- Фото.
- Картинок.
- Изображений.
- Дизайн макетов.
Инструкция по экспорту из Figma в JPG на компьютер:
Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.
Вставка изображений в фигуру (прямоугольник, круг)
Вы можете вставлять картинки в любые фигуры созданные в фигме. Это может быть круг, прямоугольник, квадрат, звезда, многоугольник и т.д. Также с помощью этого способа можно сделать фон картинкой в фрейме.
3 способа вставить изображение в любую фигуру в Figma.
Через правую панель:
Чтобы вставить изображение в фигуру через правую панель сделайте следующее:
- Выберите нужную фигуру.
- В правой панели нажмите на цвет.
- Кликните на «Fill» и выберите из списка «Image».
- Нажмите на кнопку «Place image».
- Выберите изображение для вставки на компьютере.
Через инструмент «Place images»:
Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.
- Выберите в панели сверху, слева инструмент «Place images». Он находится во вкладке с фигурами (Shape tools).
- Найдите на рабочем столе нужные изображения и выделите их для вставки.
- Рядом с курсором появится количество вставляемых изображений. Вставьте их в нужные фигуры кликнув на них левой клавишей мыши.
C помощью плагина:
Подробная инструкция по вставке изображений с помощью плагина Unsplash находится здесь.
Как экспортировать элементы в один слой
За один слой Figma считает группу или фрейм. Если у вас есть несколько элементов и вы хотите, чтобы они экспортировались как одно изображение (например PNG), объедините их в одну группу (cmnd + G).
Если вы выделите несколько отдельных элементов, они экспортируются как разные файлы
Вы можете экспортировать элементы сразу в нескольких расширениях — для этого в разделе Export нажмите еще раз «+» и укажите дополнительные форматы. То есть вы можете выгрузить изображения сразу как svg и png, и в любых других комбинациях.
Видео: экспорт в Figma
Тег video не поддерживается вашим браузером
Как его создать
Для начала давайте рассмотрим его структуру более подробно.
У нас есть контейнер с двумя объектами, между которыми мы задаем расстояние. Первый объект, верхний, статичен. Он фиксирован по высоте [Fixed height]. Второй объект имеет динамическую высоту. Он заполняет доступную область по высоте [Fill container].
Таким образом, если мы увеличиваем расстояние между объектами, нижний становится меньше. Если уменьшаем - больше.
То же самое можно делать с объектами в горизонтальной плоскости.
Как сохранить картинку в фигме на компьютер
Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:
- Выделите нужную картинку, в панели справа,
- Напротив надписи «Export» нажмите на пиктограмму «+».
- Выберите нужный формат для сохранения (JPG, PNG, SVG, PDF).
- Нажмите на кнопку экспорта и сохраните на компьютер в нужное место.
Подробнее об экспорте в различных форматах, читайте в этой статье.
Как наложить текст поверх картинки в Figma
Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:
- Создать текстовый фрейм и вставить изображение. Текст должен быть расположен внизу изображения (убедитесь, что это так в слоях).
- Совместите 2 этих элемента вместе и выделите.
- Нажмите сверху по центру иконку «Use as mask»
Читайте также: