Как фрейм превратить в изображение фигма

Из растра в вектор в Figma [Плагин]

Плагин Image Tracer предназначен для конвертации растровых изображений (PNG, JPG) в вектор.

Содержание скрыть

Плагин конвертирует исходное изображение в черно-белое, находит точки по границам черного и белого и строит по ним кривые. В итоге вы получаете вектор с прозрачностью, который вы можете экспортировать как в растр, так и в .SVG (И в дальнейшем конвертировать его в .AI, .eps и другие векторы с помощью сторонних сервисов). Очевидно, вектор вы сможете увеличивать в размерах без потери качества.

Плагин отлично подходит для обработки рукописного текста, подписей (автографов), печатей, простых иконок. Результаты, содержащиеся на скриншоте, мы получили не с первой попытки (потребовалось попробовать разные настройки), и, вероятно, это не самые лучшие результаты, которых можно добиться.

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

Чем больше разрешение исходного изображения, тем лучше будет результат.

Как пользоваться

1. Выберите слой (или несколько слоев) с изображением
2. Запустите плагин
3. (Опционально) Измените настройки
4. Нажмите Place traced vector

Параметры настроек

• Invert image — инвертировать обнаруженные части изображения. Пустые области будут залиты, залитые — станут прозрачными
• Threshold — порог. Чем он выше, тем чувствительнее плагин к тонким линиям и шумам
• Blur — сглаживает мелкие неровности
• Ignore less then — значение, указывающее, ниже какого размера объекты будут игнорироваться. При очень высоких значениях плагин проигнорирует ваше изображение полностью
• Smoothness — гладкость, мы сильного влияния этого параметра не обнаружили
• Curve optimisation — параметр, указывающий на то, насколько сильно плагин попробует оптимизировать кривые
• Show path — показывать контуры (нового вектора)
• Show points — показывать ли обнаруженные точки
• Fade image — сделать исходник полупрозрачным

Как сохранять в Фигме: форматы JPG, PNG, PDF, SVG, FIG

В этой инструкции вы узнаете, как сохранять проекты или отдельные части вашей работы в фигме на компьютер в следующих форматах:

• JPG — самый популярный формат. Подходит для сохранения любых изображений, фотографий, макетов и т.д.
• PNG — формат подходит для картинок с прозрачным фоном.
• SVG — векторный формат. Подходит для экспорта иконок, иллюстраций, логотипов и т.д.
• PDF — если нужно создать какой-либо документ или презентацию.
• FIG — внутренний формат Figma, для сохранения на компьютер.
• Массовый экспорт — подойдет, если нужно сохранить сразу много картинок, фото, иконок или других элементов в представленных форматах выше.

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

Быстрая инструкция по экспорту файлов в Фигме

Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.

Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Изменение масштаба экспортируемых файлов

Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.

Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.

Сохранить проект или картинку в Figma в формате JPG

Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.

Сохранение из фигмы файлов в формате PNG

Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.

Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.

Экспорт в формате SVG

Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.

Как сохранить в Фигме в формате PDF

Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).

1. Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
2. Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.

Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта.

Экспорт в PDF выбранных элементов:

Если вы выберите какие-либо элементы и нажмете справа на иконку плюсика, то можете сохранить несколько файлов в PDF по отдельности. В этом случае не будет создан единый файл в виде книги или брошюры.

Как сохранить проект в Фигме в формате FIG (внутренний формат)

Импорт файлов в Figma в формате «.fig»

Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.

Массовый экспорт из Figma

Как называть файлы, чтобы сохранить их в разные папки при экспорте

Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.

Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:

• 1/Wooman
• 2/Landing Page
• 3/Illustration

Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».

Далее поговорим о форматах и для каких элементов они подходят.

Важное дополнение:

Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).

Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»

P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.

Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.

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

Экспорт в Figma. Как сохранять в Фигме (PNG, JPG, PDF, SVG, MP4, GIF)

