10 советов по использованию функции Auto-Layout в Figma UXPUB Спільнота дизайнерів

Просто раньше по-другому нельзя было сделать, так как автолэйауты не давали возможности настроить разные отступы сторон и сделать заполнение на весь контейнер. Преимущество маржинов как раз в том, что если компоненты проработаны достаточно хорошо, то можно просто накидывать их в сетку, а они сами встанут как надо. Лучше всего это работает для вертикальных блоков, особенно для вёрстки текстовых страниц с заголовками, параграфами и картинками. Если отступы друг от друга, то это решается оборачиванием всех элементов в один Auto Layout.

Функция Auto Layout не учитывает пустое пространство, она учитывает только размер элементов внутри компонента. Однако, это не подходит для тех, кто использует подобную систему. В меню параметра указывают размер каждого внешнего поля и выравнивание объектов внутри модуля с Auto Layout. Resizing определяет поведение объекта при изменении размера родительского фрейма или его содержимого. Это звучит знакомо, если вы ранее использовали ограничения. Теперь auto-layout и ограничения (называемые resizing во фрейме auto-layout) идут рука об руку, что несомненно меняет правила игры.

А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. Новый auto-layout в Figma обновили и анонсировали в мае 2022 года. Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать. Когда дело доходит до состояний кнопок, они тоже полезны.

С помощью вариантов можно управлять не только состояниями элементов управления интерфейса. Если в вашем проекте несколько размеров кнопок, auto layout в figma объедините их с помощью вариантов. Так вы сможете переключаться между большим, средним и малым размером в пределах одного компонента.

шагов, чтобы содержать проекты Figma в чистоте

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

• Каждый раз делать разные состояния одной и той же кнопки — долго.
• На панели настроек в блоке Variants напротив слова State напишите Disable.
• Когда вы активировали у фрейма функцию Auto Layout, все объекты внутри начали подчиняться новым правилам и выстроились в линию.
• Это работает и в случае вертикального, и в случае горизонтального выравнивания.

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

Вложенные компоненты

Затем в этом родительском фрейме вы можете добавить auto-layout ко всем элементам. Таким образом, вы можете оставить в ограничениях auto layout в figma настройку «left & right», чтобы заблокировать объект auto-layout для столбцов контента. Fixed → Сохраняет фиксированную ширину и / или высоту при изменении размера родительского элемента. По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение. Чтобы понять, как работает Auto Layout, создадим простую кнопку с любым текстом. В отличие от обычного фрейма, кнопка с активной функцией Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать.

Figma включает в себя такую функцию, как Auto Layout, с помощью которой можно автоматизировать создание отступов, а также обеспечить удобное выравнивание соседних модулей…. Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты. Сделайте из каждой кнопки самостоятельные компоненты — нажмите на каждую правой кнопкой мыши и в выпадающем меню выберите Create component.

Если хотите увидеть более продвинутое использование вариантов, ознакомьтесь с моим User Flow Kit. Вы также можете прочитать другие мои статьи по ✍️ UI дизайну . Эта статья первоначально была опубликована в моем блоге. Используйте переключатель, чтобы упростить настройку флажков, переключателей и других элементов управления.

Каковы ограничения вариантов?

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

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

Меню изменения размера: как раньше, только в новом месте и с новыми шорткатами

Именно эта вложенность позволяет органически изменять размер всего компонента в зависимости от его содержимого, даже когда я изменяю текст слоя описания. Однако для того, чтобы это волшебство случилось, нужно было сделать важный шаг. Когда у вас много auto layout, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам. 2 компонента «Completed», 1 компонент «Current», 1 компонент «Future» с экземплярами компонента «Линия разделителя» между ними.

Перестань рисовать ячейки — большой гайд по Figma…

Используйте поле выравнивания и нажимайтеX для переключения между space between и packed. Так же, как и в старом auto-layout, по умолчанию используется packed, который сохраняет установленный интервал между вашими элементами. Для отступа между ними будет использоваться все доступное пространство, благодаря чему будут создаваться равные промежутки между непосредственными дочерними элементами. Этот совет позволяет объектам красиво располагаться за пределами фрейма auto-layout, что обычно невозможно, поскольку Figma не допускает отрицательных значений.

Кнопка сама адаптируется под длину текста благодаря параметру Resizing— изменение размера. По умолчанию Figma вResizing использует свойство Hug contents— форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента — и вуаля. Canvas stackingБезусловно полезная функция, позволяющая задать порядок слоев во врейме.

Ниже я хотел бы дать вам несколько практических советов по использованию вариантов. Используйте новые сочетания клавиш для изменения размера. Если я изменю их на вертикальное положение, они будут выглядеть так… Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.

Чтобы включить Auto Layout выберите несколько элементов и нажмите Shift + A (либо выберите пункт Add Auto Layout). На это уходит секунда, тем более что здесь вы можете сочетать много настроек. Распределение позволяет вам выбирать, как выровнять дочерние https://deveducation.com/ объекты внутри фрейма auto-layout. Объекты можно выровнять по горизонтали или вертикали, как и в предыдущей версии. Однако приятным дополнением стала возможность выровнять дочерние элементы фрейма auto-layout с помощью нового инструмента выравнивания.

В этом артборде настрой только Spacing между частями ячейки, разумеется, переключи лэйаут по горизонтали, это же горизонтальный компонент. Несмотря на всю полезность этой функции, есть некоторые моменты, которые можно улучшить. Назовите свои компоненты так, чтобы они имели стиль – «Основной», «Вторичный», «Нейтральный», «Ошибка», «Успех» и т. Благодаря этому вы сможете настраивать их на лету с помощью различных вариантов.