42 совета по Figma, которые ускорят вашу работу

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

Ранее я уже публиковал статью из этой серии. В ней вы можете найти еще несколько простых методов. Однако с обновлениями Figma постоянно добавляет новые сочетания клавиш. Так что я постараюсь поддерживать эти статьи в актуальном состоянии. А теперь перейдем к комбинациям клавиш:

Примечание: клавиша Cmd соответствует клавише Ctrl в Windows, а Option – клавише Alt.

1 — Cmd при выделенном изображении: вы можете обрезать изображение, нажав кнопку Cmd.

42 совета по Figma, которые ускорят вашу работу

2 — Ссылки на странице / перенаправление: вы можете ссылаться на элементы на странице, например, якорные ссылки на веб-сайтах.

42 совета по Figma, которые ускорят вашу работу

3 — Control (^) + C или клавиша I: выбор цветовой палитры.

42 совета по Figma, которые ускорят вашу работу

4 — Cmd, затем «число» (значение непрозрачности): после выбора элемента и нажатия кнопки Cmd вы можете изменить непрозрачность, нажимая клавишу от 1 до 9 (1 для 10%, 9 для 90%). Вы, наверное, уже знали об этом. Но, если дважды быстро нажать 0, непрозрачность изменится на 0%. Или, если вы быстро нажмете две клавиши, например, 8 и 9 непрозрачность составит 89%).

42 совета по Figma, которые ускорят вашу работу

5 — Control + Option + T: Упорядочить. Выравнивает разбросанные элементы определенным образом.

42 совета по Figma, которые ускорят вашу работу

6 — Реорганизация упорядоченных элементов: после упорядочивания группы выделенных элементов, их можно регулировать курсором. Кроме того, можно заменять элементы друг на друга без нарушения порядка / соотношения.

42 совета по Figma, которые ускорят вашу работу

7 — Перетаскивание + Пробел: если вы хотите изменить расположение выбранной области, вы можете использовать клавишу пробела после ее выбора.

42 совета по Figma, которые ускорят вашу работу

8 — Cmd + «число» (вкладок): вы можете переключаться между вкладками с помощью комбинации Cmd + «число», как в браузерах, если открыто более одного файла / вкладки. Конечно, домашняя страница – это тоже вкладка.

42 совета по Figma, которые ускорят вашу работу

9 — Cmd + точка (.): Закрывает правую и левую панели. Так вы получите измените рабочее пространство. Вы можете использовать ту же комбинацию клавиш, чтобы открывать панели.

42 совета по Figma, которые ускорят вашу работу

10 — Cmd + |: эта комбинация также скрывает только левую панель. Вы можете использовать ту же комбинацию, чтобы открыть ее снова.

42 совета по Figma, которые ускорят вашу работу

11 — Cmd + G: Группировать выбранные элементы.

42 совета по Figma, которые ускорят вашу работу

12 —  Cmd + Option + G: объединить выбранные элементы во фрейм, как при группировке. Иногда при изменении размеров элементов более выгодно использовать фреймы вместо групп.

42 совета по Figma, которые ускорят вашу работу

13 — Control + Shift +?: Отображение всех сочетаний клавиш. Так вы сможете попробовать сочетания, которых нет в этой статье.

42 совета по Figma, которые ускорят вашу работу

14 — Shift + Cmd + K: выбор фотографий из файлов. Таким образом, можно выделить группу фотографий. Вы также можете размещать фотографии, кликая по фреймам, прямоугольникам и т. д. (каждый элемент, который может содержать изображение) один за другим.

42 совета по Figma, которые ускорят вашу работу

15 — Выбор цвета: давайте выберем элемент, который можно заливать цветом. Выбрав параметр заливки элемента, вы можете найти светлые и темные тона цветов с помощью клавиш со стрелками вверх (светлые) и вниз (темные). Для этого необходимо выбрать заливку. Кроме того, если вы нажмете клавишу Shift, вы сможете быстрее уловить тональные различия.

42 совета по Figma, которые ускорят вашу работу

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

42 совета по Figma, которые ускорят вашу работу

