Перестань рисовать ячейки большой гайд по Figma Auto Layout Дизайн на vc ru

January 20, 2023 8:19 pm Published by Leave your thoughts

Теперь я могу использовать элемент управления на холсте или меню, чтобы установить отрицательное значение интервала между ними и создать стопку. Это работает и в случае вертикального, и в случае горизонтального выравнивания. После того, как вы преобразовали кнопку для использования функции Auto Layout, вы больше не сможете перетаскивать / перемещать содержимое компонента вручную.

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

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

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

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

Выравнивание в Figma: Auto Layout

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

Выравнивание переместилось из подменю в главное меню, но работает так же (обратите внимание на некоторые приятные шорткаты из меню выравнивания). Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. Главный компонент находится слева и содержит то, что мы называем «модулями» (справа). В приведенном выше примере меню состоит только из пунктов меню. Модули чаще всего 30px в высоту, но разделительная линия составляет всего 20px.

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

Дополнительный настройки

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

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

Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы. С вложенными компонентами и функцией Auto Layout вы ожидаете, что сможете добавлять элементы, и все они будут органично увеличиваться / уменьшаться, не так ли? Да, но, возможно, не так легко, как вы себе это представляете. И поскольку у нас включена функция Auto Layout на главном компоненте, контейнер соответственно изменяет свой размер. В любом случае, вложенные компоненты – это довольно впечатляющая функция. Давайте посмотрим на наш компонент выпадающего меню…

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

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

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

Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Неплохо было бы иметь landing маркеры, чтобы я мог видеть, где мои компоненты появятся, но погодите, улучшения еще впереди. Разумеется, для каждого из этих компонентов модуля, а также для главного компонента, включена функция Auto Layout.

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

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

советов по работе с Auto-Layout в Figma

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

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

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

Но тут Sketch выпустил новую функцию и заставил нас переоценить свое решение. В расширенном меню теперь можно выбрать выравнивание по центру (по умолчанию) или по базовой линии текста. В расширенном меню auto-layout теперь можно найти возможность включить или исключить обводку, что очень удобно для избегания «столкновений» элементов. Помимо меню auto-layout, теперь у вас есть и элементы управления на холсте. Если вы наведете курсор на рамку auto-layout,вы увидите маленькие розовые маркеры, которые сможете перетаскивать. Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически.

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

Подробнее о том, что такое компоненты, читайте в этом материале. Я обновил User Flow Kit, чтобы https://deveducation.com/ по максимуму использовать варианты. Это позволило мне узнать много нового о самой функции.

Categorised in:

This post was written by Chris Klimek

Leave a Reply

Your email address will not be published. Required fields are marked *