Figma. Горячие клавиши.
Горячие клавиши это та вещь которая значительно ускоряет работу специалиста с программами, не обязательно знать их все, но всегда нужно знать те основные без которых не обходится любой проект.
Самые необходимые на мой взгляд клавиши я распишу тут, а в конце статьи будет небольшой бонус.
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%.
Итак бонусы. Начнём с того который я тоже нашел пока писал статью, сам в шоке как много я упускал. Все команды можно посмотреть достаточно удобно в фигме вот тут.
И второй бонус это листик А4 который можно положить возле клавиатуры пока изучаете программу.
Так же о фигме Статья по фреймам и группам
Моя телега для связи, если нужно (@Vladislav_Grigorenko)
Не забывайте отметить статью если она вам понравилась! и поделиться если есть с кем)
Запустил серию статей «Душная фигма» где стараюсь с начала рассказать о программе все что знаю, если интересно залетайте на первую статью на медиуме.
В помощь дизайнеру: горячие клавиши в Figma
У Figma есть все возможности для того, чтобы дизайнеры справлялись с работой максимально быстро и легко. Рассказываем, какие хоткеи есть и как их использовать.
Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.
В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.
Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.
Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.
Essential keyboard shortcuts
Essential keyboard shortcuts — это Основные клавиатурные сокращения.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.
Чтобы открыть Меню, нажмите Ctrl + / на Windows и ⌘ + / на Mac.
Tools
Tools — это Инструменты.
Чтобы выбрать стандартный инструмент выделения, нажмите V.
Чтобы выбрать инструмент для создания фреймов, нажмите F.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Текст, нажмите T.
Чтобы выбрать Прямоугольник, нажмите R.
Чтобы выбрать Эллипс, нажмите O.
Чтобы выбрать Линию, нажмите L.
Чтобы выбрать Стрелку, нажмите Shift + L.
Чтобы добавить или показать комментарии, нажмите С.
Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.
Чтобы выбрать Нож, нажмите S.
Чтобы показать или скрыть Линейки, нажмите Shift + R.
Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac.
Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.
Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.
Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ⌘ + ‘ на Mac.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac.
Чтобы показать или скрыть Только слои, нажмите Alt + 1.
Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.
Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.
Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.
Zoom — это Приближение или Масштабирование.
Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.
Чтобы увеличить масштаб, нажмите +.
Чтобы уменьшить масштаб, нажмите —.
Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.
Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.
Чтобы масштабировать выделенный элемент, нажмите Shift + 2.
Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.
Чтобы масштабировать следующий фрейм, нажмите N.
Чтобы найти предыдущую страницу, нажмите Page Up.
Чтобы найти следующую страницу, нажмите Page Down.
Чтобы найти предыдущий фрейм, нажмите Home.
Чтобы найти следующий фрейм, нажмите End.
Text — это Текст.
Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ⌘ + B на Mac.
Чтобы выделить текст курсивом, нажмите Ctrl + i и ⌘ + i на Mac.
Чтобы подчеркнуть текст, нажмите Ctrl + U и ⌘ + U на Mac.
Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.
Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac.
Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac.
Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac.
Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac.
Чтобы изменить размера текста, нажмите Ctrl + Shift + < и > на Windows и ⌘ + Shift + < и > на Mac.
Чтобы изменить расстояние между символами, нажмите Alt + < и >.
Чтобы изменить расстояние между строками, нажмите Alt + Shift + < и >.
Shape
Shape — это Векторные изображения.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Заливку, нажмите B.
Чтобы удалить заливку, нажмите Alt + /.
Чтобы удалить обводку, нажмите /.
Чтобы поменять местами обводку и заливку, нажмите Shift + X.
Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac.
Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ⌘ + E на Mac.
Selection
Selection — это Выделение.
Чтобы выделить всё, нажмите Ctrl + A на Windows и ⌘ + A на Mac.
Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac.
Чтобы отменить выделение, нажмите Esc.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ⌘ + click на Mac.
Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ⌘ + right click на Mac.
Чтобы выделить дочерний элемент, нажмите Enter.
Чтобы выделить родительский элемент, нажмите Shift + Enter.
Чтобы выделить следующий по порядку элемент, нажмите Tab.
Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.
Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ⌘ + G на Mac.
Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac.
Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac.
Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac.
Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac.
Cursor
Cursor — это Курсор.
Чтобы выделить элемент при клике, нажмите Alt.
Чтобы копировать элемент при движении, нажмите Alt.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ⌘ + click на Mac.
Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ⌘ + right click на Mac.
Чтобы изменить размер относительно центра элемента, нажмите Alt.
Чтобы изменить размер пропорционально, нажмите Shift.
Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ⌘ на Mac.
Edit — это Редактирование.
Чтобы копировать, нажмите Ctrl + C на Windows и ⌘ + C на Mac.
Чтобы вырезать, нажмите Ctrl + X на Windows и ⌘ + X на Mac.
Чтобы вставить, нажмите Ctrl + V на Windows и ⌘ + V на Mac.
Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac.
Чтобы создать копию, нажмите Ctrl + D на Windows и ⌘ + D на Mac.
Чтобы переименовать, нажмите Ctrl + R на Windows и ⌘ + R на Mac.
Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac.
Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac.
Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac.
Transform
Transform — это Трансформирование.
Чтобы отразить по горизонтали, нажмите Shift + H.
Чтобы отразить по вертикали, нажмите Shift + V.
Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac.
Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.
Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac.
Чтобы обрезать изображение, нажмите Alt + dbl-click.
Чтобы задать прозрачность элементу 10%, нажмите 1.
Чтобы задать прозрачность элементу 50%, нажмите 5.
Чтобы задать прозрачность элементу 100%, нажмите 0.
Arrange
Arrange — это Выравнивание.
Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ⌘ + ] на Mac.
Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ⌘ + [ на Mac.
Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac.
Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac.
Чтобы выровнять по левой стороне, нажмите Alt + A.
Чтобы выровнять по правой стороне, нажмите Alt + D.
Чтобы выровнять по верхней стороне, нажмите Alt + W.
Чтобы выровнять по нижней стороне, нажмите Alt + S.
Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.
Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.
Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac.
Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac.
Components
Components — это Компоненты.
Чтобы показать все компоненты, нажмите Alt + 2
Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.
Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac.
Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac.
Так выглядят горячие клавиши в Figma. Надеемся, вы запомните их и будете ими пользоваться. А пока запомнить их не получается, обращайтесь к этой статье — она вам поможет.
Горячие клавиши в Фигма (Figma) для быстрой работы дизайнера
Keyboard Shortcuts в Фигме
ВАЖНО! В редакторе Figma в отличие от Adobe Photoshop невозможно менять сочетания клавиш так, как вам удобно (подстроить всё индивидуально под себя). Вам придётся использовать те горячие клавиши и те сочетания клавиш, которые предлагают создатели Фигма.
Для начала вам необходимо открыть проект в Фигма или создать новый проект «New design file». Все существующие горячие клавиши в Фигме можно найти в разделе «Keyboard Shortcuts». Этот раздел можно открыть двумя способами:
1. Нажав сочетание клавиш «Ctrl + Shift + ?»
2. Нажав на значок вопроса в правом нижнем углу экрана
В нижней части экрана вы увидите черное окно со всеми возможными горячими клавишами и сочетаниями клавиш.
1. Если вы уже использовали какую-то комбинацию, то она будет подсвечена голубым.
2. Если вы еще ни разу не использовали комбинацию, то она не будет подсвечена голубым.
Чтобы убрать черное окно со всеми комбинациями клавиш просто нажмите на крестик в правом верхнем углу этого окна.
Я давно работаю в редакторе Фигма и собрала свой топ горячих клавиш и комбинаций клавиш, которые постоянно применяю в своей работе. Их не очень много, поэтому эти хоткеи легко запомнить:
1. Сtrl + C — копировать элемент
2. Сtrl + V — вставить элемент
3. Сtrl + X — вырезать элемент
4. Сtrl + A — выделить все элементы сразу
5. I — инструмент пипетка, выбирайте цвет
6. K — менять размер
7. V — стандартный инструмент выделения и перемещения
8. [ — переместить слой назад, за всеми слоями
9. ] — переместить слой вперед, перед всеми слоями
10. Ctrl + Shift + 4 — показать/спрятать сетки
11. Зажатый Alt — дублировать элементы / фреймы
12. Зажатый Ctrl + колесико мыши — приближаться к объектам и отдаляться от них
13. Зажатый пробел + зажатая левая кнопка мыши — перемещение по рабочей области
14. Shift + A — создать auto layout
15. Ctrl + \ — убрать или показать интерфейс редактора Фигма
Этого набора горячих клавиш вполне достаточно для решения большинства задач. Рекомендую выписать их на листочек и использовать. Остальные горячие клавиши я детально разберу далее в этой статье.
Все горячие клавиши в Фигма с переводом на русский и описанием
Сочетание клавиш «Ctrl + Shift + ?» откроет внизу экрана окно чёрного цвета. Это вкладка Essential (в переводе с английского — «существенное», «важное»).
Во вкладке Essential можно:
1. (Show/Hide UI) Ctrl + \ — скрыть или вывести на экран интерфейс Фигмы;
2. (Pick Color) I — выбрать «пипеткой» цвет или оттенок из любого объекта и применить его в своей работе;
3. (Quick Actions) Ctrl + / — быстро найти плагины, слои или команды в Фигме.
Вкладка Tools (или инструменты):
- (Move tool) V — выделение и перемещение объектов в рамках проекта;
- (Frame tool) F — создание нового фрейма (рабочего пространства дизайнера в Фигме);
- (Pen tool) P — рисование пером;
- (Pencil tool) Shift + P — рисование карандашом;
- (Text tool) T — добавление нового текста;
- (Rectangle tool) R — готовый прямоугольник, параметры которого вы можете задать на правой панели;
- (Ellipse tool) O — эллипс или круг (с изменчивыми параметрами);
- (Line tool) L — линия;
- (Arrow tool) Shift + L — стрелка;
- (Add comment) C — написание комментария или заметки к выделенному объекту;
- (Pick color) I — распознавание и выбор цвета при помощи пипетки;
- (Slice tool) S — обрезка элемента «ножом».
Вкладка View (или вид) предназначена для того, чтобы показывать или скрывать элементы. А какие именно элементы показать / скрыть — решает сочетание клавиш:
- Shift + R — показать или скрыть линейки;
- Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac — показать или скрыть обводку всех элементов;
- Ctrl + Alt + Y на Windows и ⌘ + P на Mac — показать или скрыть пиксельный просмотр;
- Ctrl + Shift + 4 на Windows и Ctrl + G на Mac — показать или скрыть сетку;
- Ctrl + ‘ на Windows и ⌘ + ‘ на Mac — показать или скрыть пиксельную сетку;
- Ctrl + \ на Windows и ⌘ + \ на Mac — показать или скрыть боковые панели;
- Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac — показать или скрыть курсоры других пользователей;
- Alt + 1 — показать или скрыть только слои;
- Alt + 2 — показать или скрыть только компоненты;
- Alt + 8 — показать или скрыть панель дизайна;
- Alt + 9 — показать или скрыть панель прототипа.
Вкладка Zoom (или масштабирование) отвечает за расположение и перемещение объектов на рабочем пространстве в Фигма:
- Space + drag — перемещение Zoom по рабочему пространству;
- + (плюс) — увеличение масштаба (приближение);
- — (минус) — уменьшение масштаба (отдаление);
- Shift + 0 — отображение один к одному (экран 1:1);
- Shift + 1 — масштабирование всего рабочего пространства;
- Shift + 2 — масштабирование выбранного вами элемента;
- Shift + N — масштабирование предыдущего фрейма;
- N — масштабирование следующего фрейма;
- Page Up — поиск предыдущей страницы;
- Page Down — поиск следующей страницы;
- Home — поиск предыдущего фрейма;
- End — поиск следующего фрейма.
Вкладка Text (или работа с текстом):
- Ctrl + B на Windows и ⌘ + B на Mac — выделение текста жирным;
- Ctrl + i и ⌘ + i на Mac — выделение текста курсивом;
- Ctrl + U и ⌘ + U на Mac — подчеркивание текста;
- Ctrl + Shift + V — вставление и сопоставление элементов;
- Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac — выравнивание текста по левому краю фрейма;
- Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac — выравнивание текста по центру фрейма;
- Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac — выравнивание текста по правому краю фрейма;
- Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac — выравнивание текста по ширине;
- Ctrl + Shift + < и > на Windows и ⌘ + Shift + < и > на Mac — изменение размера текста;
- Alt + < и > — изменение расстояния между символами (буквами);
- Alt + Shift + < и > — изменение расстояния между строками.
Вкладка Shape (работа с фигурами и векторными изображениями в Фигма):
Самые продвинутые приемы Figma 2022 года
Тайные сокровища Figma, которые точно вам понравятся.
Как и всегда, Figma не преминула произвести впечатление на дизайнеров и представила несколько новых фантастических функций, скрытых у всех на виду. Некоторые из них находились там и раньше, но до сих пор оставались незамеченными. Итак, ниже вы найдете лучшие приемы, которые значительно облегчат работу в Figma!
Видеоверсия этой статьи (прим. на английском языке):
Если вы хотите наглядно увидеть, как используются новые функции Figma, есть видеоверсия этой статьи.
Кстати, я использую горячие клавиши Mac. Если вы работаете на PC (прим. в Windows), используйте эквиваленты, указанные ниже. Это работает в большинстве случаев. Есть некоторые исключения, о которых я обязательно скажу.
1. Быстрое копирование ссылки на файл (cmd+L)
Щелкните курсором внутри файла и нажмите cmd + L. Таким образом ссылка на файл будет скопирована в буфер обмена. Теперь вы можете поделиться ей где угодно.
Создавайте ссылку на конкретный элемент
Если вы выбрали определенную страницу, фрейм или элемент, при переходе по ссылке откроется именно то, что вы указали при ее создании. Великолепно!
2. Быстрая вставка элементов и прототипов за пределами Figma
Используйте горячие клавиши cmd + L, чтобы скопировать ссылку на определенную страницу или фрейм и вставить ее вне Figma. Вы можете поделиться целой областью или выбрать конкретный фрейм для совместного использования. Это невероятно удобно не только для оформления документов, создания дизайн-систем и гайдов по стилю, но и для демонстрации элементов на других веб-сайтах. Например, я могу вставить изображение прямо сюда, в статью (смотрите ниже).
Обязательно попробуйте:
Теперь самое главное: вставка прототипов. Эта функция работает в том числе и для прототипов. Это открытие сделало мой день. И безусловно прототипы обновляются автоматически.
Нажмите на ссылку и убедитесь в этом сами:
3. Корректируйте текст, цвет и другие показатели
Выберите фигуру с заливкой и откройте меню с цветовой палитрой. Удерживайте нажатой клавишу Shift и с помощью клавиш со стрелками «вверх» и «вниз» меняйте цвет объекта. Вы можете увидеть шаг корректировки значения цвета. При использовании колесика мыши у вас есть возможность менять оттенок. Нажав клавишу Alt, можно скорректировать размер шрифта, непрозрачность или значения других полей, например, высоты строки.
�� Совет: для изменения параметров шрифта или высоты строки, используйте шаг корректировки, равный 4 пкс или 8 пкс. По умолчанию он равен 10. Чтобы скорректировать его значение, нажмите cmd + / и введите слово "nudge". При изменении расстояния между элементами обязательно удерживайте нажатой клавишу Alt, чтобы видеть, на какое количество пикселей оно меняется.
4. Настройка значений некоторых полей с помощью специальной стрелки
При наведении курсора на некоторые поля свойств в Figma появляется специальная стрелка. Просто зажмите клавишу мыши и перемещайте стрелку влево и вправо. Удерживайте Shift, чтобы увеличить скорость настройки. Это работает с любым полем настройки значений, которое отображает стрелку при наведении на него курсора.
5. Экспортируйте объект в формате PNG без использования раздела Export
Нажмите cmd + shift + c (или через контекстное меню с помощью правой кнопки мыши), чтобы скопировать фрейм в формате png в буфер обмена. Теперь вы можете вставить его в любое место внутри вашего файла или за его пределами. Это удобно для вставки png-файла в Slack, презентации или электронные письма, а также для создания мокапов без необходимости экспортировать изображение.
6. Функция Left-Right в разделе Constraints
Не представляю свою работу без этой функции. В разделе Constraints при указании значения Left-Right при наличии сетки внутри фрейма, дочерние объекты будут использовать столбцы сетки в качестве своего родительского контейнера. Если вы хотите, чтобы ваши элементы идеально взаимодействовали с сеткой, установите в разделе Constraints значение Left-Right.
Эта функция хорошо работает для текста, групп или других фреймов. Но она не подходит при использовании ауто лейаутов. Маленькая хитрость: просто разместите свой ауто лейаут внутрь группы, после чего вы сможете установить значение Constraints для нее.
7. Использование страниц и фреймов в библиотеке для организации компонентов
Вы, вероятно, знакомы с правилом наименования компонентов через «/». Знаете ли вы, что добавление мастер-компонента во фрейм работает по такому же принципу? И это еще не все. Для создания мета-категорий вы также можете использовать страницы.
Таким образом, этот метод позволяет вам отделить организацию компонентов от схемы их именования. В результате вы получите более короткие названия компонентов.
В примере были созданы общая страница (GENERAL) и страница для мобильных устройств (MOBILE) (можно было бы настроить по одной странице для каждого брейкпоинта (прим. контрольные точки, проходя через которые, дизайн сайта меняется и адаптируется под новые условия) или одну библиотеку для сайта и одну — для приложения, или для Android и iOS). Внутри страницы расположены фреймы, в которые помещаются компоненты. Это могут быть отдельные компоненты или наборы компонентов с вариантами.
�� Совет: Если вы переходите из старой библиотеки Figma или импортированной из Sketch, в которой используется метод организации посредством слэша («кнопка/основная/активная/дополнительно/и др.»), и хотите переключиться на подход страниц и фреймов, вы можете использовать функцию пакетного переименования Figma и удалить все префиксы.
8. Скриншот прямо в Figma
Приготовьтесь задействовать сразу 4 пальца и одновременно нажать shift + ctrl + cmd + 4, чтобы сделать скриншот определенной области (+пробел для создания скриншота всего окна). Скриншот будет сохранен в буфере обмена, а не на рабочей области. Теперь вы можете вставить его прямо в Figma с помощью сочетания клавиш cmd + V. Для Windows попробуйте сочетание alt + print screen.
Теперь вы можете использовать функцию упорядочивания элементов в Figma (выберите все элементы одинакового размера, после этого в правом нижнем углу появится маленькая квадратная иконка). Нажмите ее, чтобы выровнять хаотично расположенные элементы определенным образом.
�� Совет: для того, чтобы обрезать изображение, дважды щелкните кнопку мыши, удерживая клавишу Alt.
9. Скопируйте редактируемый SVG-объект из браузера
Вместо того, чтобы экспортировать объект в SVG-формате и импортировать его обратно в Figma, можно копировать его прямо из кода страницы. Выберите SVG-изображение в браузере и щелкните правой кнопкой мыши, чтобы выбрать режим "проверить элемент" (Inspect). Откроется консоль браузера и элемент SVG, который можно выбрать в инспекторе. Выберите источник изображения еще раз. Затем в представлении изображения снова щелкните правой кнопкой мыши для режима проверки, а затем на всем элементе SVG (!!), щелкните правой кнопкой мыши и выберите «Копировать элемент». Теперь можно вставить его в свой Figma-файл, и он останется масштабируемым и редактируемым со всеми его слоями.
10. Как разломать мастер-компонент
Если у вас есть компонент с несколькими вложенными экземплярами, который вы хотите разломать, откройте меню быстрого поиска с помощью сочетания клавиш cmd + /, вбейте в строку поиска слово “Instances”. Теперь можно выбрать detach all instances (прим. отвязать все экземпляры) or detach all nested instances (прим. отвязать все вложенные экземпляры). При этом они сохранят свои настройки, будучи фреймом и ауто лейаутом. И да, ломаем мастер-компонент только в крайнем случае.
11. Быстрый поиск нужного элемента в слоях (Иерархия объектов)
Выделите элемент, щелкните правой кнопкой мыши и выберите “Select layer”. Вы получите полный обзор выделенного слоя, группы, в которой он находится, а также тех слоев, которые находятся выше и ниже него. Теперь выберите тот слой, на который вы хотите перейти, без необходимости его поиска на панели слоев.
12. Добавление свойств объектам, объединенным с помощью Union selection
Если вы объединяете объекты в один с помощью функции Union Selection, то его углы можно сглаживать, используя радиус. Возможность менять отдельные элементы объекта объединения останется. Также можно использовать компоненты и добавлять их к объекту объединения или применять к компонентам цвета и стили объекта объединения.
13. Сортировка и перемещение стилей на панели инструментов
Присвоение названия каждому стилю с помощью “/” занимает много времени, особенно если речь идет о создании стилей для шрифтов. Поэтому, знание того, что их можно сгруппировать на панели свойств, стало важным открытием.
Выберите стили и нажмите cmd + G, чтобы сгруппировать их, а затем дать название группе. Теперь вы можете сортировать и перетаскивать стили внутри папок и между ними.
14. Добавьте “_”, чтобы сделать стили невидимыми для других
Хотите задать стиль, но не готовы показывать его другим? Чтобы убедиться, что он случайно не появится в публичной библиотеке стилей, просто добавьте “_” к его названию, например, “_highlight”, и тогда его никто не увидит.
15. Добавляйте описания для стилей
При присвоении названия стилю в его настройках под строкой имени есть небольшое поле. Оно называется Description (прим. Описание). То, что вы там напишите, будет отражено в описательной подсказке при выборе стиля. Это удобно с целью добавления дополнительной информации о цели создания стиля. Раньше оно отображалось и в режиме inspect, но, похоже, это было изменено.
16. Знаете ли вы, что изображению может быть присвоен стиль?
Вы можете создать стиль для изображения точно так же, как стиль для цвета (просто помните, что в этом случае важно высокое разрешение картинки). Теперь можно заполнить любую фигуру, включая текст с заливкой с помощью стиля, присвоенного изображению.
17. Использование названий при указании цветов
Знаете ли вы, что можно просто ввести название цвета в цветовое поле? Вероятно, это не имеет значения для создания аккуратного дизайна пользовательского интерфейса и его финальной версии, но удобно для быстрого тестирования или для указания на ошибку (прим., например зеленый круг возле фрейма, означает, что все в порядке, а красный говорит о том, что в нем есть недоработки. В этом случае оттенки зеленого и красного не влияют на конечный результат). Поддерживаются все названия W3 CSS Color module (они немного странные, поэтому обычно я выбираю зеленый, синий и желтый).
18. Игнорирование ауто лейаута
Мне нравятся ауто лейауты, но иногда они ужасно раздражают, если нужно быстро добавить или опробовать элемент. Есть маленькая хитрость, о которой я не знала, но хотела бы знать раньше! При перетаскивании элемента просто нажмите пробел, чтобы он располагался поверх ауто лейаута.
19. Быстрая настройка автоматической ширины текста
Хотите, чтобы для текста была установлена автоматическая ширина (auto-width)? Легко! Просто дважды щелкните на текстовое поле. Готово.
20. Переключатель между режимами Design и Prototype (shift+E)
Это также один из тех очевидных приемов, которыми раньше я не пользовалась. С помощью сочетания клавиш Shift+E можно переключаться между режимами Prototype и Design.
21. Установка любого фрейма в качестве обложки проекта
Раньше приходилось настраивать верхнюю страницу вашего дизайна в качестве обложки проекта. Теперь в этом нет необходимости! Можно просто выбрать фрейм и превратить его в обложку. Выберите фрейм, щелкните правой кнопкой мыши и выберите “set as thumbnail”.
22. Скрывайте курсоры других членов команды
Не хотите, чтобы курсоры ваших коллег были видны в общем файле во время работы? Нет проблем, вы можете просто скрыть их через Menu>View>Multiple cursors (прим. Меню>Вид>Несколько курсоров) или просто нажать alt + cmd +/.
23. Используйте % для настройки высоты строки
В Figma высота строки задается в px/pt, что немного утомляет. Мне нравится использовать общие значения, как в CSS, например: line-height=1.5. К сожалению, вы не можете установить высоту строки в единицах CSS, но можно использовать %. Это позволяет менять размер шрифта, сохраняя единую высоту строки.
Высота строки в px/pt рассчитывается следующим образом: текст размером 16px и значением высоты строки 1.5 или 150% соответствует формуле: 16*150%=24px/pt. Кстати, в режиме inspect этот параметр все равно будет отображаться в px!