Как скопировать в фигме. Дублирование. Работаем по умному.
Многие начинающие пользователи задаются вопросами «Как скопировать в фигме?». Это может быть, что угодно: элементы, текст, изображения, фрейм, слой и т.д. В этой инструкции поговорим про копирование и дублирование элементов в Figma. Вы будете работать намного продуктивнее и по умному. Смотрите видео ниже или прочитайте статью.
Как скопировать и вставить в фигме
Первый способ, который можно использовать, чтобы скопировать любой элемент в фигме — нажмите комбинацию клавиш «Ctrl + C». Чтобы вставить нажмите «Ctrl + V». Это работает также как и в других программах.
Второй способ для копирования — это выбрать элемент, нажать на клавишу «Alt» и потянуть его в сторону с зажатой левой клавишей мыши.
Если вы хотите, чтобы скопированный элемент перемещался только по одной оси (X или Y), то нужно зажать Shift. Тогда он будет перемещаться по горизонтали или по вертикали. Это удобно, если вам нужно разместить элементы по одной оси. Рекомендую использовать для выравнивания.
Как дублировать элементы в фигме
Чтобы дублировать элементы в фигме, рекомендую сделать следующее. Скопируйте любой элемент с помощью клавиши Alt и перетащите элемент с нажатием левой клавишей мыши. Поместите копию в стороне (например на расстоянии 35 px от первого элемента).
Нажмите на комбинацию горячих клавиш «Ctrl + D». Элементы будут дублироваться и появляться на заданном ранее расстоянии (35 px).
Дублируя и копируя элементы таким образом вы сэкономите огромное количество времени на работе и будете работать по умному.
Заключение
В этой статье вы узнали как быстро и легко скопировать любой элемент в фигме. Также разобрались с инструментом дублирования. Теперь вы сможете работать быстрее и по умному. Это сработает для фреймов, текста, векторных фигур, слоёв, групп и т.д. Желаю создавать крутые проекты.
Функция экспорта в Figma
Список доступных форматов для экспорта, как лучше экспортировать проект для верстки, или клиента. Как оптимизировать файлы. Все это вы найдете в данной статей.
Основные вопросы:
Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?
Функция экспорта в Figma позволяет не только выводить готовый дизайн в единое изображение, но и помогает нарезать макет для будущей верстки интерфейса. Данная функция находится внизу в правом нижнем углу программы.
Экспорт в JPG
Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.
Экспорт в PDF
По моему мнению данный формат не очень нужен, так как на выходе вы получаете документ, который в несколько раз больше весит, чем картинка. И если у клиента нет программы для чтения данного формата – он просто не сможет открыть его.
Но у этого формата есть особенности экспорта:
- Вы можете выделять текст, который набран в макете;
- Все векторные объекты прорисовываются идеально независимо от масштаба приближения.
Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.
Экспорт в PSD
Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.
Экспорт в SVG
Данный метод является популярным при экспорте иконок для верстки сайта. Так как SVG — это векторный формат, то для верстальщика намного проще использовать не картинки формата PNG для разных разрешений, а одну иконку, которая будет прорисовываться на нужный размер, на разных размерах устройства. Поэтому данный метод используйте для экспорта иконок, а также мелких графических элементов.
Экспорт в HTML
Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.
Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?
Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».
Как скопировать компоненты на другую страницу в Figma
В этой статье я расскажу как скопировать мастер-компонент и его компоненты с одной страницы на другую в Figma. Чтобы компоненты не были связаны между страницами.
Будьте осторожны, при таком копировании слетают все текстовые стили
Я разрабатываю продукт, где есть версии. Дизайн продукта на14 страниц. Все страницы в этом продукте используют компоненты и стили.
Так выглядят компоненты, их много и вручную откреплять от одного мастер компонента к другому — можно поехать кукухой.
Трудность
Что делать, когда нужна будет вторая версия продукта? Я как раз на пороге второй версии. Я думал снизу страниц делать её вторую версию.
Версии страниц в столбик. Сверху первая версия, снизу вторая.
Но дело в том, что во второй версии может измениться шапка, кнопка и цвет ссылок. Что делать в этом случае? Раздувать фрейм с компонентами. Но через 10 версии этот файл будет с трудом открываться из-за объёма.
Надо было делать это на другой станице. Если просто продублировать страницу или скопировать, блоки будут ссылаться на старый мастер-компонент.
Решение
Мы продублируем страницу, скопируем нужные блоки и их мастер-компоненты и вставим это на созданной странице в основном файле.
Инструкция
Чтобы провернуть этот трюк, нам сначала нужно продублировать весь файл. Да, даже если нужно откопировать часть файлов и их компоненты, надо всё равно копировать весь файл.
- Идём дублировать проект. Кликаем на стрелоку рядом с названием и нажимаем Duplicate.
2. После открытия нового файла скопируйте там нужные элементы и компоненты. Если вы хотите чтобы они были связаны — надо скопировать и мастер-компонент и дочерние компоненты. Я например скопировал всё.
3. Вставить их на новой странице. Теперь они свяжутся и будут отделены от тех, что лежат на соседней странице.
Экспортирование в Figma
Благодаря экспорту в Фигме можно вывести готовый созданный дизайн не только в едином изображении, но и с нарезанным макетом для верстки интерфейса. Также программа предлагает интеграцию с другими программами для дальнейшего создания сайта.
Для интеграции необходимо выбрать в основном меню раздел «Integrations». В онлайн версии в этом разделе будет одна программа – «Dribbble», в десктопной версии будут еще две дополнительные интеграции с «Zeplin» и «Avocode» — программы для верстки. Чтобы интегрировать свой проект, его необходимо выделить. Далее проект загрузится в выбранную вами программу.
Чтобы экспортировать проект используйте настройки в правой панели меню в разделе «Export».
Здесь есть несколько функций. Например, вы можете выставить размер экрана. Рядом находится раздел, в котором прикрепляется суффикс к имени файла. Это необходимо в том случае, если вы собираетесь экспортировать несколько версий макетов.
Еще одна функция – это выбор формата для экспорта.
Экспорт доступен в четырех форматах:
- Экспорт в JPG изображение. В настройках экспорта в данном формате вы сможете управлять масштабом, добавлять суффиксы, и при необходимости экспортировать насколько версий макета.
- Экспорт в PDF имеет свои особенности. В нем вы сможете выделять текст, который набран в макете. Кроме того, несмотря на большой вес таких документов, векторные объекты в нем прорисовываются с высокой точностью, независимо от масштабов приближения. Однако этот формат запрашивают редко при отправке макета.
- Экспорт в PSD – это перенос проекта в фотошоп. Так как фотошоп является более сложной программой, то и вписать для него интерпретатор будет достаточно сложно.
- Экспорт в SVG – это самый популярный вид загрузки макета. Для верстальщиков проще работать с данным форматом, так как он является векторным. Таким образом, картинка в этом формате будет иметь прорисовку нужного размера для разных устройств. Особенно эффективно использовать данный вид экспорта для мелких иконок.
Хотя экспорт макета в HTML недоступен, все же в разделе «CSS» верстальщик может просмотреть подсказки в виде свойств каждого объекта. Для этого необходимо выделить определенный фрейм или элемент, и просмотреть его «Code». Кроме того, в этом разделе доступна возможность увидеть параметры для разработчиков макетов для iOS и Android.
Итак, это заключительный урок данного цикла, из которого вы узнали о возможностях интеграции и экспорта проектов. Уделив внимание каждому из уроков, вы приобретете базовые навыки создания дизайна в Фигме. Практический опыт и профессионализм придет уже непосредственно при работе с программой.