В отличие от обычного фрейма, кнопка с активной функцией Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать. За него можно сказать спасибо разработчикам из Figma — именно они его придумали и создали. Идея была в том, чтобы оптимизировать время и вместо ручного размещения объектов делать это автоматически, с вариантами вертикальной и горизонтальной компановки. Таким образом, Auto Layout — это встроенный инструмент в Figma, с помощью которого можно легко и просто выравнивать элементы. По моему опыту могу сказать, что в процессе проектирования свойства одного компонента редко меняются.

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

Компоненты — это элементы, которые можно массово редактировать. Например, если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера и текста у главного компонента — копии также будут меняться. Затем нужно создать больше компонентов для разных форм и типов. Выберите все компоненты и нажмите «+» в правом углу кнопки. Затем Figma продублирует все выбранные компоненты, и нам нужно переименовать значение свойства. Как и со многими другими проблемами дизайна, конечный результат может показаться очевидным.

Когда мы применяем Auto Layout на фрейм, в котором отступы не одинаковые, он автоматически выберет наименьшее значение из пар верх-низ, лево-право и применит его на всю пару. Если очень формально, то Auto Layout — это функция Figma, которая позволяет задавать фиксированные отступы от контента (с некоторыми условиями, конечно же). Удерживайте пробел, чтобы не размещать объекты внутри автоматического auto-layout.

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

Вспомните коллекции аватаров, поля форм, выпадающие списки или даже карточки. Вам не придется создавать отдельные варианты для каждой возможной комбинации. Метод нулевого фрейма чрезвычайно полезен при проектировании динамических прогресс-баров.

Нет необходимости создавать несколько вариантов для обозначения степени завершенности задачи. Вы можете нарисовать один мастер-компонент и изменять интервалы Auto Layout в экземплярах компонентов. Выберите контейнер с Auto Layout и нажмите Shift+H, чтобы отразить его по горизонтали (Shift+V, если нужно отразить по вертикали). Сначала ваш дизайн может выглядеть неудовлетворительно, но не волнуйтесь и доверьтесь мне. Следующий шаг — нажать Enter, чтобы выделить все дочерние элементы. Затем нажмите Shift+H (Shift+V соответственно), чтобы отразить все элементы Auto Layout в обратном направлении.

Uxpub 🇺🇦 Дизайн-спільнота

Работники Figma обнаружили, что пользователи практически не использовали данную фичу. Именно поэтому в ноябре 2020 года, элементы управления выравниванием были перемещены в родительский фрейм. Такой подход должен упростить работу автоматической компоновки.

• Создайте 2 фрейма размером zero x 0 пикселей и добавьте для них горизонтальный Auto Layout с параметром “Hug contents”.
• Такой подход должен упростить работу автоматической компоновки.
• Когда у вас есть множество фреймов auto-layouts, перемещение по дочерним элементам может стать запутанным.
• Resizing определяет поведение объекта при изменении размера родительского фрейма или его содержимого.
• Посмотрите видео по ссылке выше, чтобы узнать, как это сделать.

Auto Layout — это способ упорядочивания элементов и изменения их размеров внутри фрейма. Вы можете использовать его для создания отзывчивых кнопок, которые подстраиваются под размер своих текстовых меток. Он также незаменим для списков, поскольку позволяет добавлять и удалять из них элементы, не нарушая лейаут. Кроме того, он помогает создавать универсальные компоненты, которые адаптируются к различным размерам экрана.

Подробный Гайд По Auto Layout

Наконец-то они позволяют индивидуально настраивать интервал!! Она очень ускорит наш рабочий процесс; Я просто не могу дождаться, чтобы применить ее к нашей дизайн-системе. Будучи дизайнером, вы можете представлять себя кем-то вроде безумного https://deveducation.com/ ученого, тщательно смешивающего все элементы, чтобы создать связное, визуально привлекательное целое. И как любой безумный ученый, вы можете быть перфекционистом и стремиться к тому, чтобы все было точно и идеально до пикселя.

Здесь я покажу, как создать полностраничный компонент, используя Auto Layout в Figma. Но так как в кнопке на данный момент у нас находится только текст, мы можем просто поменять ориентацию на вертикальную и визуально для нас ничего не изменится. А наша кнопка сделана с помощью горизонтального (если Auto Layout применяется на фрейм, где всего один объект, он дефолтно делает список горизонтальным). Это происходит, потому что мы не настроили Align для объектов в фрейме «pop-up».

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

У Роджи Кинга есть руководство на YouTube, где он объясняет этот хитрый трюк. Для этого создайте фрейм с нулевой высотой, поместите на него объекты, а затем установите высоту zero,001 для округления до zero. Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V. Внутри фрейма auto-layout вы можете установить часть элементов, как фиксированные, а часть – со смешанными фиксированными и плавными настройками. Удерживайте ПРОБЕЛ при размещении объекта внутри auto structure, чтобы расположить его так, как вам нужно, и избежать его автоматического размещения. Опять же, главный компонент слева состоит из экземпляров компонентов модуля (справа).

Блок лейаута предоставляет вам доступ к вариантам количества и списку экземпляров для подмены. Самое приятное то, что вы фактически изменяете структуру экземпляров, и ничего не скрывается в панели “Слои”. Если вы хотите сохранить пропорции элементов, читайте подробнее о плейсхолдерах с фиксированным соотношением сторон здесь. И вам не нужно перетаскивать каждый слой, чтобы создать нужную последовательность.

Поведение Контейнера

Распределение позволяет вам выбирать, как выровнять дочерние объекты внутри фрейма auto-layout. Точного размера можно добиться с помощью метода нулевого фрейма. Создайте 2 фрейма размером zero x 0 пикселей и добавьте для них горизонтальный Auto Layout с параметром “Hug contents”. Ширина этого контейнера контролируется расстоянием между его дочерними элементами. Дублируйте этот фрейм и поверните его на ninety градусов, чтобы создать регулятор высоты.

Но, как и в случае с любым другим инструментом, здесь имеется кривая обучения. С помощью моего краткого руководства вы сошьете этого монстра без ошибок 🧟. Ниже вы можете увидеть страницу, которую я буду использовать в качестве примера. Это настоящая страница, которую я разработал auto layout figma что это и использую в проекте, над которым я работаю на Chainstack.com. В этом посте я остановлюсь только на компонентах, которые используют Auto Layout. Если вы не знакомы с концепциями атомарного дизайна, я настоятельно рекомендую вам сначала прочитать больше об атомарном дизайне.

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

Затем в этом родительском фрейме вы можете добавить auto-layout ко всем элементам. Таким образом, вы можете оставить в ограничениях настройку «left & right», чтобы заблокировать объект auto-layout для столбцов контента. Rogie King использует тот же трюк, что и в 6 рекомендации. Он размещает внутри контейнера auto format фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto structure, чтобы он не становился меньше, если текст недостаточно длинный. Однако для того, чтобы это волшебство случилось, нужно было сделать важный шаг.

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

Когда вы добавляете Auto Layout к фрейму, элементы внутри располагаются рядом друг с другом (вертикально или горизонтально). Затем размер фрейма определяется общим размером элементов в нем. Фреймы Auto Layout могут иметь свои собственные отступы, заливку, обводку и радиус угла, поэтому вы можете создавать кнопки без добавления дополнительных слоев. Распределение (distribution) скрыто под индивидуальным отступом. На это уходит секунда, тем более что здесь вы можете сочетать много настроек.

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