Как в 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 — удобный инструмент для работы с графикой, создания презентаций, иконок и дизайнерских проектов. У программы понятный интерфейс, в котором легко ориентироваться. Но на начальных этапах работы всё же нужна помощь. Многие сталкиваются со сложностями при сохранении проектов и макетов в Фигме. Если хотите освоить все тонкости работы с этим инструментом, рекомендуем пройти онлайн-курс по 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 и делала лендинг для международного стартапа. Любит путешествовать и находит в этом вдохновение.
Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы
Есть большой список программ в которых UI/UX дизайнеры создают макеты для сайта. Figma, Sketch, Adobe XD, Photoshop – это лишь небольшой список самых популярных из них. Каждое приложение имеет свои достоинства, которых нет у других. Поэтому иногда необходимо иметь возможность переместить дизайн-макет, сделанный в одной программе, для редактирования его в другой. В данной статье мы затронем способы конвертирования между форматами, в частности для Фигмы. Так как в свете последних событий это является наиболее актуальным.
Какие форматы поддерживает Фигма
Первое, что мы рассмотрим это форматы, которые Figma поддерживает из коробки (то есть вам не требуется установка дополнительных плагинов или расширений, для работы с ними).
Импортировать мы можем почти любые картинки, Sketch файлы и сами файлы Фигмы (.fig)
Экспортировать можно в PDF (но только фреймы, находящиеся в рутовой папке) – это нужно в основном для того, чтобы презентовать ваш макет.
Так-же фигма позволяет экспортировать в PNG и SVG выбранный набор элементов. Делается это через контекстное меню (ПКМ -> Copy/Past as)
На этом возможности фигмы заканчиваются и для взаимодействие с другими форматами, вам нужно приложить чуть больше усилий. Об этом и пойдет речь дальше.
Конверсия между форматами
Прямая конверсия между двумя программами не всегда возможна, поэтому для того чтобы преобразовать дизайн-макет из одной программы в другую нужно преобразовывать макет в промежуточный формат. На диаграмме ниже представлены всевозможные взаимосвязи между форматами.
Если стрелка входит в определенный формат, то это означает, что “исходящий” формат можно стандартными средствами преобразовать во “входящий”. К примеру файлы фотошопа (.psd) могут зачитываться при помощи Adobe Illustrator и Sketch. Или к примеру Фигма может зачитывать Sketch файлы.
Отдельно нужно сказать про EPS и SVG форматы. Они не имеют конкретной программы, которая их создает. Поэтому для них входящая стрелка означает, что “источник” умеет экспортировать в этот формат. К примеру, Sketch умеет экспортировать в формат EPS.
На основе данной диаграммы также можно сделать вывод, что все программы умеют импортировать SVG и почти все экспортировать. Поэтому его можно назвать самым удачным “промежуточным” форматом.
Для того чтобы сконвертировать Фигму в HTML есть 2 способа. Бесплатный и условно-бесплатный. Начнем со второго.
К условно-бесплатным способам можно отнести различный плагины или web-конвертеры, которыми вы можете воспользоваться, но только пока действует бесплатная пробная версия, дальше придется платить. Одним из примеров может быть AnimaApp.
Бесплатный способ более интересный (сложный). Состоит он в следующем -вам нужно экспортировать ваш дизайн-макет в PDF, с помощью стандартных средств Фигмы, после чего найти инструмент, для просмотра пдфника в вебе (Только не используйте стандартный просмотрщик, вам нужен ресурс, который преобразует ваш документ в HTML страничку. Например этот – PDF Viewer). Как можете видеть на картинке ниже, после импорта, ваш PDF превратился в HTML верстку.
После этого скачайте весь сайт при помощи Ctrl + S и вы получите файлы сайты. Теперь осталось дело за малым) Отделить HTML код вашего макета от остальной части скаченного сайта.
Есть вот такой плагин (Protoship Teleport), который позволяет экспортировать любую HTML страничку в Adobe XD файлы. Для этого вам нужно скачать расширение для Google Chrome, а также расширение для самого Adobe XD. Можно посмотреть на странице плагина. Вот так это выглядит:
Export Kit
Отдельное внимание нужно уделить следующему инструменту для экспорта дизайн-макетов в готовые проекты. С помощью данного приложения вы НЕ сможете преобразовать файл из одного дизайн формата в другой. Оно предназначено для конвертирования дизайн-макета в готовый интерактивный проект. Таким образом вы сможете создать дизайн в Figma, Sketch или др. Приложении и на основе него сделать готовую HTML страничку или Android приложение. При этом вы получите не сплошной HTML, а проект созданный c использованием фреймворка (Например с помощью React). Естественно звучит это все слишком хорошо, чтобы быть бесплатным.
Если вам нужен бесплатный рабочий способ, с помощью которого можно преобразовать дизайн из одного формата в другой, то конвертируйте в SVG, после чего вы можете использовать этот файл в любом редакторе. Минусы данного подхода очевидны – далеко не вся информация может быть сконвертированна (например древовидная структура).
Если же вам в первую очередь нужно качество и вы не готовы делать постобработку дизайн-макетов, то пользуйтесь платными плагинами.
Считаете ли вы SVG формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.
Ссылка — на цикл статей по Фигме.