17 — Отображение элемента: в больших файлах может быть сложно найти элемент на холсте, но мы можем найти его на левой панели. Следовательно, если вы щелкните по иконке, появившейся рядом с элементом на левой панели, этот элемент выделится на холсте и будет отцентрирован.

42 совета по Figma, которые ускорят вашу работу

18 — Cmd + Option + S: добавляет историю версий. Вероятно, большинство из нас этого не делает. Figma автоматически ведет историю версий. Но вы можете добавить более подробную (с пояснениями) историю версий с помощью этой комбинации клавиш.

42 совета по Figma, которые ускорят вашу работу

19 — Выравнивание:

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

  • Option + A: выравнивание по левому краю.
  • Option + D: выровнять по правому краю.
  • Option + V: выровнять по вертикали.
  • Option + H: выровнять по горизонтали.
  • Option + W: выровнять по верхнему краю
  • Option + S: выровнять по нижнему краю
  • Option + Control + T: упорядочить
  • Option + Control + V: распределить интервалы по вертикали
  • Option + Control + H: распределить интервалы по горизонтали

20 — Shift + A: элементы Auto-layout. Это довольно просто, но я видел, что большинство людей используют эту функцию с помощью правой панели, поэтому решил добавить вызывающее ее сочетание клавиш в этот список.

42 совета по Figma, которые ускорят вашу работу

21 — Перетаскивание + Пробел: нам может потребоваться переместить вложенные элементы внутри фрейма. Их может быть не было видно на фрейме (проблема clip content), в этих случаях элемент, который мы хотим переместить, также выходит за пределы фрейма. Чтобы предотвратить это, мы можем нажать клавишу пробела при перетаскивании вложенного элемента.

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

42 совета по Figma, которые ускорят вашу работу

22 — Alt: клавиша Alt используется для определения расстояния от одного элемента до другого. После выбора элемента нажмите клавишу Alt и перетащите курсор на другой элемент. Таким образом, вы можете получить идеальный до пикселя дизайн.

42 совета по Figma, которые ускорят вашу работу

23 — Shift + 2: выбор элемента. Затем вы можете увеличить выбранный элемент с помощью комбинации Shift и 2 (Zoom to selection).

42 совета по Figma, которые ускорят вашу работу

24 — Shift + 1: масштабирование с заполнением по размеру. Позволяет уместить на полотне все элементы.

42 совета по Figma, которые ускорят вашу работу

25 — Z + Rectangle Area: выберите область на холсте, нажав клавишу Z. С помощью этой комбинации клавиш вы увеличиваете выбранную область. Кроме того, Option + Z + Rectangle Area – это комбинация клавиш для уменьшения области.

42 совета по Figma, которые ускорят вашу работу

26 — Cmd + Y: преобразует холст в контуры. Этот прием эффективен для просмотра элементов на фреймах, которые мы не видим.

42 совета по Figma, которые ускорят вашу работу

27 — Cmd + Scrub: вы можете увеличивать масштаб холста, перемещая его вверх и вниз с помощью мыши или тачпада (двумя пальцами на Mac).

42 совета по Figma, которые ускорят вашу работу

28 — Option + Scrub: очистить введенные данные. Вы можете изменить введенные значения, перемещая пальцы влево и вправо на мыши или тачпаде (двумя пальцами на компьютерах Mac).

42 совета по Figma, которые ускорят вашу работу

29 — Трюк с границей: Существуют разные образцы границ. Например, фрейм можно использовать как разделитель с помощью инструмента «Прямоугольник». Но поскольку прямоугольник – это отдельный элемент, функция auto-layout может вызвать проблемы.

Выберите элемент, к которому вы хотите добавить границу. Добавьте «внутреннюю тень» (inner shadow) из раздела «effects» на правой панели. Затем зададите значения Blur: 0, Spread: 0, X: 0 и Y: 10, тогда под элементом появится граница 10px.

Вы можете увеличить толщину границы, изменив значение Y. Наконец, вы можете выбрать цвет и прозрачность (вы можете использовать этот эффект для других элементов, создав стиль с названием «border»).

