Как сделать копию проекта в figma

Сохранение файлов в Figma

04.02.2024

Сложность: средняя

6 мин.

2 584

Сегодня разберем, простой на первый взгляд, функционал скачивания готовых слоев, export, в графическом редакторе figma. Расскажем про различные форматы и как правильно экспортировать в фигме без потери качества.

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

JPEG (JPG) — растровый графический формат с высокой степенью сжатия для изображений и фотографий. Имеет расширения .jpg, .jpe, .jpeg, .jfif, поддерживает 24-битный цвет. Его плюс: занимает мало места, имеет высокое качество. Еще вас могут путать обозначения JPEG и JPG, но это один и тот же графический формат. Разница незначительна: .jpg чаще используется в Windows, а .jpeg — в Unix и macOS, но оба расширения полностью совместимы. Изображения в этих форматах имеют одинаковое сжатие, качество и цветовые данные.

Перейдем к практике. Как экспортировать в фигме JPG ? В нашем проекте заранее подготовлена обложка, она состоит из нескольких элементов – задний фон, мужчина и надпись. Все это упаковано в фрейм, чтобы выполнить Export, нужно в слоях выбрать Frame 1 и в панели Design, в раскрывающемся списке указать JPG, после нажать “Export Frame 1”. Последовательность действий показана на картинке.

При скачивании имя файла будет такое же, как у фрейма. Если нужно сохранить под другим названием, меняем при сохранении. А вообще, правильно заданные названия слоев, с самого начала, экономят много времени и помогают не запутаться. Крупные проекты состоят из неимоверного количества слоев. Даже наш простой баннер-пример имеет 14 слоев. Если прототип содержит слишком много мелких деталей, с ним становится неудобно работать. В таких случаях полезно объединять слои в группы и давать им понятные названия. Часто макеты скачиваются по частям, чтобы их было легче интегрировать в веб-сайт.

При создании фрейма следует указывать точные размеры. Под каждую задачу существуют свои стандарты, например обложка для ютуба составляет 1280 на 720. Это идеальней размер, чтобы картинка одинаково смотрелась на компьютере, и мобильном устройстве. При экспорте ширина и высота будет взята из вкладки Design.

Иногда требуется сохранить просто картинку. Например, castle-forest как на скриншоте ниже. Щелкаете по изображению, выбираете JPG и Export.

У фотографии можно изменить масштаб, захватив угол мышкой и перетащив. При нажатии кнопки Export фотка будет загружена с новыми параметрами ширины и высоты.

Как сохранить проект в фигма — формат PNG?

Расширение было разработано как замена GIF, и в отличие от него имеет неограниченное количество цветов. PNG — это растровый формат, используется в дизайне и иллюстрации. Графическая информация png хранится в сжатом виде, но в отличие от JPEG при сжатии качество не теряется. Особенность этого формата — возможность сделать часть фотографии прозрачной. Вернемся к нашей обложке, там размещена фотография мужчины, где отсутствует фон. Выберем ее мышкой и сохраним в PNG.

Сохраненный файл можно открыть через графический редактор на компьютере и добавить новый слой с заливкой или картинкой (backhround).

Как убрать background?

Раньше для удаления заднего фона пришлось бы вручную вырезать с помощью “лассо” и других инструментов. Сейчас существуют специальные плагины. Например, в Figma — Icons8 Background Remover. Результат работы Background Remover.

Сохранение одним файлом. Способ одинаково работает, как на JPG, так и на PNG. Допустим, нужно скопировать всю рабочую область в один графический файл. Щелкайте по пустому пространству и экспортируйте. Где применить? Например, создать инфографику – каждый отдельный слой это раздел с информацией и картинками.

Как изменить масштаб при сохранении?

Скачать слои без потери качества можно и с другим масштабом (scale). Для этого существует опция, где прописывается значение. Масштабирование происходит в кратном размере, если указать 2x, то обложка увеличиться в 2 раза вместо 1280×720, станет 2560×1440.

