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

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

Квадрокруг — особая форма значка, которая становится все более популярной в UI-дизайне. Часто используется в приложениях iOS.

В Figma создать такой элемент просто.

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

Совет 2: Использовать имя цвета вместо HEX

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

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

Совет 3: Как быстро переименовать фрейм

Как правило, для изменения имени фреймов используют горячие клавиши CTRL + R (для Windows) и CMD + R (для iOS). На самом деле достаточно дважды щелкнуть на текущее имя фрейма на холсте, и оно будет доступно для редактирования.

Совет 4: Как отрегулировать размер текстового слоя в соответствии с содержимым

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

Совет 5: Как обойти ограничения при изменении размера фрейма

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

Чтобы обойти эту автоматическую настройку, необходимо перетаскивать край фрейма, удерживая клавишу CTRL (для Windows) или CMD (для iOS). Благодаря этому ограничения будут игнорироваться. Изменение ширины или высоты фрейма никак не отразится на элементах внутри.

Совет 6: Предварительный просмотр элементов в режиме контуров

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

Нажмите клавиши CTRL + Y (для Windows) или CMD + Y (для iOS), чтобы активировать режим контуров. Нажмите ярлык еще раз, чтобы выключить его.

Совет 7: Как копировать и вставлять эффекты

Чтобы скопировать эффект или стиль в Figma, щелкните край строки с параметром. После этого скопируйте с помощью клавиш CTRL + С (для Windows) или CMD + С (для iOS), затем выберите целевой слой и нажмите CTRL + V (для Windows) или CMD + V (для iOS).

Такая функция существенно экономит время.

Совет 8: Как группировать с помощью фрейма

Используйте комбинацию клавиш CTRL + ALT + G (для Windows) или CMD + OPTION + G (для iOS) чтобы объединить элементы внутри фрейма, а не только стандартную группу.

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

Совет 9: Как заменять компоненты функцией стрелок

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

Совет 10: Как настроить переключение между вариантами

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

Дополнительный совет: как перемещать компоненты между документами

До августа 2021 года в Figma не было простого способа перенести компоненты в другую библиотеку. Для этого необходимо было воссоздавать их.

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

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

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

 

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

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

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

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

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

 

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

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

Видео: копирование перетаскивающем с 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 не поддерживается вашим браузером

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

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

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

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

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

Результат копирования в Фигме

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

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

 

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

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

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

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

 
</spa
Тег 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 Tips and Tricks — сверхмощный рабочий процесс

Вот полный список самых последних и самых удобных комбинаций клавиш и техник Figma. Они сэкономят ваше время и сделают ваш рабочий процесс в Figma максимально комфортным.

Дублирование слоев

Чтобы дублировать слой, выберите необходимый, и перетащите с зажатой клавишей Option. Чтобы сделать еще больше копий вы можете использовать Cmd + D.

Наименования слоев по умолчанию

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

Необычные круги

Нарисуйте круг и используйте инструмент Arc, чтобы превратить его в какой-нибудь крутой график.

Применение непрозрачности

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

Как копировать стиль

Чтобы скопировать стиль выбранного элемента, используйте Command + Shift + C, а затем Command + Shift + V, чтобы вставить его в другой объект.

Как копировать выбранные свойства

Все точно также, как и со стилями. Просто выделите необходимые свойства на панели (можно выбрать несколько свойств ) и скопируйте их с помощью Cmd + C, а затем вставьте другой объект с помощью Cmd + V.

Сверхбыстрое изменение

Наведите курсор на любое значение на панели «Свойства», зажмите и перетаскивайте — значения будут плавно изменяться.

Умное выделение

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

Перемещение выделения

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

Производительность Figma

В меню (доступ к нему с помощью Cmd + /), найдите «Использование ресурсов» и посмотрите состояние ресурсов, используемых Figma.

Сочетания клавиш

Поиграем с комбинациями клавиш! Введите Ctrl + Shift +? и посмотрите, какие комбинации вы недавно использовали.

Наложения в прототипах

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

Позиционирование оверлеев

Когда вы выбираете для «Overlay» «Пользовательский» режим наложения, вы можете легко перетащить его в любое место. Если вы наведите курсор мыши за пределы этого поля, сохраняя при этом выделение, вы можете использовать стрелки клавиатуры для большей точности изменений.