Чтобы экспортировать элементы, выделите их в списке слоев и нажмите на «+» в разделе Export в правом окне инструментов. После этого появится окно с настройками экспорта, в котором вы можете выбрать размер, дополнение к названию (Suffix) и формат файла.

Видео: экспорт в Figma


Тег video не поддерживается вашим браузером

Как экспортировать элементы в один слой

За один слой Figma считает группу или фрейм. Если у вас есть несколько элементов и вы хотите, чтобы они экспортировались как одно изображение (например PNG), объедините их в одну группу (cmnd + G).

Если вы выделите несколько отдельных элементов, они экспортируются как разные файлы

Вы можете экспортировать элементы сразу в нескольких расширениях — для этого в разделе Export нажмите еще раз «+» и укажите дополнительные форматы. То есть вы можете выгрузить изображения сразу как svg и png, и в любых других комбинациях.

Как указать разрешение

В окне разрешения вы можете либо указать кратность — 1X, 2X и т.п. Это значение, на которое будет умножено фактическое разрешение сторон экспортируемой группы/фрейма/элемента.

Либо вы можете указать ширину стороны — высоты или длины. 512w — означает ширину 512 пикселей, 512h — высоту. Вы можете указывать свои значения, либо выбрать из предустановленных вариантов.

Презентация

Вы можете демонстрировать результаты своей работы, используя режим презентации. Подробнее об этом читайте в этой статье.

Экспорт области экрана

Если вам требуется экспортировать только часть вашего проекта (по действию похоже на «Ножницы» в Windows и скриншот части экрана в Mac), воспользуйтесь инструментом Slice. Подробнее читайте здесь.

Сохранение файла проекта

Вы также можете сохранить весь файл на локальный диск, об этом читайте здесь.

Экспорт в PDF одним файлом

Дополнительная опция Export Frames to PDF выгружает все найденные на странице фреймы в один PDF.

Как использовать экспорт в один PDF читайте здесь.

Экспорт в видео и GIF

Для экспорта в видео есть несколько плагинов: читайте здесь.

В помощь дизайнеру: горячие клавиши в Figma

У Figma есть все возможности для того, чтобы дизайнеры справлялись с работой максимально быстро и легко. Рассказываем, какие хоткеи есть и как их использовать.

Михаил Терентьев
Основатель Mailfit & Letteros

Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.

В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.

Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.

Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.

Essential keyboard shortcuts

Essential keyboard shortcuts — это Основные клавиатурные сокращения.

Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.

Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.

Чтобы открыть Меню, нажмите Ctrl + / на Windows и ⌘ + / на Mac.

Tools

Tools — это Инструменты.

Чтобы выбрать стандартный инструмент выделения, нажмите V.

Чтобы выбрать инструмент для создания фреймов, нажмите F.

Чтобы выбрать Перо, нажмите P.

Чтобы выбрать Карандаш, нажмите Shift + P.

Чтобы выбрать Текст, нажмите T.

Чтобы выбрать Прямоугольник, нажмите R.

Чтобы выбрать Эллипс, нажмите O.

Чтобы выбрать Линию, нажмите L.

Чтобы выбрать Стрелку, нажмите Shift + L.

Чтобы добавить или показать комментарии, нажмите С.

Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.

Чтобы выбрать Нож, нажмите S.

View

Чтобы показать или скрыть Линейки, нажмите Shift + R.

Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac.

Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.

Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.

Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ⌘ + ‘ на Mac.

Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.

Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac.

Чтобы показать или скрыть Только слои, нажмите Alt + 1.

Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.

Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.

Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.

Zoom

Zoom — это Приближение или Масштабирование.

Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.

Чтобы увеличить масштаб, нажмите +.

Чтобы уменьшить масштаб, нажмите —.

Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.

Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.

Чтобы масштабировать выделенный элемент, нажмите Shift + 2.

Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.

Чтобы масштабировать следующий фрейм, нажмите N.

Чтобы найти предыдущую страницу, нажмите Page Up.

Чтобы найти следующую страницу, нажмите Page Down.