Если сделать значение меньше единицы, например, указать 0.8, то ширина и высота будет 80% от изначального значения.

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

Данный формат — это векторная графика, которая храниться в виде разметки. В файле находятся координаты, которые служат точками для соединения отрезков. SVG можно «растягивать» до любых размеров без потери качества. Основное отличие SVG от других векторных форматов — используется при верстке сайтов и разработке мобильных приложений из-за малого размера файлов и возможности настройки. SVG редактируется и в графических редакторах, и с помощью HTML и CSS.

Где используется? Чаще всего в иконках. Чтобы сохранить иконку под формат SVG, вам нужно создать векторную графику в Figma. Существует несколько способов это сделать.

1. Нарисовать вручную — инструмент Pen.
2. Конвертировать иконку — plugin Image Tracer.
3. Воспользоваться готовым шаблоном — плагин Iconify или похожим.

Рассмотрим второй вариант — загружаем иконку формата png в редактор и делаем трассировку с помощью Image Tracer.

Получаем вектор и делаем Export -> SVG.

Файл можно загрузить в html через тег img.

Iconify — содержит библиотеку векторных иконок, которые можно скачать в формате SVG. Особенность плагина: есть поле для просмотра содержимого документа, т.е. узнать, какая картинка зашифрована в координатах. Для этого нужно скопировать разметку и добавить в текстовое поле. Проверим, как выглядит ранее сохраненный документ.

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

Данный формат разрабатывался для просмотра электронных документов, это универсальный формат, который позволяет сохранять шрифты, изображения и макет исходного документа на разных платформах и в разных приложениях. Чаще всего используется для хранения инфорграфики и презентаций. Как и в остальных случаях выбираем слой и нажимаем Export -> pdf. Скаченный документ можно просмотреть через специальную программу или перетащить в браузер.

PDF используют для многостраничных документов, поэтому если нужно добавить сразу несколько фреймов, то выбираем “Frame 1”, “Frame 2”, дальше в меню File -> Export frames to PDF.

Export в папки?

Иллюстрации можно заранее распределить по папкам, что весьма удобно при поиске нужного макета. Для этого нужно у каждого слоя через косую черту написать название. В нашем примере, папки будут 1,2 и 3. При нажатии Export, файлы буду упакованы в архив и отдельно скачаются.

Как сохранить проект в фигме — выгрузка группы страниц?

Крупные проекты могут состоять из несколько десятков страниц. Появляется задача выгрузить весь Project. Чтобы сделать это, нужно выбрать все фреймы и выполнить команду “Экспорт”. Обратите внимание, что на кнопке появится количество выбранных слоев.

Допустим “два”, надпись будет “Export 2 Layers”.

При скачивании, картинки будут упакованы в архив zip, таким образом, всю графику можно выгрузить на компьютер.

Как сохранить проект в фигме через меню интерфейса?

Существует способ сохранить иллюстрации на ПК через меню интерфейса. Для этого нужно перейти в File -> Export. После этого появится всплывающее окно, где галочками нужно отметить элементы, которые следует выгрузить. Обратите внимание, Frame воспринимается как один блок, все внутренние элементы не учитываются. При нажатии кнопки Export, начнется сбор графики, и упаковка в архив после скачивание.

Если выбрать отдельный Frame и сделать Export, то появится список изображений, который находится в этом фрейме. Пример: обложка, мужчина и девушка.

Как сохранить проект в figma – Save Local Copy?

Фигма — онлайн-сервис, где все версии прототипа хранятся в облаке, но иногда из-за плохо качества соединения могут быть сбои и функция “Автосохранение” попросту может не сработать. Чтобы избежать подобных проблем, рекомендуется делать резервную копию проекта на ПК. Для этого перейдите в File, нажмите Save Local Copy. Начнется загрузка. Документ будет скачиваться с расширением fig.