Состояния оверлеев

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

Невидимые цели

Чтобы создать цель для ваших прототипов, нарисуйте прямоугольник и уменьшите его непрозрачность до 0%, или просто нажмите 0 на клавиатуре.

Специальные действия и триггеры

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

Значение шага смещения

Найдите «Смещение» в меню (Cmd + /) и отрегулируйте большое и малое смещение для большей точности, управляя стрелками на клавиатуре. Большой сдвиг — стрелки клавиатуры + Shift, и вы можете установить его на 8 пикселей, если вы работаете с сеткой 8 пикселей.

Выбор заблокированных слоев

Чтобы получить доступ к заблокированным слоям, просто нажмите Ctrl + клик правой кнопкой мыши. Вуаля!

Пакетная разблокировка/отображение объектов

Найдите в Figma Menu (Command + /) «Unlock» или «Unhide» и вы получите параметр, который будет выполнять эту операцию за вас.

Пакетный импорт изображений

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

Импорт изображений и GIF

Чтобы заполнить форму изображением, перетащите изображение или gif файл на слой «Заливка» на панели «Свойства». Если вы используете GIF-файлы, нажмите на миниатюру, и вы сможете настроить кадр. Когда вы откроете файл, GIF будет работать.

Советы по копированию и вставке

Чтобы вставить другую фигуру в верх определенного слоя, используйте комбинацию Cmd + C, а затем Cmd + Shift + V.

Выбор с помощью клавиатуры

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

Регулировка цветовых значений

Откройте настройки цвета и чтобы изменить его значения, просто нажимайте стрелки клавиатуры вверх / вниз. Работайте быстрее используя Shift.

Вставка значений из CSS

Выберите любой код из CSS, который содержит значения цвета, независимо от того, является ли он rgba, hex или hsla, и вставьте его в шестнадцатеричное поле в Figma — он автоматически установит нужное значение.

Изменение цвета в режиме реального времени

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

Изменение свойств текста

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

Пакетное изменение шрифта

Найдите пункт «Выбрать все одинаковые шрифты» в меню, а затем измените его свойства на панели.

Отрегулируйте параметры «hue» и «alpha» с помощью прокрутки

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

Создание нескольких компонентов

Вы можете создать несколько компонентов одновременно — просто выберите несколько объектов и перейдите к маленькой иконке шеврона в верхней части. В появившемся списке выберите вариант создания нескольких компонентов.

Префиксные слои

Используйте диалоговое окно Rename Layer для добавления префиксов к выбранным элементам.

Замена компонентов

Если вы называете Компонент с префиксом, вы можете легко поменять Компоненты с теми же префиксами, щелкнув правой кнопкой мыши на одном из экземпляров и выбрав в меню опцию «Обмен».

Поиск основного компонента

Чтобы перейти к главному компоненту, выберите экземпляр и выберите ссылку «Go to Master Component» на панели «Свойств».

Предварительный просмотр объекта

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

Создавайте миниатюры в Figma

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

Расширенное переименование слоев

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

Удаление частей наименований слоев

Используйте то же самое окно Layer Rename, чтобы удалить общие части наименований слоев. Например, если вы хотите удалить один сегмент между слешами, чтобы лучше организовать слои.

Поиск слоев на холсте

Если вы хотите быстро найти слой на холсте — поищите его на панели слоев и дважды щелкните на миниатюру слоя. Тааадааам! Все просто.

Группировка цветовых стилей

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

Добавление описаний к компонентам

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

Сохранение файлов с описанием

Если вы хотите сохранить файл с дополнительным описанием в истории редакций, просто используйте сочетание клавиш Cmd + Shift + S.

Совместное использование определенной версии документа

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

Обмен ссылками из Figma

Если вы хотите быстро поделиться ссылкой на документ из десктопного приложения, щелкните правой кнопкой мыши по имени документа и выберите параметр «Копировать ссылку».

Открытие файлов из буфера обмена

Если у вас есть ссылка на файл Figma, и вы хотите открыть ее прямо в десктоп приложении, просто выберите «Файл» → «Открыть URL из буфера обмена».

Вот и все, ребята! … по крайней мере пока что?

Я буду постоянно обновлять эту статью, поэтому не забудьте оставить комментарий или просто добавьте ее в закладки!