как скопировать свойства в фигме

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

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

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

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

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

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

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

UX/UI дизайнер

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

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

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

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

Недавно Figma анонсировала новые функции, одно из которых это возможность задавать свойства компонентов (Component Properties). Чтобы разобраться как его правильно использовать, я взяла существующий компонент “текстовое поле” и пересобрала его с использованием свойств.

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

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

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

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

Шаг 1

Для начала нужно определить какие повторяющиеся элементы можно добавить в свойства. Например, для текстового поля это будет:

• заголовок (label text);
• текст (input text);
• ошибка (error text);
• префикс;
• вспомогательный текст (helper text);
• иконка.

Для разных вариантов может использоваться разная комбинация свойств. Например, для состояния “Empty” используется только “Label Text”, для состояния “Filled” — нужен уже “Label Text” и “Input Text”, для для состояния “Error” к предыдущим свойствам еще добавится “Error Text” и т.п.

Шаг 2

Далее зададим каждому элементу конктеное свойство. Например чтобы добавить иконку в свойства, нужно ее выделить, и боковом меню выбрать “Apply instance swap property”. После в появившемся окне задать название и выбрать отображение.

Чтобы добавить возможность включать/выключать видимость иконки, для слоя необходимо задать свойство True/False. Для этого нужно снова выделить слой с иконкой и в боковой панели в блоке “Layers” выбрать “Apply instance swap property”, далее в появившемся окне задать свойства видимости этого слоя.

Теперь через свойства можно включать/выключать видимость иконки и заменять ее на другую.

Далее добавим в свойства текст. Для этого нужно его выделить и в боковой панели в блоке “Content” задать название для этого текста. Все эти манипуляции необходимо проделать для каждого текcтового элемента.

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

Как итог с помощью свойств сами компоненты стали выглядеть намного чище, а навигация по ним стала проще.

Спасибо, что прочитали эту статью, если было полезно, дайте знать клапсом ��. Вы можете клапсануть до 50 РАЗ.

Как в Figma копировать. Расширенные возможности

Все три буфера обмена работают независимо и не перезаписывают друг друга.

Обычное копирование (crtl+c/ctrl+v или cmnd+c/cmnd+v)

Самое привычное для большинства пользователей копирование.

Скопированный объект будет вставлен в активный фрейм с теми же параметрами расположения (отступами слева и сверху).

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

Видео: копирование в Figma

 

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

Вставить на месте другого элемента

Чтобы вставить скопированный элемент рядом (на месте) другого произвольного выделенного (выбранного) элемента, используйте сочетание Shift + Command + V. Скопированный элемент будет иметь те же параметры X и Y.

Видео: копирование в место рядом с другим элементом в Figma

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

Дублирование элемента

Дублирование выполняется сочетанием ctrl+d или cmnd+d. Дублирование фактически объединяет две команды crtl+c/ctrl+v или cmnd+c/cmnd+v, но помимо этого, если вы сдвинете первый продублированный элемент, то следующий продублированный будет сдвинут на такое же расстояние от предыдущего.

1. Выбрать элемент
2. Нажать ctrl+d или cmnd+d
3. Сдвинуть дубль
4. Применять пункт 2 необходимое количество раз

Видео: дублирование в Figma

 

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

Такой способ удобен для создания группы одинаковых элементов

Перетаскивание с зажатым Option (Alt)

Если вы выделите элемент, а затем перетащите его по экрану с зажатой клавишей Option (Mac), Фигма создаст копию этого объекта. При этом будут показаны подсказки с расстояниями до исходного элемента и других объектов.

Видео: копирование перетаскивающем с Alt или Option

 

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

Копирование стилей

Данная процедура применяет все стили одного элемента к другому.

1. Заливка
2. Обводка
3. Эффекты
4. Шрифты
5. Позиционирование
6. Скрепления

1. Длина и высота
2. Расположение элемента

1. Выделяем исходный элемент
2. Жмем crtl+alt+c или cmnd+option+c
3. Выделяем один или несколько элементов, к которым нужно применить стиль
4. Жмём ctrl+alt+v или cmnd+option+v

Видео: копирование стилей

 

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

Изображения для примера мы взяли из плагина Unsplash

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

Любой слой можно скопировать в качестве растрового изображения PNG, подробнее читайте в этой статье.

Умное копирование в 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 полезных плагинов: работа с текстом и шрифтами
• Тени в интерфейсах: зачем они нужны и как их рисовать
• Как создать тёмную тему

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

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