Импорт проекта происходит на главной странице Figma. В разделе Recent или Draws в правом верхнем углу нажимаем “Import”, выбираем файл, ждем, когда импорт завершится.

Другой способ сделать Import — это перенести файл, прямо в окно браузера, когда открыта Figma.

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

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

Как в Figma дублировать проект

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

Далее вас интересует пункт Duplicate.

Обратите внимание, что доступы к работе не копируются, и вам придется настраивать их заново, если это потребуется.

Умное копирование в Figma: зачем нужно и как пользоваться

Рассказываем о новых функциях графического редактора, которые помогут сэкономить ваше время.

Оля Ежак для Skillbox Media

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем о пяти функциях копирования, которые помогут вам быстрее работать в Figma.

Вставка с заменой

Что, если вам нужно заменить 20 серых «заглушек» на одинаковые модули? Копипастить 20 раз — долго и нудно. Поэтому разработчики Figma добавили функцию вставки с заменой, которая меняет выбранные объекты на скопированный.

Как пользоваться вставкой с заменой

• Скопируйте любой объект на макете.
• Выделите объекты на макете, которые хотите заменить на скопированный.
• Нажмите сочетание клавиш Ctrl (⌘) + Shift + V.

Множественная вставка

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

Как пользоваться множественной вставкой

• Скопируйте любой объект на макете.
• Выделите несколько фреймов и нажмите Ctrl (⌘) + V, чтобы вставить объект в каждый из выделенных фреймов.

Скопировать характеристики

В Figma доступна функция копирования свойств. Она очень полезна — например, при вёрстке карточек в приложении: вы сможете применить одинаковые тени, обводку и цвет фона сразу ко всем выделенным объектам.

Как копировать характеристики

• Чтобы скопировать характеристики, выделите «эталонный» объект и нажмите Ctrl (⌘) + Alt (⌥) + C.
• Чтобы вставить характеристики, выделите любой объект и нажмите Ctrl (⌘) + Alt (⌥) + V.

Скопировать точно под курсор

Обычно при вставке скопированного объекта Figma сама выбирает, где именно он должен оказаться. Если вы хотите держать этот процесс под личным контролем, пользуйтесь функцией вставки точно под курсор.

Скопируйте нужный объект, нажмите правой кнопкой мыши в любом месте макета и выберите Paste Here — копия объекта окажется точно под вашим курсором.

Скопировать как PNG

В любой момент вам может понадобиться скопировать макет в Photoshop или отправить его в чат арт-директору. Через обычный экспорт делать это долго. Чтобы не тратить время на лишние действия, пользуйтесь функцией «Скопировать как…».

Выделите нужный объект, нажмите на него правой кнопкой мыши, в выпадающем меню перейдите в Copy/Paste as и выберите Copy as PNG.

Кстати, если выбрать Copy as SVG, то в буфер обмена попадёт готовый код SVG-изображения, который можно использовать в HTML.

Больше о Figma

• 5 лайфхаков в Figma, которые помогут работать быстрее
• 5 полезных плагинов для Figma: проектирование интерфейса
• Как делать варианты элементов интерфейса
• 5 полезных плагинов: работа с текстом и шрифтами
• Тени в интерфейсах: зачем они нужны и как их рисовать
• Как создать тёмную тему

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Как в Figma скопировать цветовые и текстовые стили из одного проекта в другой?

Как в Figma скопировать цветовые и текстовые стили из одного проекта в другой?
Не сделать привязку через библиотеку, а именно скопировать все стили (цвет + текст), чтобы их можно было править в новом проекте?

• Вопрос задан более трёх лет назад
• 20397 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 4

Степан Воеводин @melpnz Куратор тега Figma

UX/UI дизайнер

очень стал интересен твой вопрос, долго искал и капался, но вроде нашёл.
Если сделать просто Dublicate файла, то он скопирует и файл и стили, при это без привязки к Team Library

Ответ написан более трёх лет назад

Нравится 1 1 комментарий