Как экспортировать изображения из Figma
При верстке макетов, сделанных в Figma, одним из важных моментов является экспорт изображений. Здесь может быть несколько ситуаций, в которых изображения экспортируются по разному.
- Экспорт одного изображения
- Экспорт нескольких изображений
- Экспорт группы
- Экспорт исходного изображения, использованного в качестве заливки
- Экспорт фреймов Figma в PDF-формат
Экспорт одного изображения
Для того чтобы экспортировать одно изображение, которое чаще всего находится внутри группы слоев, нужно выделить его с нажатой клавишей CTRL. В этом случае вы выделяете тот слой, который находится под курсором мыши.
Экспорт из Figma одного изображения
В настройках экспорта вы можете выбрать его размер и формат файла: PNG, JPG, SVG или PDF. Фото с прозрачностью сохраняют обычно в формате PNG, без прозрачности — в JPG, с векторными формами (логотипы, иконки) — в формате SVG.
Экспорт, или сохранение изображения из макета выполняется нажатием на кнопку Export photo (вместо photo вы увидите название слоя с изображением или группы слоев).
Обратите внимание на изображение на скриншоте. Для него добавлен эффект тени, который останется при сохранении картинки во время экспорта и который лучше добавить с помощью css-свойства box-shadow . Чтобы отключить эффект наложения тени, переместитесь в блок Effects выше блока Export и нажмите на иконку в виде глазика.
Что касается размеров, то на изображении ниже видна разница между картинками разного размера. Изображения большего размера вы можете сохранить для ретина-экранов и подобных им или для мобильной/планшетной версии сайта, если она не представлена в макете, а размер фото и колонки, содержащей его, слишком мал.
Изображения размером от 1x до 4x
При выделении фото с CTRL вы можете попасть не на само изображение, а на слой, который может находится выше изображения. Как правило это слой типа overlay — прямоугольник с полупрозрачной заливкой или заливкой с полупрозрачным градиентом, как на скриншоте ниже. Если такой слой присутствует в макете, то экспортировать вы будете именно градиент, а не изображение под ним.
Экспорт из Figma слоя с градиентом вместо изображения
Если вы хотите экспортировать только изображение, то вам придется выделить соответствующий слой в панели слева под градиентом или полупрозрачным прямоугольником, который потом в разметке нужно будет сверстать, как отдельный слой. Если же вам нужно изображение вместе с градиентом, то стоит превратить их в группу и экспортировать ее, если этого не сделал дизайнер.
Экспорт нескольких изображений
Самый простой вариант экспорта нескольких изображений — это, когда все они лежат в одной группе (фрейме) в виде ряда последовательных слоев. Тут достаточно просто выделить все нужные слои в панели слоев с зажатой клавишей Shift, либо какую-то часть из них с зажатой клавишей Ctrl и экспортировать сразу zip-архив со всеми изображениями.
Экпорт нескольких слоев из одной группы в Figma
На скриншоте выше не самый удачный пример в плане выбора изображений для экспорта, т.к. все они помещены в прямоугольники со скругленными углами в виде заливки, а боковые фото вообще обрезаны, чтобы макет лучше выглядел. Однако при верстке вам придется делать из этих фото карусель, например, как в Bootstrap, и обрезанные фото не подойдут. Поэтому в этом макете экспортировать изображения из Figma придется с помощью панели Inspect.
Второй распространенный вариант экспорта нескольких изображений — когда они размещены не только на разных слоях, но и в разных группах. В этом случае первое изображение мы выделяем с нажатой клавишей CTRL, а все остальные — с нажатыми клавишами CTRL + Shift, последовательно добавляя изображения к уже выделенным. При этом стоит контролировать в панели слева, какие именно слои попали в выделение, чтобы не экспортировать полупрозрачные или градиентные слои, созданные для эффектов наложения дизайнером.
Экспорт группы
Достаточно часто изображение может состоять в макете из нескольких слоев. Часть из них может быть векторными объектами, часть — фото-изображениями. Составляющие изображение слои могут быть собраны в один фрейм или группу. Вы можете сразу экспортировать этот фрейм или группу, как единое изображение, но что делать, если часть слоев в нем (ней) вам не нужна?
Несколько нужных слоев в Figma можно выделить с клавишей Shift и экспортировать их в виде zip-архива в нужном формате. На скриншоте выбран экспорт в формат PNG.
После распаковки архива вы увидите 3 изображения с именами, соответствующими названиям слоев:
В том случае, когда нужно экспортировать все слои, как единое изображение, нужно создать из них группу, нажав клавиши Ctrl + G, и выполнить экспорт для нее, выделив ее в панели слоев. В этом случае вы также загрузите zip-архив, но в нем будет одно изображение.
Тогда изображение будет содержать все слои, которые были собраны в группу:
Экспорт одного изображения-группы из Figma
Экспорт исходного изображения, использованного в качестве заливки
В том случае, если вам не подходит изображение, экспортированное из Figma в том виде и размере, который был добавлен в макет дизайнером, то получить его нужно не через экспорт, а через код элемента в панели Inspect.
На скриншоте видно, что фото больше, чем мы видим внутри круга. Кроме того, это изображение является заливкой для круга.
Изображение, как заливка
При экспорте мы получим изображение такого вида:
Для экспорта исходного изображения нужно переключиться в панель Inspect, отобразить код в блоке Code в табличном виде и внизу найти ссылку на добавленное в виде заливки изображение.
Открываем изображение по ссылке
В итоге получим такое изображение в новой вкладке браузера, которое можно легко сохранить в любую папку на компьютере.
Экспорт фреймов Figma в PDF-формат
В том случае, если вам нужно выслать документ в PDF-формате клиенту или использовать все файлы для открытия в Photoshop, такая функция тоже предусмотрена в Figma.
Для этого вам необходимо выделить нужные фреймы, кликнуть на иконку Figma в левом верхнем углу и в меню File выбрать пункт Export Frames to PDF. После этого вам нужно будет просто сохранить PDF-файл на компьютере, если это не происходит автоматически в вашем браузере.
Как сохранить проект в фигме на компьютер
12 дек 2020, 01:48
Автор the.bunin • 12 дек 2020, 01:48
Работа с файлом .fig
Figma очень хороша тем, что это облачный сервис и всё ваши проекты хранятся в облаке. Но частенько возникают неполадки с интернетом и проект не может быть сохранен в облаке. Но не стоит переживать, потому как вы можете сохранить свой макет прямо на компьютер. Сегодня мы как раз поговорим о том, как сохранить свой проект на компьютер и как загрузить файл .fig обратно в Figma. Как сохранить файл на компьютер из Figma Все проекты в Фигме имеют расширение файла .fig. Чтобы сохранить проект на компьютер вам необходимо: В навигационном меню выбрать File — Save As .fig. (если на Mac в десктопной версии) 
Или нажать на бургер и выбрать File — Save local copy. (есть на десктопной версии и в браузерной) 
Как загрузить файл .fig в Figma? Это второй вопрос, который возникает у многих. И тут, оказывается, всё довольно просто. Что в десктопной, что в брузерной версии Фигмы вам необходимо перейти в один из разделов, Recent или Drafts и в правом верхнем углу нажать на иконку со стрелкой «Import», выбрать нужный файл, после чего проект загрузится в Figma. 
Как сохранить файлы в Figma — обзор разных форматов
Figma — удобный инструмент для работы с графикой, создания презентаций, иконок и дизайнерских проектов. У программы понятный интерфейс, в котором легко ориентироваться. Но на начальных этапах работы всё же нужна помощь. Многие сталкиваются со сложностями при сохранении проектов и макетов в Фигме. Если хотите освоить все тонкости работы с этим инструментом, рекомендуем пройти онлайн-курс по Figma от Contented и Pentaschool.
Tutortop поможет понять, как сохранить файл на компьютер в Figma в таких форматах, как png, jpg, pdf, svg, какой из вариантов лучше выбрать для сохранения презентации, плаката, логотипа, страницы или сайта.
Быстрый экспорт файлов в Figma
Сохранить изображение, презентацию или иконку в Фигма можно быстро при помощи функции экспорта. Её можно использовать довольно часто в качестве основного варианта. Для сохранения необходимо выбрать документ, а затем нажать рядом с кнопкой «Export» на иконку «+». Программа предложит выбрать формат — например, jpg или pdf. Удобно, что перед сохранением можно предварительно посмотреть на файл и отредактировать его в случае, если допущена какая-либо ошибка. Для быстрого сохранения выбранного элемента необходимо нажать на кнопку «Export *название, ссылка на сайт*».
На этом этапе также можно уменьшить масштаб проекта, сделать разрешение меньше. Для этого необходимо выбрать 0,5х. Допустим, файл имеет размер 1400х900 — после изменения значения размер станет 700 на 450. Функция также работает в обратную сторону, однако тут стоит быть аккуратнее и всегда проверять качество логотипа, картинки, фотографии, плагина после сохранения.
Освоить навыки графического дизайна и сразу начать работать в Figma можно на онлайн-курсах от Логомашины и Нетологии. Ещё больше курсов по направлению дизайна на нашем портале.
Сейчас мы дарим 10 000 ₽ на обучение в любой из школ-партнёров, представленных на сайте tutortop.
Получите онлайн-курсы стоимостью 20 000 ₽ абсолютно бесплатно и промокод 10 000 ₽ на обучение.
Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.
Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.
Быстро экспортировать проекты также можно другим способом — в формате FIG. Стоит нажать на кнопку меню в верхнем левом углу, а затем щелкнуть на пункт File. Следующий шаг — Save local copy. Выбранный элемент тут же сохранится на ПК с расширением .fig — это внутренний формат Figma. Чтобы открыть документ на компьютере, понадобится специальная программа. Этот вариант универсальный, но всё же требует дополнительных инструментов для сохранения и открытия файлов. Рассмотрим и другие способы — например, как сохранить в Фигме работу jpeg, фото для печати, рисунок, плагин, плакат или изображение в нужном виде.
Как в Figma сохранить проект в JPG?
JPG считается растровым форматом и подходит для сохранения картинок, фотографий, макетов. Расширение «.jpg» хорошо тем, что цифровые фотографии и изображения сохраняются с поддержкой 24-битного цвета. JPG считается универсальным и в результате помогает получить качественное изображение для дальнейшего использования, добавить глубины цвета.
Тем, кто хочет научиться работать с форматами и изображениями, особенно в контексте графического дизайна, рекомендуем пройти онлайн-курс по графическому дизайну от Bang Bang Education. Вы узнаете не только, как сохранять проекты в различных форматах, но и расширите знания в области всего дизайна.
Если вы ранее не использовали Figma, обратите внимание на то, что в левой части экрана находятся инструменты для работы со слоями и страницы. Справа же можно найти различные настройки для дизайна, изменения цвета. Здесь же размещается кнопка для экспорта, о которой мы рассказывали выше. Чтобы сохранить файл, нажмите на плюсик и выберите JPG. Таким же образом можно добавить и картинку, дизайн в JPEG. Изображение с именем сохранится в ту папку или раздел, которую вы отметите в качестве подходящей — поэтому стоит уделить внимание выбору места, чтобы не потерять проект. Вы также можете использовать горячие клавиши для ещё более быстрого экспорта любого своего проекта — здесь подойдёт комбинация Ctrl + Shift + E.
Как сохранять в Figma в PNG без фона?
PNG также относится к растровым форматам и применяется для сохранения картинок и фото без фона. Его создали в качестве замены для GIF. В чём его преимущество? Есть возможность расширения пользовательскими блоками с возможностью оставить комментарий, а также неограниченное количество цветов в изображении. Сохранить проект в таком виде быстро и просто. Необходимо выбрать любое фото или картинку в приложении, отметить имя и выделить её при помощи специального инструмента для вёрстки. Далее — всё также, как и при работе с предыдущим форматом. Достаточно нажать на уже знакомый плюсик и ниже выбрать ПНГ.
Здесь можно сделать предпросмотр, просто нажав на кнопку «Prewie». Перед вами будет такое же изображение, но вместо фона вы увидите шахматную доску — так обозначается прозрачность.
Научиться более продвинутым техникам, чем сохранение изображений без фона, можно на онлайн-курсе от Онлайн-института Vill. Вы получите не только практические навыки, но и глубокое понимание творческих аспектов дизайна.
Сохранение файла в Figma в формате PDF
Не менее известный — PDF. Его используют для сохранения различных документов, презентаций, книг или брошюр. PDF подходит для многостраничных файлов, когда дизайнеру удобнее оформить сразу несколько документов в один проект. В Фигма возможно экспортировать каждый из составных элементов отдельно или же сделать один док, в котором будет множество страниц.
Если вы сохраняете макет статьи с более чем двумя слайдами, попробуйте такой вариант. В общем меню на вкладке слева выберите пункт «File», а затем «Export Frames to PDF» — многостраничный документ будет размещён на рабочем столе. Здесь не надо работать с помощью выделителя — Figma даже в браузере автоматически возьмёт все данные из проекта и сохранит их в формате пдф.
Выделить элемент стоит в том случае, если необходимо произвести экспорт только одного изображения — например, заставки или заключительной картинки. После выделения нужно нажать на плюсик рядом с «Export» и выбрать PDF. Эти шаги помогут экспортировать проект, брошюру, статью, самый большой плакат для печати, создать презентацию или обложку для книги в виде отдельного элемента.
Как сохранить проект в Фигма в SVG?
В отличие от PNG и JPG формат SVG — векторный. Это значит, что в нём нет пикселей. SVG также входит в подмножество расширяемого языка разметки XML и не проявляет зернистость, если приблизить изображение или объект на сайте или уже скачанный проект. Работа с этим форматом удобна, когда картинку или фотографию в дальнейшем надо будет редактировать в других программах — например, обрабатывать или накладывать на другое фото. СВГ хорошо подходит для экспорта и настройки иконок, иллюстраций, графики, похожих простых фигур и элементов, которые созданы при помощи карандаша или кисти в Figma.
Сохранить работу просто — нужно нажать на «+» и выбрать SVG. Бесплатный прототип объекта для автора будет размещён на рабочем столе или в указанной папке.
Топ курсов, где вы не только изучите векторную графику, но и методы создания пользовательских интерфейсов (UI) и интуитивно понятного опыта пользователя (UX). Развивайте свои навыки на онлайн-курсах и превратите идеи в визуальные шедевры, которые удивят и вдохновят каждого.
Экспорт группы файлов
Часто проекты состоят из нескольких слоёв, каждый из которых нуждается в экспорте. Сохранить их группой гораздо удобнее и быстрее, чем экспортировать по одному. При этом часть может быть векторными, а часть — фотографиями. Выберите нужные вам слои и выделите их при помощи клавиши Shift. Произвести экспорт можно в виде zip-архива в нужном формате, если хотите открыть файлы сразу. Когда вы распакуете архив, то увидите необходимое количество изображений с названиями и комментарий по определённым слоям, с возможностью перейти на панель для ответа. Если же необходимо сохранить все слои в качестве единой картинки, стоит нажать комбинацию клавиш Ctrl + G. Перед вами также окажется новый zip-архив, но только в нём будет лишь один элемент.
Хотите стать дизайнером? Присоединяйтесь к курсу «Профессия Графический дизайнер с нуля» от Skypro и получите стажировку в подарок.
Как поделиться проектом без сохранения на ПК?
Вы можете отправить ссылку на готовый макет без сохранения его на компьютер и добавить нужный текст. Экспортировать файлы важно в том случае, если их надо передать на другой носитель, например. Но когда вам необходимо представить предварительную версию заказчику, проще использовать функцию «Поделиться». Наверху справа есть кнопка «Share» — стоит нажать её и скопировать ссылку. В Figma есть удобная функция для тех пользователей, кому важно отправить ссылку сразу на готовый проект и оставить комментарий по желанию. В верхнем правом углу найдите иконку «Play». Кликните по кнопке «Share prototype» и скопируйте ссылку, нажав на «Copy link».
Стань дизайнером бесплатно!
Мы собрали бесплатные курсы для саморазвития или повышения квалификации. Вы найдёте разные программы по самым популярным и востребованным направлениям в дизайне.
Анна Уженкова
Копирайтер. Увлекается литературой и любит разбираться в сложных вещах. В работе ценит сам процесс — тексты, это не просто тексты, а возможность на что-то повлиять. Среди тем, которые нравятся, — образование, психология, IT.
Лиза Шарипова
Веб-дизайнер. Занимается дизайном с 2020 года. Училась в Skillbox, BBE, проходила курсы по типографике и композиции. Полностью упаковывала образовательный продукт для IT-компании EPAM и делала лендинг для международного стартапа. Любит путешествовать и находит в этом вдохновение.
Figma: ТОП-18 вопросов, как сохранить, вставить, вырезать и многое другое
13.04.2021
Сложность: новичок
8 мин.
20 596
У новичков при работе с сервисом Figma могут появиться некоторые вопросы. Чтобы изучение проходило проще, мы подготовили список часто задаваемых вопросов и ответов к ним. Из этой статьи вы узнаете, как скачать, установить и настроить Фигму, а также как сделать картинки, кнопки, линии и многое другое.
К нашему списку можно обращаться в любой момент, когда у вас возникают вопросы при разработке дизайна.
№ 1. Как скачать Фигму, установить и настроить её?
Desktop приложение Фигма находится в открытом доступе и распространяется бесплатно. Чтобы его установить, сначала требуется зарегистрироваться. Для этого переходим на официальный сайт figma.com и выполняем следующие действия:
- Нажимаем Sign Up, кликая по кнопке в шапке;
- Вводим свой email и пароль;
- Указываем данные, такие как фамилия и имя;
- Отвечаем на вопрос “для чего планируется использовать сервис?” и в раскрывающемся списке выбираем ответ. Если собираетесь использовать для дизайна, оставляем “Design”.
- После выполнения всех пунктов переходим на главную страницу, нажимаем на свое имя и оказываемся в профиле, здесь есть три вкладки: Teams, Plugins и Settings. В нашем случае выбираем вторую вкладку и нажимаем ссылку “Download the latest desktop app”. Пример всех действий показан на скриншоте ниже:
Ждем завершения скачивания и начинаем установку. Процесс инсталляции мало чем отличается от других программных пакетов. Если при запуске у пользователя возникнут проблемы, первое, что следует сделать, это сверить системные требования своего ПК.
Операционная система (ОС)
Десктопная программа запускается в зависимости от установленной системы. Например, если это Windows, то убедитесь, что версия не старше 8.1. В случае, когда на компьютере стоит MacOS, то здесь требования – версия не старше 10.10 (Yosemite). Linux – допустима любая версия.
Если планируете использовать сервис в браузере, то здесь уже нужно сверяться с цифрами, которые обозначены в настройках. Для корректной работы подойдут версии:
- Google Chrome – ver 58+
- Mozilla FireFox – ver 57+
- Safari 11+
- Microsoft Edge – 16+
Технические характеристики ПК
Для создания графики рекомендуется видеокарты не старше 2012 года, на более старых возможно тоже будет работать, но это будет существенно сказываться на производительности системы.
После того, как пользователь успешно прошел регистрацию в сервисе, его может заинтересовать следующий вопрос.
№ 2. Как настроить Фигму?
Все изменения производятся в личном кабинете. Для этого следует перейти в профиль, затем вам станет доступно сменить имя, email и password, а также предложение включить двухфакторную аутентификацию, что позволит установить двойную защиту на аккаунт.
Есть еще функции обновления плана, создание профиля сообщества, установка настроек, связанных с уведомлением.
В системе доступен токен и библиотека. Некоторые опции могут оказаться сложными для понимания, так как интерфейс полностью на английском, но с этим кое-что можно сделать.
№ 3. Как сделать фигму на русском языке?
Сервис не поддерживает мультиязычность, поэтому придётся разбираться собственными силами. В интернете достаточно информации, и обучающего контента от разных авторов. Если срочно нужно получить перевод, то здесь поможет Google переводчик. Про остальные функции можно узнать в разных источниках, включая форумы и интернет-сообщества, например, figma.community.
Когда возникли вопросы или нужен совет по установке плагина для выполнения определенных задач, то следует обратиться на форум. Сам по себе онлайн-сервис наделен минимальным набором инструментов, поэтому не требуется глубоких знания английского, чтобы разобраться, как работать в фигма.
При первом знакомстве с сервисом новичок увидит панель управления и несколько кнопок. Если сравнивать с фотошопом, то главное отличие в том, что здесь минимальный набор инструментов, поэтому запомнить все гораздо проще. Часто бывает так, что стандартного функционала недостаточно, тогда в ход вступают плагины. Их создают программисты для своих проектов, чтобы увеличить стандартные возможности. На момент написания статьи было выпущено 420 дополнений к веб-сервису. Чтобы добавить новые функции, plugin нужно подключить.
№ 4. Как установить в фигме плагин?
Первым делом создадим новый проект. На главной странице щёлкнем по +New, находится эта ссылка в правом верхнем углу, затем нас перебросит в редактор. Нажимаем на гамбургер-меню и выбираем из раскрывающегося списка пункт Plugins, нас интересует Manage. Именно там находятся все утилиты, дающие новые функции.
Переходим во вкладку. Здесь можно увидеть уже активные подпрограммы, а ,чтобы установить дополнительные утилиты, нужно перейти по ссылке.
Дальше откроется весь список. Там можно выбрать себе подпрограмму, подходящую для работы. Не стоит устанавливать себе все подряд, сначала рекомендуется научиться создавать простенькие дизайны, используя стандартный набор инструментов, а потом уже подсоединять функции, которых нет в системе. Перечень утилит показан на скриншоте ниже, самые популярные, которые имеют наибольшее количество установок, стоят сверху:
Когда требуется решить конкретную задачу, то первым делом следует искать plugin под задачу в интернете.
Запустив свой первый project на рабочей области, вы скорее всего будете использовать фрейм. Наверняка вам захочется разместить примитивы. Чтобы ваши фигуры смотрелись ровно, с соблюдением всех отступов, предлагается воспользоваться сеткой. Как это сделать – рассказываем ниже.
№5. Как включить в фигме сетку и линейку?
Данный инструмент находится в свойствах фрейма, в правом окне, называется “Layout Grid”. Нажав плюсик, у вас вся область покроется красными линиями. Цвет можно отрегулировать и установить, например, оранжевый. Все это делается в настройках Grid. Там же выбираются такие параметры, как Колонки (Columns) и Ряды (Rows).
Кроме всего этого, может понадобиться линейка, она пригодится для выравнивания по линии. Чтобы на экране появилась линийка, нужно её включить, для этого перейдите в меню view->Rulers, как показано на картинке.
Появятся две полоски с цифрами, вертикальная и горизонтальная, чтобы добавить линию, нужно щелкнуть мышкой по линейке и удерживая переместить на frame, затем на области появится “line”. В дальнейшем line можно переместить на удобную позицию. Здесь мы дали ответ, как сделать в фигме сетку и расположить объекты.
При создании крупных проектов, иногда приходится взаимодействовать с мелкими деталями и, чтобы подробнее рассмотреть контейнеры, может понадобиться приблизить область, и тут перед начинающим дизайнером встает вопрос: как увеличить объект в фигме?
Для этого существует зумер. Пункты по настройке зума, соответственно, находятся в меню в разделе View.
Чтобы отдалить или приблизить, воспользуемся первыми двумя кнопками Zoom In и Zoom out, горячие клавиши “+” и “-”. Когда требуется “приблизить на 100 %”, то включаем третий параметр. Если “полностью показать дизайн”, то активируем четвертый пункт. Пятый, selection, отображает только выделенный контейнер. Например, если выбрать rectangle и потом нажать Zoom to selection, то камера сконцентрируется на квадрате, то же самое и с любым другим контейнером.
Увеличивать можно, используя колесико мыши. Когда будете прокручивать, то удерживайте клавишу CTRL.
При разработке макетов важно уметь быстро взаимодействовать с контейнерами, поэтому необходимо знать, как выделять элементы в фигме . Чтобы выбрать несколько объектов из группы, щелкайте по ним, удерживая Shift. В левой панели есть вкладка Layers, с её помощью тоже можно выбирать отдельные блоки. Если хотите ускорить процесс своей работы, то используйте горячие клавиши.
- Shift+Tab – переходит на следующий контейнер, предыдущий должен быть выбран заранее мышкой.
- Enter – чтобы провалиться внутрь и отобрать все содержимое, нажмите “Ввод”. Помните, что frame при этом должен быть выбран.
- Shift+Enter – это обратный способ. Он позволяет подняться на уровень вверх и сделать отмеченным главную область. Запомните, что в этом случае один или несколько блоков должны быть выбраны.
- Main menu->Edit->Select All – отмечает все объекты. Если вдруг потребуется отобрать только с одинаковым цветом заливки, то в этом случае “same fill”.
№6. Как сделать текст в Фигме?
При разработке прототипа вам понадобятся надписи, из которых сформируется меню. Для этих целей существует Text, чтобы вставить текстовое поле, нажмите на кнопку в панели управления или же горячую клавишу T.
Щелкайте по области и начинайте вписывать название. Иногда может понадобиться разнообразить шрифты, поэтому следует загрузить дополнительные fonts (шрифты). Работая в десктопной версии программы на ПК, у вас автоматически пойдет подгрузка всех встроенных на компьютере шрифтов. Когда речь заходит о том, как установить шрифт в Фигму, то в этом случае, достаточно скачать нужный font, найти специальную папку на ПК (воспользовавшись поиском), и туда скинуть новые текстовые стили.
Другое дело, когда идет процесс разработки в браузере, и срочно нужно написать текст в необычном стиле, чтобы впечатлить заказчика. Для такого хода потребуется произвести установку, используя внутренний функционал сервиса.
Как добавить шрифт в Фигму ?
Здесь нет ничего сложного: переходим в панели Settings аккаунта пользователя и ищем кнопку “Download installer to enable local fonts”. Пример всех действий показан на скриншоте:
Начнется загрузка, исполняемый файл exe требуется запустить. Появится сообщение, что локальные шрифты загружены. На официальном сайте есть плагин Font Awesome Icons, он во всплывающем окне показывает набор иконок. Чтобы им воспользоваться, необходимо установить plugin в браузере. Разъяснение, как поставить плагин, написано выше.
Чтобы сделать профессиональный дизайн, придется прорабатывать разные технические моменты. Для этих целей существуют примитивы, которые предлагается использовать для создания рисунков и логотипов. Например, одним из веб-инструментов является линия, с её помощью можно чертить прямые и делать захват края, когда требуется отрегулировать наклон.
Так как работа преимущественно состоит из графики, соответственно, нам придется разнообразить веб-дизайн интересными иллюстрациями из интернета.
№ 7. Как вставить в Фигме картинку?
В интернете предлагается широкий доступ к изображениям. С помощью “гугл” и “яндекс картинки” можно подыскать фото на любую тематику. После скачивания фотографию следует добавить к себе в программу. Лучше всего это сделать, просто перетащив её на рабочую область.
Другой вариант воспользоваться командой “Place Image (Ctrl+Shift+K)”.
В открывшемся окне выбираем мышкой подходящие файлы, удерживая при этом Shift, нажимаем открыть. Файлы прикрепятся к курсору, после каждого щелчка на frame, они будут размещены. Можно воспользоваться Place All, для быстрого добавления.
Создавая прототип, рекомендуется уметь вырезать объекты из jpg-файла. Например, когда потребуется создать логотип для компании. Если посмотреть в интернете знаменитые лого, то можно обнаружить некоторые закономерности, они все включают в себя примитив – круг, квадрат или треугольник, остальное – это просто название компании.
Сейчас создадим logo гостиницы, для этого возьмем подходящее фото в интернете и уберем background, оставим только здание.
№ 8. Как вырезать в Фигме объект?
Чтобы отобразить только постройку, нужно применить Tools Pen. Перо подходит, так как способно обеспечить высокую точность. Начинаем прокладывать линии вокруг здания.
Если посмотреть на вкладку Layers, то видно, что у нас получился “Vector 1”. Воспользуемся параметром Fill в правой панели, чтобы сделать заливку.
Vector1, который отображается в слоях – это маска, с помощью неё мы удалим background и оставим только здание. Перетащим маску, чтобы она отображалась на верхней ступени и не закрывала “отель”. Щелкнем на vector1 в слоях и применим Use to mask (Ctrl+Alt+M).
Нам удалось скрыть background. Иногда веб-дизайнер может столкнуться с ситуацией, когда объект вырезан неровно и часть скрыта под маской. В этом случае можно применить одну хитрость. Добавить на линии “вектора” усики, за которые можно потянуть и сдвинуть границу. Делается это следующим образом. В первую очередь, следует закрыть основную картинку от редактирования, повесив замок. После того, как изображение заблокировано, двойным щелчком нажимаем на Vector1. Появится новая панель редактирования.
Выбираем перо, как показано выше, и добавляем усик, щелкая по границе вектора, и рисуем в направления внутрь картинки. Чтобы закрепить , жмем дважды мышкой или на кнопку “Done”.
Дальше хватаем точку и двигаем в нужном направлении, настраивая выравнивание. Когда удалось добавить Mask, нужно соединить все слои.
№ 9. Как объединять в Фигме?
Для этих целей существует группировка, чтобы её сделать, нужно выделить оба объекта и нажать комбинацию клавиш CTRL+G. Другой вариант – воспользоваться контекстным меню, нажав правой кнопкой мыши Group Selection.
Чтобы разгруппировать элементы, щелкаем на объединенном объекте и CTRL+SHIFT+G. В контекстном меню появится новый пункт Ungroup, он тоже используется для разъединения. Иногда может потребоваться создать компоненты. Они нужны, чтобы добавлять большое количество шаблонов с одинаковыми свойствами, но измененными некоторыми составляющими.
Примером может служить кнопка, у которой проставлены одинаковые размеры, но цвет и имя должны отличаться. Для объединения в компонент, выберем два блока и нажмем CTRL+ALT+K или на верхней панели соответствующую кнопку, там также есть раскрывающий список, где предлагается использовать Create Multiple Components. Он позволяет сделать компоненты из всех отмеченных объектов.
Сейчас применим группировку (CTRL+G) и объедим здание с “маской”. Теперь создадим логотип рекламы “отеля”. Чтобы здание отображалась в круге. Нарисуем эллипс и заполним его цветом.
Расположите его ниже Group 1, сделайте копию и перетащите рядом. Ctrl+C и Ctrl+V.
Ко второй группе снова применим маску.
Выступающие края у первой группы (Group1) следует убрать, а именно срезать углы.
№10. Как обрезать в фигме картинку?
Сначала найдем в Group img1. Убедитесь, что в img1 замочек открыт, иначе не удастся срезать края. После отметки иллюстрации сверху появится Crop Image, нажимаем на него. Отобразятся захваты вокруг картинки, хватаем нижний и перемещаем наверх. Последовательность всех действий показана ниже:
В итоге получилось два контейнера, теперь один следует наложить на другой.
Таким образом, используя маски и срезы можно создавать logo для компании, конечный результат:
В свободном пространстве эллипса можно написать названия отеля.
№11. Как сделать в Фигме фон или убрать его вообще?
Иногда дизайнеру нужно оставить некоторые предметы, а background удалить или заменить. Разумеется, подойдет вариант, описанный выше, способ с помощью пера и маски, но есть более действенный способ. Для этих целей существует plugin, который называется Remove BG. Он работает на нейронных сетях и умеет автоматически вырезать фон. Чтобы быстро его найти, вбиваем название в google и переходим на веб-сайт.
Нажимаем Install, теперь, если перейти в веб-сервис, появится Remove Bg, там есть два пункта “Run” и “Set Api Key”. Сначала перейдем в Set Api Key. Появится инструкция из двух шагов, выбираем ссылку и переходим на вебсайт, чтобы пройти регистрацию.
Посещаем сайт и регистрируемся, в верхнем левом углу жмем кнопочку Login/Sign Up. Переходим во вкладку и заполняем данными, указываем почтовый адрес и пароль. Есть две галочки, первая обязательная, вторая – это запрос “присылать уведомления, рассылки о новых функциях и предложениях”.
После заполнения щелкаем по Sign up, на почту придет письмо с активацией. Если не пришло, проверьте папку “Спам”, иногда по ошибке почта попадает туда. Переходим по ссылке и активируем аккаунт, теперь можно пользоваться функционалом. Зайдем в My Dashboard и направимся в Api Key, затем нажимаем на Show, появится ключ Api.
Копируем ключ и возвращаемся в плагин, открываем окно и вставляем key, потом щелкаем по save:
Чтобы протестировать, как работает Remove BG, найдем подходящую картинку в интернете, например, “Люди”.
Применим к фото plugin->Run и посмотрим результат, в итоге должна получиться фотография девушки без лишних объектов. Теперь сделаем background, например, офис, и наложим на картинку. При этом делайте так, чтобы слой office находился ниже в слоях, чтобы не перекрывал фото девушки. Пример:
Таким образом, с помощью плагина накладывается и убирается фон. Достаточно удобный инструмент Remove BG, так как нет надобности вырезать отдельные объекты с помощью “пера”, все делает утилита автоматически.
Каждый прототип обычно сопровождается кнопками. Они создаются с помощью обычных примитивов: квадратов, эллипсов и, соответственно, сверху накладывается надпись. Создадим контейнер с название button1. Цвет и другие настройки можно назначить в Design. Делаем объединение в компонент, придумываем название.
Дальше можно копировать несколько раз, менять настройки и добавлять новые параметры, один из которых может быть gradient.
№ 12. Как сделать в Фигме градиент?
Кроме заливки в палитре цвета присутствует такой параметр как gradient. Чтобы добавить его, нужно выбрать стиль в раскрывающемся списке: Solid, Linear, Radial, Angular и Diamond. Ниже под списком можно обнаружить цветовой ползунок, на нем отмечаются цвета, которые помогут придать другой оттенок линиям.
Для наглядности ниже показано и подписано, как будет выглядеть каждый градиент по-отдельности.
Обсудим некоторые вопросы, которые интересуют пользователей figma.
№13. Как удалять в фигме?
Выделяем любой контейнер и нажимаем клавишу на клавиатуре del или delete.
№14. Как скопировать в фигме?
Чтобы сделать сразу несколько копий, потребуется произвести действие на выбранном субъекте CTRL+C.
№15. Как вставить в фигме?
Когда элемент скопирован, его нужно вставить, для этого существует быстрый способ CTRL+V.
№16. Как отменить в фигме последнее действие?
Чтобы сделать шаг назад, используются комбинации клавиш CTRL+Z.
№17. Как сохранять в фигме?
После завершения проектных работ, нужно сделать сохранение. В системе уже заранее предусмотрено autosave, все копии хранятся в истории. Чтобы занести в историю еще копию, нажмите Ctrl+Alt+S.
№ 18. Как экспортировать из фигмы?
Когда требуется сделать Export конкретного jpg файла или группы из нескольких image, в этом случае в правой панели нужно воспользоваться опцией Export, нажать плюсик, и выбрать формат сохранения, после этого нажать Export Group.
В левом верхнем есть дополнительные пункты для сохранения и показа истории версий копий (Show Version History).
Рис_44 alt:
В этой статье мы ответили на вопросы, как работать в фигме , сохраняться, рисовать новые объекты и примитивы, делать группировку и вставлять фотографию поверх другого фона.