10 советов по использованию функции Auto-Layout в Figma

Выведите свои знания об auto-layout на новый уровень

Следуйте за созданным мной файлом Figma Community.

1. Сочетания клавиш Auto-Layout

10 советов по использованию функции Auto-Layout в Figma

Чем больше вы познакомитесь с сочетаниями клавиш auto-layout, тем быстрее их использование войдет в привычку.

Попробуйте следующие сочетания клавиш, чтобы ускорить рабочий процесс:

  • SHIFT + A = добавить auto-layout
  • SHIFT + ALT + A = превратить фрейм auto-layout в обычный фрейм
  • CMD / CTRL + SHIFT + G = удалить auto-layout
  • CMD / CTRL + D = дублировать элементы на фрейме auto-layout

2. Скопируйте свойства и стиль Auto-Layout

10 советов по использованию функции Auto-Layout в Figma

Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.

3. С легкостью изменяйте порядок объектов

10 советов по использованию функции Auto-Layout в Figma

Измените порядок объектов внутри auto-layout с помощью клавиш со скобками или клавиш со стрелками.

  • = изменить порядок вправо или вниз
  • [= изменить порядок влево или вверх
  • Или используйте клавиши со стрелками

4. Создайте слайдер Auto-Layout

10 советов по использованию функции Auto-Layout в Figma

Видеоруководство от автора наYouTube

Используя функцию auto-layout и значение отступа «space between», довольно легко создать регулируемый компонент слайдера для диапазона значений, количества или индикатора выполнения. Посмотрите видео по ссылке выше, чтобы узнать, как это сделать.

5. Сэкономьте время, набрав «auto»

10 советов по использованию функции Auto-Layout в Figma

Сэкономьте несколько кликов мышью, набрав «auto» в поле значения интервала, чтобы установить для контейнера значение «space between».

6. Выровняйте элементы за пределами auto-layout, используя фреймы с нулевой высотой

10 советов по использованию функции Auto-Layout в Figma

У Роджи Кинга есть руководство на YouTube, где он объясняет этот хитрый трюк. Для этого создайте фрейм с нулевой высотой, поместите на него объекты, а затем установите высоту 0,001 для округления до 0.

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

7. С легкостью перемещайтесь по компонентам фреймов auto-layout

10 советов по использованию функции Auto-Layout в Figma

Когда у вас есть множество фреймов auto-layouts, перемещение по дочерним элементам может стать запутанным. Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма.

  • ENTER / RETURN = перейти на фрейм
  • SHIFT + ENTER / RETURN= покинуть фрейм
  • TAB = перейти от одного дочернего элемента к другому после перехода на фрейм auto-layout
  • ESC= остановить переход / покинуть фрейм

8. Избегайте вложенных фреймов auto-layout

10 советов по использованию функции Auto-Layout в Figma

Удерживайте пробел, чтобы не размещать объекты внутри автоматического auto-layout.

9. Центрируйте элементы с помощью заголовка

10 советов по использованию функции Auto-Layout в Figma

Если у нашего контейнера auto-layout есть заголовок, и нам нужно, чтобы объект оставался в центре, есть небольшая хитрость, чтобы сделать это.

Вот что нужно сделать, чтобы этого добиться:

  1. Продублируйте контейнер заголовка
  2. Измените заливку второго слоя заголовка на 0%
  3. Используйте сочетание клавиш CMD + [, чтобы переместить прозрачный заголовок вниз
  4. Установите для всего контейнера значение интервалов «SpaceBetween»

10. Минимальная ширина / высота фрейма

10 советов по использованию функции Auto-Layout в Figma

Используйте тот же трюк с нулевой высотой

В совете 6 Роджи Кинг показал нам, что мы можем создать контейнер auto-layout с минимальной шириной или высотой.

Посмотрите видео на YouTube

11. Бонус! Посмотрите мое расширенное руководство по Auto-Layout

10 советов по использованию функции Auto-Layout в Figma

Посмотрите мое руководство, чтобы узнать, как создавать полностью гибкие и адаптивные интерфейсы с помощью функции auto-layout.

Руководство на Youtube:

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

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

Total
25
Share