Чтобы найти предыдущий фрейм, нажмите Home.

Чтобы найти следующий фрейм, нажмите End.

Text

Text — это Текст.

Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ⌘ + B на Mac.

Чтобы выделить текст курсивом, нажмите Ctrl + i и ⌘ + i на Mac.

Чтобы подчеркнуть текст, нажмите Ctrl + U и ⌘ + U на Mac.

Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.

Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac.

Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac.

Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac.

Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac.

Чтобы изменить размера текста, нажмите Ctrl + Shift + < и >на Windows и ⌘ + Shift + < и >на Mac.

Чтобы изменить расстояние между символами, нажмите Alt + .

Чтобы изменить расстояние между строками, нажмите Alt + Shift + .

Shape

Shape — это Векторные изображения.

Чтобы выбрать Перо, нажмите P.

Чтобы выбрать Карандаш, нажмите Shift + P.

Чтобы выбрать Заливку, нажмите B.

Чтобы удалить заливку, нажмите Alt + /.

Чтобы удалить обводку, нажмите /.

Чтобы поменять местами обводку и заливку, нажмите Shift + X.

Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac.

Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ⌘ + E на Mac.

Selection

Selection — это Выделение.

Чтобы выделить всё, нажмите Ctrl + A на Windows и ⌘ + A на Mac.

Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac.

Чтобы отменить выделение, нажмите Esc.

Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ⌘ + click на Mac.

Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ⌘ + right click на Mac.

Чтобы выделить дочерний элемент, нажмите Enter.

Чтобы выделить родительский элемент, нажмите Shift + Enter.

Чтобы выделить следующий по порядку элемент, нажмите Tab.

Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.

Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ⌘ + G на Mac.

Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac.

Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac.

Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac.

Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac.

Cursor

Cursor — это Курсор.

Чтобы выделить элемент при клике, нажмите Alt.

Чтобы копировать элемент при движении, нажмите Alt.

Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ⌘ + click на Mac.

Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ⌘ + right click на Mac.

Чтобы изменить размер относительно центра элемента, нажмите Alt.

Чтобы изменить размер пропорционально, нажмите Shift.

Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ⌘ на Mac.

Edit

Edit — это Редактирование.

Чтобы копировать, нажмите Ctrl + C на Windows и ⌘ + C на Mac.

Чтобы вырезать, нажмите Ctrl + X на Windows и ⌘ + X на Mac.

Чтобы вставить, нажмите Ctrl + V на Windows и ⌘ + V на Mac.

Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac.

Чтобы создать копию, нажмите Ctrl + D на Windows и ⌘ + D на Mac.

Чтобы переименовать, нажмите Ctrl + R на Windows и ⌘ + R на Mac.

Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac.

Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac.

Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac.

Transform

Transform — это Трансформирование.

Чтобы отразить по горизонтали, нажмите Shift + H.

Чтобы отразить по вертикали, нажмите Shift + V.

Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac.

Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.

Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac.

Чтобы обрезать изображение, нажмите Alt + dbl-click.

Чтобы задать прозрачность элементу 10%, нажмите 1.

Чтобы задать прозрачность элементу 50%, нажмите 5.

Чтобы задать прозрачность элементу 100%, нажмите 0.

Arrange

Arrange — это Выравнивание.

Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ⌘ + ] на Mac.

Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ⌘ + [ на Mac.

Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac.

Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac.

Чтобы выровнять по левой стороне, нажмите Alt + A.

Чтобы выровнять по правой стороне, нажмите Alt + D.

Чтобы выровнять по верхней стороне, нажмите Alt + W.

Чтобы выровнять по нижней стороне, нажмите Alt + S.

Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.

Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.

Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac.

Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac.

Components

Components — это Компоненты.

Чтобы показать все компоненты, нажмите Alt + 2

Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.

Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac.

Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac.

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

Подписывайтесь на ежемесячный дайджест Mailfit

Раз в месяц присылаем новости диджитала, последние кейсы, рассказываем про работу, собираем интересный и полезный контент в одном письме.

ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку