Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.
Горячие клавиши для работы с инструментами
Перемещение объектов (V)
Эта комбинация клавиш активирует инструмент для перемещения объектов. Он нужен, чтобы перетаскивать элементы по экрану.
Как работает: жмёте V и двигаете выделенный объект стрелками.
Где найти в интерфейсе: стрелка на верхней панели.
Создание фреймов (F)
Эта комбинация клавиш активирует инструмент для создания фреймов. Кадры в Figma — это как слои в фотошопе. Они помогают организовать ваш дизайн и делают его более структурированным.
Где найти в интерфейсе: решётка на верхней панели.
Добавление текста (T)
Эта комбинация клавиш активирует инструмент для добавления текста. Он нужен, чтобы написать что-то на вашем дизайне.
Как работает: рисуете рамку для текста, пишете текст.
Где найти в интерфейсе: буква Т на верхней панели.
Горячие клавиши для работы с текстом
Это стандартные горячие клавиши, с которыми вы работаете и в других программах — например, Word или Гугл-документах.
Сделать текст полужирным (Ctrl + B или ⌘ + B для Mac)
Эта комбинация клавиш делает выделенный текст жирным. Это удобно, когда вы хотите выделить что-то важное в тексте.
Как работает: выделяете нужный текст, жмёте Ctrl + B.
Где найти в интерфейсе: в правой панели.
Сделать текст курсивом (Ctrl + I или ⌘ + I для Mac)
Эта комбинация клавиш делает выделенный текст курсивом. Это может пригодиться, когда вы хотите сделать акцент на определенных словах или фразах.
Как работает: выделяете нужный текст, жмёте Ctrl + I.
Где найти в интерфейсе: в правой панели.
Горячие клавиши для работы со слоями
Выделить все на экране (Ctrl + A или ⌘ + A для Mac)
Эта комбинация клавиш позволяет вам быстро выделить все, что есть на экране. Это удобно, когда вы хотите применить какое-то действие ко всему дизайну сразу. Например, стереть 🙂
Как работает: жмёте Ctrl + A, видите что-то такое:
Сгруппировать объекты (Ctrl + G или ⌘ + G для Mac)
Эта комбинация клавиш позволяет вам быстро сгруппировать несколько объектов в одну группу. Это помогает лучше организовать ваш дизайн и упрощает работу с ним.
Как работает: выделяете нужные объекты, жмёте Ctrl + G. В меню слева появляется группа выделенных объектов. Сравните с предыдущим скриншотом.
Дополнительные горячие клавиши
Некоторые из этих шорткатов довольно очевидны, а другие встречаются редко. Но все точно заслуживают внимания и полезны для ознакомления.
Копирование (Ctrl + C или ⌘ + C для Mac) и вставка (Ctrl + V или ⌘ + V для Mac)
Начнём с самого простого. Эти комбинации клавиш позволяют быстро копировать и вставлять выбранные объекты. Это основные команды, которые используются во многих приложениях, и Figma не исключение.
Как работает: вы уже и сами знаете.
Изменение размера текста (Ctrl + Shift + или ⌘ + Shift + для Mac)
Эта комбинация клавиш позволяет быстро увеличивать или уменьшать размер выделенного текста. Это удобно, когда вам нужно подогнать текст под определенный размер.
Кстати, < и >это не стрелки влево и вправо, а символы, которые вы используете при вводе тегов (на русской клавиатуре на клавишах Б и Ю).
Где найти в интерфейсе: в правой панели.
Обратить выделение (Ctrl + Shift + A или ⌘ + Shift + A для Mac)
Эта комбинация клавиш позволяет выделить все, кроме того, что уже выделено.
Дублирование выбора на месте (Ctrl + D или ⌘ + D для Mac)
Эта комбинация клавиш позволяет быстро создать копию выбранного объекта прямо на его месте. Это удобно, когда вам нужно создать несколько одинаковых элементов.
Переименование (Ctrl + R или ⌘ + R для Mac)
Эта комбинация клавиш позволяет быстро переименовать выбранный объект. Это полезно, если вы ответственно подходите к работе, или у вас в команде принято особым образом именовать объекты, и помогает удобнее искать элементы в больших проектах.
Где найти в интерфейсе: правый клик по объекту.
Быстрый экспорт (Ctrl + Shift + E или ⌘ + Shift + E для Mac)
Это удобно, когда вам нужно сохранить определенный элемент дизайна.
Где найти в интерфейсе: в самом низу правой панели.
Материалы по теме
- Старт в Figma для верстальщика
- Какой формат графики выбрать
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Управление объектами в Figma
Итак, в начале мы рассмотрим, как осуществлять манипуляцию объектов в Figma. Для этого необходимо создать новый фрейм, и загрузить объекты в программу. Для создания нового фрейма (холста), выберите в верхней части меню вкладку «Frame». Далее в рабочей области появится новый холст, размер которого вы можете задать либо вручную, либо увеличить при помощи левой кнопки мыши. Именно в данном фрейме вы и будете создавать свой проект. Есть горячая клавиша «F», при помощи которой вы сможете создать новый фрейм.
Для того чтобы добавить объект в фрейм, можно просто перетянуть файл.
Для взаимодействия с загруженными элементами можно использовать левую кнопку мыши. Достаточно просто зажать объект левой кнопкой, и переместить в любое место экрана. Чтобы уменьшить или увеличить объект пропорционально используйте углы выделений. Ниже вам будет представлен размер объекта. Кроме того, для изменения размера можно воспользоваться ручным вводом размеров в левой части интерфейса. Так вы сможете задать точный размер, который вам необходим.
Менять размер можно не только пропорционально, но и по длине или ширине потянув за соответствующую сторону левой кнопкой мыши. Чтобы растягивание было пропорциональным выполняйте действия с клавишей «Shift».
Также есть функция вращения объекта. Эта функция появится при наведении курсора мыши на угол объекта. Если использовать клавишу «Shift», то вращение будет составлять по 15 градусов. Чтобы задать градус вращения вручную, можно воспользоваться более точными настройками в левой части меню.
Для того чтобы полностью продублировать объект, выделите его левой кнопкой мыши, и зажмите клавишу «Alt». Таким образом вы создадите точную копию выделенного объекта.
Для манипуляции с объектом важно знать назначение двух инструментов, которые находятся в верхней части меню под вкладкой в виде стрелочки. Это «Move» и «Scale».
По умолчанию будет стоять инструмент Move, горячая клавиша которого «V». Перевод слова «Move» – перемещение. При помощи данного инструмента вы просто можете перемещать объекты таким образом, как мы рассмотрели выше.
Слово «Scale» – масштабирование. Горячая клавиша – «K». При выборе этой вкладки вам будут доступны те же возможности манипуляции объекта, как и при «Move», однако разница в том, что с ее помощью увеличение или уменьшение объекта будет происходить пропорционально. Масштаб вы также можете задать в левой части интерфейса.
Лупа и рука
Это еще два полезных инструмента, которые необходимы при манипуляции объектов в Figma. Если зажать горячую клавишу «Z», то появится инструмент «Лупа», при помощи которого вы сможете увеличивать свой проект. Если нажать на левую кнопку мыши, то проект увеличится. Это будет происходить с каждым нажатием. Для того чтобы отдалить объект необходимо использовать клавишу «Alt». При использовании комбинации клавиш «Shift + Z», вы сможете перемещать проект стрелочками лево право, и вверх низ. Помимо этого, зум объектов происходит при зажатии клавиши «Ctrl» и прокручивании колесика мыши. Вперед – это увеличение, а назад – отдаление. Инструмент лупа может быть полезным для работы с мелкими деталями проекта. При увеличении вы сможете добиться точности работы с объектами, а при отдалении объектов, просматривать полную картину того, что у вас поучается.
Для использования инструмента «Рука» вы можете использовать клавишу пробел. Зажав эту клавишу, а также используя левую кнопку мыши вам будет доступно перемещение всего проекта. Это полезная функция при работе сразу с несколькими фреймами. Кроме того, вы можете перемещать при помощи «Руки» сделанное вами выделение.
Выделение
В Figma есть несколько способов выделения объектов. Первый из них – это ручное выделение мышкой тех элементов, которые вам необходимы. Но иногда при помощи этого метода невозможно сделать выборочное выделение. Поэтому в левой части интерфейса в созданном фрейме будет список всех объектов, которые в нем содержатся. Как видно в примере на иллюстрации – это две картинки и текст. Таким образом, используя клавишу «Ctrl» можно выбрать объекты, которые вы хотите выделить.
Существуют дополнительные параметры выделения, которые находятся во вкладке «Edit», находящиеся в верхнем меню.
Рассмотрим все виды выделений в данном разделе:
- «Select all with same properties» — это выделение объектов с одинаковыми настройками.
- «Select all with same fill» — это выделение объектов с одинаковой заливкой.
- «Select all with same stroke» — это выделение объектов с одним и тем же штрихом.
- «Select all with same effect» — это выделение объектов с эффектами, например, картинки с тенями.
- «Select all with same text properties» — это выделение текстовых объектов с одинаковыми параметрами.
- «Select all with same font» — это выделение текстовых объектов с одинаковым шрифтом.
Итак, это был первый урок в Figma, из которого вы узнали, как компоновать и выделять элементы в фрейме.
Полезные ссылки:
- Бесплатный видеокурс по Figma от GeekBrains;
- Профессиональный курс Figma 2.0 для новичков от SkillBox;
- Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.
Горячие клавиши для работы в Figma
В этой статье расскажем об основных и иногда неочевидных горячих клавишах в Figma. Сочетания работают одинаково как в приложении, так и в браузерной версии программы. В конце статьи есть небольшая подсказка о том, как найти список всех горячих клавиш в самой программе.
освойте профессию
графический дизайнер с нуля
Содержание
- Стандартные клавиши
- Интерфейс Figma
- Работа с объектами и контентом
- Инструменты
- Работа с текстом
- Как получить доступ к горячим клавишам в Figma
Стандартные клавиши
20 месяцев
профессия графический дизайнер с нуля до про
Станьте графическим дизайнером, обучаясь на реальных задачах
Сочетания горячих клавиш могут отличаться в зависимости от операционной системы. например, для одних и тех же действий используются клавиши Ctrl и Alt на Windows и Command (Cmd) и Option на MacOS.
| Windows | macOS |
| Ctrl | Command (Cmd) |
| Alt | Option |
Часть комбинаций используются не только в Figma, но и в других графических программах:
| Windows | macOS | |
| Копировать объект | Ctrl + C | Cmd + C |
| Вставить объект | Ctrl + V | Cmd + V |
| Отменить последнее действие | Ctrl + Z | Cmd + Z |
20 месяцев
профессия графический дизайнер с нуля до про
Станьте графическим дизайнером, обучаясь на реальных задачах
Интерфейс Figma
В интерфейсе Figma есть встроенные боковые меню: слева, справа и сверху. С их помощью можно менять настройки файла и параметры рабочей области. Все эти панели можно временно убрать с экрана, чтобы посмотреть работу целиком. При этом скрытое меню никак не повлияет на уже созданные параметры и настройки.
Для того чтобы скрыть боковые меню, нужно нажать Ctrl + \ .
Вернуть все на место можно тем же сочетанием — Ctrl + \ .
Чтобы рассмотреть детали проекта или, наоборот, посмотреть на него свежим взглядом издалека, можно менять масштаб рабочего пространства:
| Windows | MacOS | |
| Увеличить масштаб | Ctrl + «+» | Cmd + «+» |
| Уменьшить масштаб | Ctrl + «−» | Cmd + «−» |
| Увеличить масштаб на 100% | Ctrl + 0 | Cmd + 0 |
| Оптимальный масштаб | Shift + 1 | Shift + 1 |
НАпример, здесь мы увеличили масштаб с помощью сочетания Ctrl + «+» или Cmd + «+».
А здесь, наоборот, уменьшили с помощью сочетания Ctrl + «−» или Cmd + «−».
А блоке Pages на левой панели меню можно создавать отдельные страницы. Изначально они называются Page 1, Page 2 и далее по возрастающей, но вы можете их переименовать, щелкнув мышкой дважды по области названия.
какая профессия
в дизайне вам подойдет?
Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит
Пройти тест
Если нужно быстро перейти с одной страницы в файле на другую, сделать это можно вот так:
- Fn ↑ — на страницу вверх;
- Fn ↓ — на страницу вниз.
При большом количестве объектов и фреймов все они отображаются в панели слоев в левом боковом меню. Содержимое фреймов можно как раскрыть, так и закрыть.
Сгруппировать содержимое слоев можно с помощью сочетания клавиш Alt + L, а открыть содержимое — Alt + 1. Такая функция используется для того, чтобы увидеть все фреймы в одном месте и проверить, прикрепились ли объекты к правильным рабочим областям.
В Figma есть модульные сетки и линейки, которые используются для упорядочивания контента и композиции. Линейки расположены сверху и слева от рабочей области, а добавить и настроить модульные сетки можно в правом боковом меню Layout Grids.
Вот какие сочетания работают с этими инструментами:
- отобразить или скрыть все модульные сетки на странице — сочетание Shift + G;
- отобразить или скрыть линейки — Shift + R.
Работа с объектами и контентом
После того как вы кликом мыши выделили нужный для изменения объект, можно сделать следующие действия:
| Windows | MacOS | |
| Перенести объект поверх другого объекта | ] | ] |
| Перенести объект за другой объект | [ | [ |
| Вынести объект на передний план | Ctrl + ] | Cmd + ] |
| Отправить объект на задний план | Ctrl + [ | Cmd + [ |
| Отразить по горизонтали | Shift + H | Shift + H |
| Отразить по вертикали | Shift + V | Shift + V |
| Непрозрачность 0% | 0 + 0 | 0 + 0 |
| Непрозрачность 10% | 1 | 1 |
| Непрозрачность 50% | 5 | 5 |
| Непрозрачность 100% | 0 | 0 |
Если требуется продублировать уже имеющийся объект — нужно зажать клавишу Alt, кликнуть и перетащить получившийся дубликат мышью.
При работе в Figma часто требуется узнать расстояние от выделенного объекта до других объектов в пикселях, например при соблюдении определенной модульности — разбивке дизайна на повторяющиеся геометрические элементы.
Узнать расстояние между объектами можно следующим образом: выделить объект, нажать клавишу Alt и навести курсор на любой другой контент. Редактор покажет расстояние в пикселях.
Скопировать фото и вставить в фигуру — Ctrl + Shift + C → Ctrl + Shift + V.
Чтобы быстро выделить все, что есть на рабочей области, можно использовать сочетание Ctrl + A:
Инструменты
Горячие клавиши для самых часто используемых инструментов при работе в Figma действуют одинаково в разных операционных системах:
| Функция | Клавиша |
| Пипетка | I |
| Перо | P |
| Прямоугольник | R |
| Эллипс | O |
| Фрейм | F |
| Перемещение | V |
Горячие клавиши для инструментов также указаны рядом с самими инструментами в верхнем левом меню:
Если уже есть некоторое количество объектов и вы хотите объединить их в один фрейм, сделать это можно с помощью сочетания клавиш Ctrl + Alt + G.
При необходимости использовать маску на каком-либо объекте подойдет сочетание клавиш Ctrl + Shift + M.
Работа с текстом
Текстовые объекты часто требуют быстрых изменений, например увеличить или уменьшить шрифт, подобрать начертание. Перед использованием хоткеев нужно выделить текстовый объект, который вам нужно изменить.
| Windows | macOS | |
| Начертание Bold | Ctrl + B | Cmd + B |
| Начертание Italic | Ctrl + I | Cmd + I |
| Подчеркивание | Ctrl + U | Cmd + U |
| Выключка по левому краю | Ctrl + Alt + L | Cmd + Option + L |
| Выключка посередине | Ctrl + Alt + T | Cmd + Option + T |
| Выключка по правому краю | Ctrl + Alt + R | Cmd + Option + R |
Есть еще несколько параметров текста, которые можно удобно настраивать с помощью горячих клавиш и стрелок на клавиатуре:
| Сочетание Windows | Сочетание macOS | Больше | Меньше | |
| Изменить интерлиньяж Line Height | Alt + Shift | Option + Shift | Стрелка вправо → | Стрелка влево ← |
| Изменить расстояние между буквами Letter Spacing | Alt | Option | Стрелка вправо → | Стрелка влево ← |
| Изменить размер шрифта | Ctrl + Shift | Cmd + Shift | Стрелка вправо → | Стрелка влево ← |
Как получить доступ к горячим клавишам в Figma
Найти сочетания горячих клавиш в Figma можно двумя способами:
- Нажать на логотип Figma в верхнем левом углу и выбрать: Help and Account → Keyboard Shortcuts.
- Выбрать знак вопроса в правом нижнем углу — Keyboard Shortcuts.
профессия графический дизайнер с нуля до про
Маркетинг, PR, IT — мы не знаем, какую сферу вы выберете, когда станете графическим дизайнером. Но знаем, что вы сможете им стать, получив реальный опыт. Тот, который оценят работодатели
Как в фигме выделить несколько объектов
Быстро работать в Фигме позволяет в первую очередь грамотное использование компонентов и построение макетов. Этому важно учиться, но для новичка не менее полезно будет освоить несколько горячих клавиш и трюков, которые не очевидны из интерфейса программы и не описаны в официальном туториале. Считаю важным о них рассказать, но отмечу, что в совете не будет ничего сверхъестественного. Это просто подсказки, которые помогут новичкам осваивать Фигму.
Как работать в Фигме быстрее
Выделение объектов, перемещение и изменение размеров, панель слоёв
Выделение объектов
Чтобы выделить следующий объект в панели слоёв, нажимайте Tab. Чтобы выделить предыдущий — Shift + Tab. Так быстрее, чем выделять мышкой.
Чтобы провалиться внутрь фрейма, нажимайте Enter, а подняться обратно — Shift + Enter. Двойной клик мышкой не даёт такой управляемости при перемещении внутри фрейма.
Фигма позволяет выделить все объекты в макете с одинаковыми характеристиками. Это полезно, если нужно, например, выделить все текстовые объекты с одним и тем же шрифтом и изменить его параметры. Для этого выделите один объект и нажмите Main menu → Edit → Select all with same font.
Способ также хорошо работает с другими характеристиками. Например, чтобы выделить все объекты с одинаковым цветом заливки, нажмите Main menu → Edit → Select all with same fill.
Когда компонент выделен, можно быстро перейти к главному компоненту (Master Component), кликнув по нему правой кнопкой мыши и нажав Go to Master Component. После редактирования главного компонента можно быстро вернуться обратно, нажав Return to instance внизу экрана.
Перемещение и изменение размеров
В настройках можно изменить значение Nudge Amount, то есть количество пикселей, на которое сдвигается объект при нажатии Shift + стрелки. Значение по умолчанию — 10 пикселей, но может быть удобнее другое. Например, при работе над макетами для сайта бюро, на котором используются отступы, кратные девяти пикселям, я выставляю соответствующее значение Nudge Amount.
Чтобы в панели Constraints выбрать в один клик Left & Right или Top & Bottom, зажимайте Shift во время клика.
Чтобы расставить объекты с одинаковыми отступами между ними, нажмите маленькую кнопку Tidy Up, которая появится в правом нижнем углу при выделении.
После этого можно менять объекты местами, перетаскивая их за круглые маркеры, или изменять между ними отступы, сдвигая маркеры в виде полосок. Если зажать Shift, то отступы будут изменяться на значение Nudge Amount.
Кроме того, вы можете сделать один объект больше или меньше, сохраняя те же отступы между объектами. Для этого кликните в круглый маркер и потяните за край объекта.
Можно изменять размеры объектов на 1 пиксель, нажимая Ctrl + стрелки (⌘ для Мака), и на значение Nudge Amount (10 пикселей по умолчанию), нажимая Ctrl (⌘) + Shift + стрелки. Иногда так быстрее и удобнее, чем растягивать объект мышкой или задавать точное значение в панели свойств.
Чтобы изменять размеры фрейма, игнорируя значения Constraints у входящих в него объектов, зажимайте Ctrl (⌘).
Панель слоёв
Если нужно разблокировать или отобразить все скрытые объекты в макете, нажмите Ctrl (⌘) + /, начните набирать Unlock all Objects или Unhide all Objects в поле поиска и примените команду.
Чтобы развернуть все внутренности фрейма, выделите его и нажмите на маленькую стрелочку возле имени с зажатой клавишей Ctrl (⌘). Точно так же можно свернуть всё обратно.
Чтобы быстро заблокировать кучу слоев, нажмите на иконку замочка и проведите курсор вниз. Разблокировка работает аналогично. Способ подходит и для скрытия объектов с помощью иконки глазика.
Чтобы переименовать объект нажимайте Ctrl (⌘) + R. Затем нажимайте Tab, чтобы переименовать слой ниже, и Shift + Tab — слой выше. Это быстрее, чем прицеливаться в имя объекта и делать двойной клик.
Продолжение в следующем совете.
P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.