Передовой опыт разработки | Автоматический макет в Figma

Автоматическая компоновка — одна из самых важных функций в Figma, универсальность которой отличает ее от других инструментов проектирования. Короче говоря, он позволяет вам структурировать компоненты и фреймы таким образом, чтобы они могли автоматически расти, заставляя контейнер адаптироваться к размеру его содержимого или наоборот.

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

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

Основы

Начнем с простого. Вы можете применить автоматический макет как к фреймам (даже если они пустые), так и к компонентам. Но что ж, вы начнете видеть, как это работает, имея как минимум два слоя.

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

Направление

Для начала у нас есть направление. Это означает, как компонент будет расти, когда в нем будет больше или меньше контента. Это может быть вертикальное (стрелка вниз) или горизонтальное (стрелка вправо). В нашем первом примере мы установили горизонтальное положение. Это означает, что если текст длиннее, то компонент будет растягиваться по горизонтали, чтобы освободить место для контента, который не извиняется за такое большое давление. Как это грубо!

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

Padding

Если вы раньше работали с CSS, это может показаться вам знакомым. А если нет, то вы можете понимать отступы как внутренние поля компонента. Когда вы применяете Auto Layout, Figma автоматически добавит отступы к каждой из сторон на основе разделения фрейма контейнера, которое ранее было у элементов. Если вы нажмете на параметры заполнения, вы сможете увидеть примененные значения: Figma рассчитала, что они одинаковы вверх и вниз, влево и вправо. Тем не менее, вы можете изменить их, чтобы все значения отличались друг от друга.

Если все отступы не одинаковы, вы увидите текст Смешанный . Если вы предпочитаете применять одно и то же значение ко всем сторонам одновременно, вы можете просто ввести желаемое число, и заполнение будет применено одинаково.

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

Разделение

До сих пор у нас был только один слой внутри кадра, но что было бы, если бы у нас был другой? Есть только один способ узнать. Добавив дополнительный элемент, скажем, значок, вы увидите разделение между значком и текстом. Это расстояние не имеет ничего общего с установленным ранее отступом; это значение настраивается независимо. Это расстояние будет одинаковым между всеми элементами. Это означает, что если вы добавите еще один элемент справа, он автоматически сохранит такое же расстояние: все слои внутри компонента разделены поровну.

Разделение очень полезно, когда у нас есть компонент, содержащий несколько слоев, которые должны находиться на одинаковом расстоянии друг от друга, поэтому макет не сломается, если вы добавите или удалите элементы. Ярким примером могут быть элементы в списке. С этим разделением, независимо от того, сколько элементов у нас есть, все они всегда будут на одинаковом расстоянии друг от друга (хорошо, социальная дистанция сохраняется!) Когда мы добавляем (или удаляем) слой, он будет учитывать эти значения.

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

Это противоположно моим личным предпочтениям (уфу!). Вы должны иметь в виду, что если вы измените порядок слоев из списка слоев, это также повлияет на элементы на холсте. Поэтому порядок слоев важнее, чем когда-либо, и вы должны быть осторожны при использовании Auto Layout.

Распространение

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

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

Выравнивание

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

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

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

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

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

Изменение размера

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

Давайте посмотрим, как это работает, шаг за шагом на следующем примере: У нас есть Card которая включает изображение, текст и кнопку. Имеется равномерный отступ в 24 пикселя, а расстояние между элементами — 16 пикселей. Как вы можете видеть на изображении, не все элементы имеют одинаковую ширину, и они центрированы по горизонтали.

Содержание объятий

Первый вариант, о котором мы поговорим, — это Содержание объятий (ох, объятия, как мило). Это в основном означает, что фрейм контейнера адаптирует свой размер к своему содержимому. Это то, что можно применить как к ширине, так и к высоте, и это немного то, что мы видели до сих пор в других примерах.

Если бы мы добавили больше текста, то контейнер все равно был бы как можно ближе (или обнимал) его содержимое, сохраняя то же заполнение, которое было определено ранее. Это означает, что именно содержимое будет определять размер контейнера.

То же самое произошло бы, если бы изображения не было. Скрывая этот слой, мы можем увидеть, как контейнер адаптируется, уменьшая его размер до размера, необходимого для видимых элементов.

Исправлено

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

Если помимо всего этого мы, например, также скроем кнопку, то весь контейнер останется незатронутым (насколько нечувствительным) и сохранит свою фиксированную высоту. Это можно легко изменить, перейдя к предыдущей настройке Hug contents чтобы она снова адаптировалась к своему содержимому.

Заправочный контейнер

Внутренние или дочерние слои внутри контейнера также могут иметь параметр Заполнить контейнер что означает что-то вроде « пожалуйста, расширьте себя, чтобы использовать все доступное пространство ". В предыдущих примерах ширина кнопки была не полной, а минимальной, необходимой для ее содержимого.

Это конфигурация, которую можно применять слой за слоем внутри одного и того же компонента. С другой стороны, изображение, текст и кнопка могут иметь различное поведение, в зависимости от того, что мы решим (резюмируя: мы могли бы использовать все доступное пространство или фиксированный размер)

Пример, который может пригодиться, — это когда у нас есть два контейнера фиксированной высоты, один рядом друг с другом. Заставив текст использовать все возможное доступное пространство (этот слой будет иметь настройку Fill container ), мы могли бы заставить кнопки всегда выравниваться по низу. Слой текста нажимает кнопки (это не каламбур) и использует всю возможную высоту.

С этого момента мы можем начать играть с различными комбинациями. Небо это предел. До бесконечности и за ее пределы! Возможно, самое важное — решить, кто главный, когда диктует общую ширину и высоту компонента: контейнер или его содержимое.

Ограничения

Параметры Ограничения обычно используются в Figma для определения позиции, которую будет занимать объект при изменении размера контейнера, в котором он находится. Таким образом, мы могли бы задать себе такие вопросы, как: должен ли он оставаться в центре или всегда сохранять одинаковое расстояние до одной из его сторон? Быть или не быть? В контексте автоматического макета эти параметры также определяют, каким образом компонент или фрейм будет расти при изменении его содержимого.

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

Дело не в том, что мне нравится перерабатывать изображения, но … в некоторых из примеров, которые мы уже видели, были уже применены некоторые варианты ограничений (извиняюсь за признание этого только сейчас). В приведенном ниже примере мы сказали, что компонент адаптируется при скрытии одного из слоев. Также происходит то, что он остается вертикально центрированным в пространстве, и это потому, что вертикальное ограничение установлено на Центр . Имеет смысл, не так ли?

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

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

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

До сих пор мы применяли автоматическую компоновку только к одному кадру за раз, даже когда мы изменили настройки для дочерних слоев. Все начинает усложняться (или я должен сказать весело?), Когда мы также применяем Auto Layout к внутренним фреймам.

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

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

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

Краткий обзор того, что у нас есть на данный момент: тексты сгруппированы с вертикальной компоновкой, и они находятся внутри элемента с горизонтальной компоновкой. В то же время все это находится внутри большого, большого контейнера, который имеет вертикальную компоновку, адаптированную к количеству имеющихся в нем предметов. Что-нибудь еще? Да. Если вы еще не заметили, разделение между элементами с аватарками меньше, чем между остальными элементами в основном блоке.

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

Продолжайте учиться

И это все, ребята! Я надеюсь, что, прочитав это и увидев несколько примеров, вы лучше понимаете, как работает Auto Layout в Figma. Как и во всем, это требует большой практики, чтобы начать получать более предсказуемые и контролируемые результаты. И даже в этом случае, прежде чем достичь желаемого результата, всегда нужно провести изрядное количество проб и ошибок.

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