ux design trends cover - Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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


Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Figma Tips & Tricks - сверхмощный рабочий процесс

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

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

Оригинал: Greg Rog

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Руководство по работе с изображениями в Figma

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

Лучшие практики Figma: компоненты, стили и общие библиотеки

Две самые мощные функций Figma – это компоненты и стили. Они позволяют вам повторно…

Figma оверлеи – переход протипирования на новый уровень

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