42 совета по Figma, которые ускорят вашу работу

30 — Иерархия фреймов: я упоминал, что мы можем быстро выбрать элемент на фрейме с помощью клавиши Cmd. Но, если на фрейме много вложенных элементов, выбирать становится сложно. Следовательно, если вы щелкните правой кнопкой мыши, нажав клавишу Cmd после выбора фрейма, вы сможете увидеть иерархию фреймов. Таким образом, вы сможете выбрать любой из элементов на фрейме.

42 совета по Figma, которые ускорят вашу работу

31 — Union Selection: у вас могут быть векторные компоненты, например, иконки. Если мы поменяем иконки местами (swap instance), цветовой стиль, который мы применили к предыдущей иконке, может не применяться к новой иконке.

Эту проблему можно решить, применив к иконкам функцию Union Selection.

42 совета по Figma, которые ускорят вашу работу

32 — Cmd + E: Flatten selection. Вы можете преобразовать несколько фигур в один вектор. Это сочетание клавиш полезно при проектировании иконок и иллюстраций.

42 совета по Figma, которые ускорят вашу работу

33 — Вкладки левой панели: Левая панель имеет две вкладки Layers и Assets. Вы можете использовать комбинации клавиш Option + 1 (Layers), Option + 2 (Assets) для переключения между этими вкладками.

42 совета по Figma, которые ускорят вашу работу

34 — Вкладки правой панели: Также есть сочетания клавиш для правой панели. Вы можете переключаться между вкладками с помощью комбинаций Option + 8 (Design), Option + 9 (Prototype), Option + 0 (Inspect).

42 совета по Figma, которые ускорят вашу работу

35 — Клавиша N: если мы нажимаем клавишу N на холсте, фреймы выбираются последовательно. Если вы продолжаете нажимать клавишу N, вы продолжите переключаться между фреймами. Если вы примените комбинацию клавиш Shift + N, все будет в обратном порядке.

42 совета по Figma, которые ускорят вашу работу

36 — Tab: Клавиша Tab имеет множество функций. В этом примере; если вы нажмете Tab, когда выделен фрейм, вы будете перемещаться по элементам на этом фрейме один за другим.

42 совета по Figma, которые ускорят вашу работу

37 — Enter (возврат): клавиша Enter – это еще одна клавиша, которая имеет множество функций, подобно клавише Tab. Если вы нажмете Enter, когда выделен фрейм; вы выберите первый вложенный элемент на фрейме (дочерний слой).

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

42 совета по Figma, которые ускорят вашу работу

38 — Cmd + Resize: если вы хотите изменить размер фрейма, его размер изменяется в соответствии со свойствами ограничений. По умолчанию фрейм выравниваются по левому верхнему краю. Но если вы этого не хотите, попробуйте изменить размер, нажав клавишу Cmd.

42 совета по Figma, которые ускорят вашу работу

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

42 совета по Figma, которые ускорят вашу работу

40 — Shift + X: это очень крутая функция. Сочетание клавиш для замены цвета обводки и цвета заливки при выборе элемента.

42 совета по Figma, которые ускорят вашу работу

41 — Shift + Cmd + O: обводка контура. Для использования этого сочетания клавиш на фрейме должен быть элемент. Итак, на левой панели вы увидите новый элемент под названием «(Stroke)». Вы также можете применить обводку контура к выбранному элементу. Например, чтобы сосредоточиться на кнопках и подобных элементах.

42 совета по Figma, которые ускорят вашу работу

Примечание: Чтобы полностью понять разницу между состояниями «Активное наведение» и «Фокус», я рекомендую вам ознакомиться с этой статьей.

42 — Описание компонента: мы можем добавлять ключевые слова к компонентам на правой панели. Таким образом, мы можем выполнить поиск по ключевому слову в разделе «Assets» на левой панели и найти этот компонент.

42 совета по Figma, которые ускорят вашу работу

Спасибо за прочтение.

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи

Лучшие статьи, раз в неделю, с доставкой на почту

Total
28
Share