Nudge Amount

Описание
Позволяет настроить шаг сдвига объектов. По умолчанию 10, удобно: 4.
Группа команд
Preferences
Клавиша Mac
Не бывает
Клавиша Windows
Не настроена
Есть в меню
Главное меню (Mac и Win)
2. File Browser

Вариант 1. Главное меню Figma

image
↔️
Движение по меню Figma

Quick Actions
New from Sketch File...

System Theme
Libraries

Вариант 2. Quick Actions

Можно ввести запрос nud в поиск по

.

image

Почему шаг сдвига важен

Эта настройка очень важна при работе с интерфейсами и определяет шаг сдвига — расстояние в пикселях, на которое будет сдвигаться объект, если нажимать Shift стрелки.

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

Крупность клетки влияет на то, насколько гибко и точно можно выравнивать объекты, не отклоняясь от сетки.

По умолчанию шаг сдвига равен 10 px, что неудобно для работы с интерфейсами, поскольку 10 делится на 2 без остатка всего лишь один раз, в то время как 8 — 3 раза. По этой причине для мобильных интерфейсов обычно используются 8 px и 4 px.

Более крупная сетка позволяет ускорить расположение объектов: для презентаций удобно использовать клетку и шаг сдвига по 40 px.

Пример: синхронизируем шаг сдвига и сетку

  1. Открываем окно c настройкой Nudge Amount. Проверяем, что шаг сдвига равен 10. Можно указать другое значение.
  2. Создаём
    Frame
    Frame
    размером 200 х 200.
  3. В нём создаём квадрат инструментом
    Rectangle
    Rectangle
    размером 100 х 100.
  4. Чтобы сделать сетки видимыми, включаем режим
    Layout Grids
    .
  5. Добавляем настройку сетки на фрейм командой
    Add Layout Grid
    . Появляется красная клетчатая сетка.
  6. Приближаем квадрат командой
    Zoom In
    до масштаба 200%.
  7. Стрелками двигаем квадрат по 1 px, пока он не встанет на сетку.
  8. Shift стрелками двигаем квадрат по фрейму, не отклоняясь от сетки. Пока зажат Shift, мы можем быть уверены, что всё будет по сетке. ⏹️

— образовательный телеграм-канал об интерфейсах, продуктовом дизайне, инструментах для него, о карьере дизайнера и эмиграции Опечатки и обратную связь автору → @okunev