UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 42 совета по Figma, которые ускорят вашу работу
Редакція
Редакція

Опубліковано

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18 — Cmd + Option + S: добавляет историю версий. Вероятно, большинство из нас этого не делает. 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. Это довольно просто, но я видел, что большинство людей используют эту функцию с помощью правой панели, поэтому решил добавить вызывающее ее сочетание клавиш в этот список.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Перевод статьи uxdesign.cc

Найновіші коментарі (0)