Figma. Горячие клавиши.

5 min readMar 2, 2020

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

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

UPD.2024 — у меня появился ютуб канал, на котором я рассказываю о дизайне, заходите смотерть.

https://www.youtube.com/@renk_vladyslav

Move tool «V»

Первая клавиша это то чем мы пользуемся наверное большую часть времени Move tool , или же привычная мышка перемещения можно выбрать клавишей “V”. А также нажатие клавиши “Esc” зачастую перекинет вас на этот инструмент.

Frame tool “F”

Из названия не сложно догадаться что этот инструмент позволит нам создать фрейм(артборд в фотошопе). Выбрать этот инструмент можно клавишей “F”. После выбора этого инструмента можно как создать произвольный размер холста, а можно выбрать заготовки для различных случаев.

Text tool “T”

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

Rectangle tool “R”

Нарисовать прямоугольник, при нажатии появится прямоугольник со сторонами 100х100 пикселей. Нажать и тянуть можно создать прямоугольник с произвольными сторонами, если в этот момент нажать и удерживать клавишу “Shift” то будет создаваться квадрат, добавив клавишу место в которое вы нажали станет центром фигуры, добавив клавишу “Alt” появится возможность передвигать фигуру которую вы рисуете. Эти добавления клавиш так же относятся и к фрейму и к элипсу. “Space”

Ellipse tool “O”

Рисуем овал, дополнительные клавиши такие же как и у прямоугольника.

Pick color “I”

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

Pen tool «P»

Всем кто ранее работал в подобных программах известно как “перо”. Выбирается клавишей “P”. Позволяет создавать фигуры или линии произвольного вида и размера.

Group Selection «Ctrl+G»

Создать группу из выделенных объектов, выбираем то что хотим объединить, нажимаем, получаем группу, помогает организовать макет.

Measure to Selection «Alt»

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

Resize from Center «Alt»

Об этом написал уже, а так выделяем объект, зажимаем клавишу “Alt” и меняем размер от центра если тянем за угол, так же можно равномерно изменять по горизонтали или по вертикали, тянем за соответствующие стороны.

Resize Proportionally «Shift»

Уже упоминалось. Выделили, тянем за угол, увеличиваем пропорционально, можно тянуть за стороны и так же увеличивать сохраняя пропорции, экспериментируем, смотрим что получается, так же с помощью этой клавиши можно поворачивать объекты на 45° , 90°.
Противоположная сторона останется на месте, куда тянем туда и увеличивается.

Move While Resizing «Space»

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

Deep Select «Ctrl+Click»

Этот хоткей поможет если вы понаделали кучу групп и фреймов и не можете добраться до вон того кружочка маленького, зажимаем и клацаем на тот объект которых хотим выбрать, все готово вы красавчик. “Ctrl”
Кстати зажимая клавишу “Ctrl” и прокручивая колесо мышки можно масштабировать экран

Ignore Constraints(Frame only) «Ctrl»

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

Duplicate «Alt» «Ctrl+D»

Создать копию, можем выбрать объект, зажать то копия создастся на расстоянии на которое вы перетянули объект, от той копии которую вы только создали. “Alt” и потянуть этот объект, это будет копия нашего основного объекта. создаст копию на том же месте где находится сам объект. Если копию перетянуть и еще раз нажать “Ctrl+D” “Ctrl+D”
Чтоб все понять нужно открыть фигму и смотреть.

Show/hide UI «Ctrl+/»

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

Zoom to 100% «0»

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

Copy Properties «Ctrl+Alt+C» (Paste Properties «Ctrl+Alt+V»)

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

Flip Horizontal «Shift+H»(Flip Vertical «Shift+V»)

По быстрому отзеркалить, очень удобно и очень быстро. Берем объект, нажимаем, он развернулся. Удобно? Удобно.

Align Centers «Alt+H» «Alt+V»

Отцентровка. Это типа товарищ того что выше, нажали и все по центру. Тут так же нужно следить что выбрано, если просто объект то он отцентруется по фрейму, если объекты рядом горизонтально то можно их выравнять нажав “Alt+V” , вертикальные собрать в столбик можно кнопками поклацай, разберешься. “Alt+H”

Use as Mask «Ctrl+Alt+M»

Создаем масочку, не забывай что объект для которого делается маска должен быть сверху.

Edit shape or image «Enter»

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

Place Image «Ctrl+Shift+K»

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

Set Opacity «Shift+1…0»

Вот еще один помощник, меняем прозрачность 1 это 10%, 0 это 100%.

Итак бонусы. Начнём с того который я тоже нашел пока писал статью, сам в шоке как много я упускал. Все команды можно посмотреть достаточно удобно в фигме вот тут.