Авто лейаут в Фигме
Как создавать кнопки и грамотно группировать объекты в Figma.
Функция авто лейаута очень полезная. Она позволяет решать несколько задач:
- Удобное создание кнопок за счет расставления автоматических отступов
- Группировка элементов с установкой автоматических отступов
Чтобы создать кнопку при помощи auto layout — нужно создать текстовый контейнер. Далее нажать клавиатурное сокращение “Shift + A”. Тогда у вашего текстового контейнера появятся границы.
Для того, чтобы добавить заливку – нажимаем на знак плюса в панели Fill. Теперь наш автолейаут готов к работе. В специальной панели мы можем настроить внутренние отступы у кнопки (Для визуальной красоты я рекомендую, чтобы верхний и нижний отступы были в 2 раза больше, чем боковые).
Для создания auto layout с использованием нескольких объектов нужно:
- Выделить два объекта
- Нажать клавиатурное сокращение Shift + A
Теперь ваши элементы сгруппированы. Вы также можете управлять расстоянием между объектами при помощи панели отступов. Если вы группируете несколько объектов разной величины, то для вас станет доступна опция выравнивания объектов относительно друг друга. Вы можете протестировать, меняя положение переключателя в панели выравнивания, данные функции.
Таким образом вы можете очень гибко создавать сложные композиции и управлять расстоянием между элементами. Лично я в своей работе использую auto layout только для формирования кнопок, но я занимаюсь веб-дизайном, и в этой сфере данная функция не раскрывает себя полностью. Но если вы занимаетесь дизайном мобильных приложений, то эта функция вам будет крайне необходима.
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.
10 советов по использованию функции Auto-Layout в Figma
Выведите свои знания об auto-layout на новый уровень Следуйте за созданным мной файлом Figma Community.
1. Сочетания клавиш 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
Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.
3. С легкостью изменяйте порядок объектов
Измените порядок объектов внутри auto-layout с помощью клавиш со скобками или клавиш со стрелками.
- ] = изменить порядок вправо или вниз
- [= изменить порядок влево или вверх
- Или используйте клавиши со стрелками
4. Создайте слайдер Auto-Layout
Используя функцию auto-layout и значение отступа «space between», довольно легко создать регулируемый компонент слайдера для диапазона значений, количества или индикатора выполнения. Посмотрите видео по ссылке выше, чтобы узнать, как это сделать.
5. Сэкономьте время, набрав «auto»
Сэкономьте несколько кликов мышью, набрав «auto» в поле значения интервала, чтобы установить для контейнера значение «space between».
6. Выровняйте элементы за пределами auto-layout, используя фреймы с нулевой высотой
У Роджи Кинга есть руководство на YouTube, где он объясняет этот хитрый трюк. Для этого создайте фрейм с нулевой высотой, поместите на него объекты, а затем установите высоту 0,001 для округления до 0.
Этот совет позволяет объектам красиво располагаться за пределами фрейма auto-layout, что обычно невозможно, поскольку Figma не допускает отрицательных значений.
7. С легкостью перемещайтесь по компонентам фреймов auto-layout
Когда у вас есть множество фреймов auto-layouts, перемещение по дочерним элементам может стать запутанным. Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма.
- ENTER / RETURN = перейти на фрейм
- SHIFT + ENTER / RETURN= покинуть фрейм
- TAB = перейти от одного дочернего элемента к другому после перехода на фрейм auto-layout
- ESC= остановить переход / покинуть фрейм
8. Избегайте вложенных фреймов auto-layout
Удерживайте пробел, чтобы не размещать объекты внутри автоматического auto-layout.
9. Центрируйте элементы с помощью заголовка
Если у нашего контейнера auto-layout есть заголовок, и нам нужно, чтобы объект оставался в центре, есть небольшая хитрость, чтобы сделать это.
Вот что нужно сделать, чтобы этого добиться:
- Продублируйте контейнер заголовка
- Измените заливку второго слоя заголовка на 0%
- Используйте сочетание клавиш CMD + [, чтобы переместить прозрачный заголовок вниз
- Установите для всего контейнера значение интервалов «SpaceBetween»
10. Минимальная ширина / высота фрейма
Используйте тот же трюк с нулевой высотой
В совете 6 Роджи Кинг показал нам, что мы можем создать контейнер auto-layout с минимальной шириной или высотой.
11. Бонус! Посмотрите мое расширенное руководство по Auto-Layout
Посмотрите мое руководство, чтобы узнать, как создавать полностью гибкие и адаптивные интерфейсы с помощью функции auto-layout.
Руководство на Youtube:
Советы по функции Auto Layout в Figma
Я работал над рядом особенностей последнего обновления Figma Я один из тех людей, которые за лето переключились со Sketch на Figma. Примерно через неделю после перехода и преобразования компонентов, Sketch незаметно выпустил функцию Smart Layout. Я корил себя. Наша компания, GatherContent, была на полпути к созданию дизайн-системы и мы переключились на Figma, чтобы извлечь максимальную пользу из среды совместной работы. Но тут Sketch выпустил новую функцию и заставил нас переоценить свое решение. Тем не менее, мы продолжили создавать дизайн-систему в Figma, периодически оглядываясь назад, чтобы увидеть забавные изменения, происходящие в Sketch. А потом. Figma анонсировала функцию Auto Layout, и недавно наконец выпустила ее! Ура! Хотя она не лишена недостатков, я потратил пару дней на ее освоение. Я подумал, что вам будет интересно, если я поделюсь рядом изученных приемов. Это должно быть особенно полезно для тех, кто управляет дизайн-системой, поскольку это может повлиять на Auto Layout компонентов каскадирования. Эта статья предполагает умеренный уровень знаний Figma и компонентов.
Преобразование Auto Layout
По большей части функция Auto Layout довольно проста в использовании, но вы можете устроить беспорядок, если не будете осторожны.
Поведение контейнера
Если вы похожи на меня, то ваши кнопки будут состоять из прямоугольников и текстовых слоев. С Auto Layout эта концепция исчезает. Сами фреймы образуют основу прямоугольника, перенимания все стили и эффекты формы контейнера, которую он только что поглотили. На самом деле это простое, но умное решение от Figma. Давайте посмотрим, что произойдет, если вы включите Auto Layout для базового прямоугольника и компонента текстового слоя без преобразования . Прямоугольник и текстовый слой будут рассматриваться, как соседние элементы, поэтому к ним будут применяться правила макета. В этом случае настройки макета устанавливаются в горизонтальное положение. Если я изменю их на вертикальное положение, они будут выглядеть так. После того, как вы преобразовали кнопку для использования функции Auto Layout, вы больше не сможете перетаскивать / перемещать содержимое компонента вручную. Вы настраиваете внутренние отступы с помощью элементов управления на правой панели.
Кнопки с иконками
Как только вы освоите описанный выше прием, то добавление дополнительных элементов в компонент с включенной функцией Auto Layout не вызовет проблем. Давайте посмотрим на кнопку с иконкой. Конструкция и настройки простой кнопки с иконкой Как мы узнали выше, сам фрейм компонента обрабатывает синий контейнер, поэтому все, что у нас есть внутри, это слои иконки и текста. Внутренний отступ устанавливается с помощью настроек справа. В нашем случае это отступ 18px слева и справа, и 9px сверху и снизу. Пространство между иконкой и текстом установлено на 8px. Довольно просто, однако люди с зорким взглядом могли заметить, что левый и правый отступы не выглядят одинаково. Визуально вы правы, и это первая особенность, которую я хочу выделить. В нашей дизайн-системе все иконки заключены в контейнер. В частности, иконки 16px находятся внутри контейнера 24px. Для этого есть две основные причины. Во-первых, это позволяет нам полностью контролировать иконки по вертикали и горизонтали. Вы когда-нибудь использовали треугольную иконку, и она не выглядела достаточно выровненной? Во-вторых, это заставляет нас учитывать область нажатия кнопок при проектировании новых интерфейсов. Фрагмент системы сетки, которую мы используем для наших иконок 16px Это, конечно, создает проблемы с Auto Layout. Функция Auto Layout не учитывает пустое пространство, она учитывает только размер элементов внутри компонента. Однако, это не подходит для тех, кто использует подобную систему. Чтобы решить эту проблему, мы должны иметь возможность устанавливать независимые значения для каждого параметра внутреннего отступа. На данный момент мы живем с этим небольшим смещением в надежде, что вскоре его исправят. Потому что мы считаем, что наш способ управления иконками правильный.
Вложенные компоненты
Это метод позволяет быстро усложнять вещи. Кроме того, я узнал, насколько быстро могу все испортить, предполагая, что комбинация клавиш Shift+A действует подобно переключателю. Это не так. Неоднократное нажатие на Shift+A приведет вас к бездне ада Auto Layout. Вам помогут меню параметров и функция «Remove Auto Layout». В любом случае, вложенные компоненты – это довольно впечатляющая функция. Давайте посмотрим на наш компонент выпадающего меню. Структура компонента выпадающего меню Главный компонент находится слева и содержит то, что мы называем «модулями» (справа). В приведенном выше примере меню состоит только из пунктов меню. Модули чаще всего 30px в высоту, но разделительная линия составляет всего 20px. В прошлом это могло бы привести к хаосу, если поменять местами экземпляры пунктов меню с разделителями, поскольку невозможно было изменить размер, чтобы компенсировать разницу в высоте. Увы! Больше нет… Однако для того, чтобы это волшебство случилось, нужно было сделать важный шаг. Поскольку разделительная линия составляет 20px по высоте, а не 30px, мне пришлось включить функцию Auto Layout для этого компонента и установить значения верхнего и нижнего отступов. Это означает, что главный компонент знает значения отступов, которые он должен использовать при замене этого компонента, в противном случае простая замена экземпляра пункта меню на разделитель просто заставит разделитель наследовать высоту 30px. И поскольку у нас включена функция Auto Layout на главном компоненте, контейнер соответственно изменяет свой размер.
Переопределения на лету
С вложенными компонентами и функцией Auto Layout вы ожидаете, что сможете добавлять элементы, и все они будут органично увеличиваться / уменьшаться, не так ли? Да, но, возможно, не так легко, как вы себе это представляете. Давайте посмотрим на еще один компонент . Структура рабочего процесса нашего выпадающего компонента Опять же, главный компонент слева состоит из экземпляров компонентов модуля (справа). 2 компонента «Completed», 1 компонент «Current», 1 компонент «Future» с экземплярами компонента «Линия разделителя» между ними. Давайте посмотрим, что произойдет, когда я вставлю экземпляр главного компонента и попытаюсь добавить больше модулей… К сожалению, компоненты и Auto Layout не так умны, как хотелось бы. Я знаю, что прошу Figma о многом, но надеюсь, что они это исправят. Однако, на данный момент, единственный способ сделать ваши компоненты суперизменчивыми – это отсоединить их от главного компонента. Я признаю, это кажется неправильным. Неплохо было бы иметь landing маркеры, чтобы я мог видеть, где мои компоненты появятся, но погодите, улучшения еще впереди. Разумеется, для каждого из этих компонентов модуля, а также для главного компонента, включена функция Auto Layout. Именно эта вложенность позволяет органически изменять размер всего компонента в зависимости от его содержимого, даже когда я изменяю текст слоя описания. Функция Auto Layout находится в зачаточном состоянии, поэтому в ближайшие дни / недели после написания этой статьи, я ожидаю много изменений в ее поведении. На данный момент, однако, это все, что я могу вам о ней сказать. Я знаю, что затронул только вершину айсберга и уверен, что есть какие-нибудь сумасшедшие адаптивные макеты, о которых, я к своему стыду не знаю. Однако, я надеюсь, что, по крайней мере, некоторые из вас сочтут эту статью полезной, и она поможет вам. Если вам есть, что добавить, не стесняйтесь, пишите в комментариях! Перевод статьи uxdesign.cc
Новый auto-layout в Figma за 5 минут
Новый auto-layout в Figma обновили и анонсировали в мае 2022 года. Некоторые вещи в нем остались без изменений, некоторые функции оказались совершенно новыми, а некоторые элементы просто переместили или дополнили приятными мелочами, которые тоже советуем не пропускать.
У многих возникли проблемы с тем, чтобы разобраться в новых функциях и понять, как использовать старые в новых условиях. Уделите нам 5 минут времени, и мы расскажем обо всем, что касается нового auto-layout.
Видеоверсия этого туториала здесь:
Однако обратите внимание, что теперь слои располагаются в том порядке, в котором они показаны на холсте, что стало намного более логичным! Спасибо Figma за это, старый обратный порядок меня действительно раздражал.
2. Меню auto-layout: те же функции, новый вид
Внешний вид меню автомакета изменился, давайте разберемся.
Направление и расстояние работает так же, как и раньше. Можно установить горизонтальное и вертикальное отступы, как и раньше, а если захотите, чтобы отступы были индивидуальными, откройте параметры всех сторон. Довольно стандартно. Выравнивание переместилось из подменю в главное меню, но работает так же (обратите внимание на некоторые приятные шорткаты из меню выравнивания).
�� СОВЕТ: cmd + щелчок для нотации CSS
Зажмите cmd и кликните на поле заполнения . Теперь вы можете использовать запятую, как в CSS. Или введите одно значение для всех. Мелочь, а приятно!
3. Новинки: возможность регулирования на холсте ��
Помимо меню auto-layout, теперь у вас есть и элементы управления на холсте. Если вы наведете курсор на рамку auto-layout, вы увидите маленькие розовые маркеры, которые сможете перетаскивать. Это работает для настройки расстояния и заполнения.
�� СОВЕТ: увеличьте с помощью установленных значений смещения
Удерживайте Shift при перетаскивании, увеличивая и уменьшая заданные значения смещения.
�� СОВЕТ: нажимайте на области auto-layout, чтобы установить конкретное значение
Нажмите на области интервалов auto-layout, выделенные розовым цветом на холсте, чтобы установить конкретное значение.
�� СОВЕТ: Равные горизонтальные и вертикальные отступы
Удерживайте alt при перетаскивании, чтобы получить одинаковые отступы для регулировки по горизонтали или вертикали. Или удерживайте shift + alt при перетаскивании, и все отступы изменятся одинаково.
4. Новинки: отрицательный интервал! ��
Хорошо, вот это то нововведение, которое меня действительно радует. Теперь можно установить отрицательное расстояние между элементами, что означает, что вы можете «складывать» элементы стопкой!
Итак, у меня есть карточки с auto-layout, и я добавлю еще одну. Теперь я могу использовать элемент управления на холсте или меню, чтобы установить отрицательное значение интервала между ними и создать стопку. Это работает и в случае вертикального, и в случае горизонтального выравнивания.
А еще это очень крутая вещь для создания прототипов, столько новых возможностей!
Расширенное меню
Если щелкнуть по трем точкам в меню auto-layout, откроется меню расширенной компоновки.
5. Режим интервала: те же возможности, но с новыми приятными сочетаними клавиш
Начнем с моих любимых, packed и space between. Здесь не много нового. Так же, как и в старом auto-layout, по умолчанию используется packed, который сохраняет установленный интервал между вашими элементами. Для отступа между ними будет использоваться все доступное пространство, благодаря чему будут создаваться равные промежутки между непосредственными дочерними элементами.
�� СОВЕТ: переключайтесь с помощью меню выравнивания + X
Это очень удобно, поскольку я часто использую эти параметры и мне часто нужно копаться в меню. Используйте поле выравнивания и нажимайте X для переключения между space between и packed.
�� СОВЕТ: введите «auto», чтобы установить space between
Нажмите на маркер регулирования расстояния на холсте и введите «auto» в поле ввода значений. Так вы переключитесь на режим space between. Если вы добавите значение, все вернется в режим packed.
6. Новинки: теперь можно включить exclude stroke (внешний контур)
В расширенном меню auto-layout теперь можно найти возможность включить или исключить обводку, что очень удобно для избегания «столкновений» элементов. Плюс это делает компоненты более аккуратными.
7. Новинки: изменение порядка наложения
Здесь вы можете изменить порядок наложения, если у вас есть элементы с отрицательным интервалом. Обратите внимание, что это не меняет порядок в меню слоев!
Помимо порядка наложения вы также всегда можете использовать старые добрые стрелки клавиатуры — это изменит порядок слоев.
8. Новинки: выравнивание текста по базовой линии
Для этого вам нужен хотя бы один текстовый элемент. В расширенном меню теперь можно выбрать выравнивание по центру (по умолчанию) или по базовой линии текста.
�� СОВЕТ: переключайтесь с помощью меню выравнивания + B
Выберите поле выравнивания и нажмите B , чтобы переключить выравнивание текста на параметр «по базовой линии».
9. Новинки: абсолютное позиционирование ��
Этот тоже фантастика. Теперь вы можете установить для элемента абсолютное позиционирование. Сначала вам нужно перетащить его в рамку auto-layout, а затем вы увидите опцию абсолютного позиционирования в меню фреймов. Когда элемент позиционируется абсолютно, вы можете перемещать его, куда хотите, и установить ограничения. Это отлично подходит для таких вещей, как пузырьки оповещения и предупреждения. Абсолютно крутая функция!
�� СОВЕТ: проверяйте точность значений в режиме Inspect mode
10. Меню изменения размера: как раньше, только в новом месте и с новыми шорткатами
Я была немного шокирована, когда впервые открыла новый auto-layout, поскольку меню изменения размера исчезло! Но нет! Оно просто переместилось в секцию настройки фрейма. Оно работает так же, как и старое доброе меню изменения размера, но в нем есть несколько новых приятных шорткатов.
�� СОВЕТ. Используйте новые сочетания клавиш для изменения размера.
Hug vertical → дважды щелкните по верхней или нижней линии рамки в auto-layout.
Hug horizontally → дважды щелкните по левой или правой линии рамки в auto-layout.
Заполнить контейнер → удерживайте alt , нажимая то же, что описано выше.
11. Все нравится, но чего еще не хватает:
Как обычно, впечатлена последним обновлением. Но все еще надеюсь, что скоро появится нормальная настройка соотношения сторон для изображений! О, как бы хорошо было иметь встроенное соотношение сторон, потому что тогда бы я смогла прекратить использовать хакерские (тем не менее отличные) решения. Также для таких дислектиков, как я, полная интеграция Grammarly была бы просто сказкой!
