Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

Функция auto-layout появилась в Figma в 2019 году. Это хорошая функция, но, честно говоря, я редко использовал ее в своей повседневной работе. В основном потому что она немного «сходила с ума» от адаптивных ограничений, которые я часто использую. Но все изменилось с ноябрьским обновлением Figma.

Что такое auto layout?

Auto-layout позволяет создавать динамические фреймы, которые реагируют и изменяют размер в соответствии с их содержимым. Я уверен, что вы видели классический пример кнопки. Создайте фрейм, добавьте контент и преобразуйте фрейм в auto-layout (либо через панель свойств справа, либо нажмите Shift + A). Фрейм auto-layout теперь будет адаптироваться к изменению содержимого. Фрейм auto-layout может быть вложен по вертикали и горизонтали для создания изысканных компонентов и даже целых страниц.

Так что же изменилось?

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

1. Индивидуальная настройка отступов

Теперь вы можете настроить внутренние отступы индивидуально для левого, правого, верхнего и нижнего края. Очень удобно!

Индивидуальные отступы

? Небольшая хитрость: вы также можете вводить значения, как в CSS, через запятую, например, 10, 25, 15, 20 (top right bottom left padding) или 10, 20 (top/boom, left/right). Так намного быстрее!

2. Выравнивание и распределение

Объекты можно выровнять по горизонтали или вертикали, как и в предыдущей версии. Однако приятным дополнением стала возможность выровнять дочерние элементы фрейма auto-layout с помощью нового инструмента выравнивания. Самое главное, они сохраняют заданные внутренние отступы. По сути, это конец инструмента выравнивания в прежнем виде (хотя, он все еще находится в самом верху панели свойств справа).

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

Распределение (distribution) скрыто под индивидуальным отступом. На это уходит секунда, тем более что здесь вы можете сочетать много настроек. Распределение позволяет вам выбирать, как выровнять дочерние объекты внутри фрейма auto-layout.

Packed → самостоятельно определяйте расстояние между ними

Space between → автоматически определяет пространство, равномерно распределяя дочерние элементы.

3.Новое меню изменения размера

Resizing определяет поведение объекта при изменении размера родительского фрейма или его содержимого. Это звучит знакомо, если вы ранее использовали ограничения. Теперь auto–layout и ограничения (называемые resizing во фрейме auto–layout) идут рука об руку, что несомненно меняет правила игры.

Есть три варианта, и вы можете комбинировать их по высоте и ширине друг с другом!

Варианты

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

1. Hug contents→ помимо того, что это самое красивое название функции интерфейса, с которым я когда-либо сталкивался (особенно во время пандемии). Это по сути старая версия настройки auto-layout: фрейм всегда соответствует своему содержанию по высоте и / или ширине.
2. Fixed → Сохраняет фиксированную ширину и / или высоту при изменении размера родительского элемента.
3. Fill container→ Как вы уже догадались, растягивается, чтобы заполнить родительский контейнер по высоте или ширине, что очень важно для адаптивного поведения. Доступно только для объектов внутри фрейма auto-layout.

4. Новые параметры вложенного изменения размера в действии

Отзывчивый и адаптивный к содержимому. Наконец-то!

Прелесть в том, что вы можете смешивать и сочетать все параметры, чтобы создавать мощные адаптивные элементы. Как упоминалось ранее, auto-layout и ограничения не работали вместе. Теперь вы можете применить адаптивное поведение и сохранить все настройки интервалов при изменении содержимого. Это станет большим преимуществом для моего рабочего процесса!

Отзывчивый и адаптивный к содержимому

Смешивание фиксированных и адаптивных настроек

Раньше это было возможно, но весьма сложно. Теперь нужно всего лишь несколько кликов. Внутри фрейма auto-layout вы можете установить часть элементов, как фиксированные, а часть – со смешанными фиксированными и плавными настройками.

Смешивание фиксированных и плавных настроек

Одинаковая высота для всех дочерних элементов!

Если у вас много содержимого в контейнере, но вы хотите, чтобы все элементы имели одинаковую высоту, просто настройте все дочерние элементы так, чтобы они заполняли контейнер по высоте, а к родительскому фрейму auto–layout примените параметр hug contents по высоте. Готово! Как ни странно, сейчас это труднее сделать в CSS, чем в Figma!

Одинаковая высота для всех элементов

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

Обязательно ознакомьтесь с официальным файлом по auto-layout от Figma. В нем вы найдете еще много удивительных примеров!

5. Обновление режима проверки (Inspect mode)

Новая функция также отображается на панели Specs. Вы увидите, что она переводит его на flexbox, а также показывает некоторое общее поведение.

6. Мне все еще не хватает одной вещи: фиксации соотношения сторон изображений!

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

Кстати, если вы хотите и дальше использовать сетки с ограничениями

Я немного беспокоился об этом, так как все мои файлы настроены с помощью адаптивных сеток. Это не проблема. Просто сохраните фреймы с сетками такими, какие они есть (поэтому не добавляйте auto–layout в родительский фрейм, содержащий сетку!). Затем в этом родительском фрейме вы можете добавить auto–layout ко всем элементам. Таким образом, вы можете оставить в ограничениях настройку «left & right», чтобы заблокировать объект auto-layout для столбцов контента.

CSS-сетки можно настроить с помощью auto–layout, и я скоро напишу об этом статью с примерами. Так что не забудьте подписаться или посетить moonlearning.io

---

Перевод статьи uxplanet.org

Auto layout в Figma: советы для дизайнера

Содержание:

• Функция Auto Layout
• Как сделать расталкивающие друг друга, или резиновые, кнопки
• Какие параметры следует настраивать
• Что говорят опытные программисты и дизайнеры
• Заключение

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

Хотите получше познакомиться с программой Фигма, узнать, чем занимаются веб-дизайнеры, читайте наш IT-блог от DevEducation и темы, посвященные работе в Figma и PhotoShop.

Функция Auto Layout

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

Давайте вместе с вами сделаем адаптивную кнопку:

1. Зайдите в Figma.
2. Пропишите в поле любой текст.
3. Переключитесь на панель слоев.
4. Кликните правой кнопкой мышки по тексту. В выпавшем списке выберите Frame Selection.
5. Выделите то, что получилось у вас. Перейдите на панель настроек и там добавьте белого фона. Обычно опытные дизайнеры делают это в блоке Fill, кликая по значку «плюс», который располагается с разбираемой нами функцией.
6. Проставьте отступы. Если они будут одинаковы, то пропишите их значение напротив символа в виде квадрата с еще одним квадратом внутри.
7. Если же вам нужно, чтобы отступ был сделан с каждой стороны, то кликните по кнопке с тремя горизонтальными полосками и пропишите необходимые значения.

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

• Resizing — это изменение размера. Только изначально в этом параметре прописано свойство Hug Contents;
• активная функция Auto Layout. Вы же добавляете эту функцию в вышеописанный параметр и получаете подстраиваемую кнопку под высоту и длину содержимого.

Внимание! Опытные веб-дизайнеры не советуют прописывать значение Fixed, иначе кнопка приобретет фиксированные размеры. Однако, если для дизайна сайта нужны именно постоянные размеры, можете смело использовать это значение.

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

• программно;
• на основе маски;
• используя данную функцию.

Эта новая фича помогает дизайнерам быстро и не заморачиваясь создавать любого вида кнопки.

А теперь давайте посмотрим, как делать расталкивающие друг друга кнопки.

Как сделать расталкивающие друг друга, или резиновые, кнопки

Для создания обычной клавиши набираете на клавиатуре Shift + A. Как вы уже знаете, функция самостоятельно задаст размеры. Теперь превращаете кнопку в компонент, который вы будете использовать по всему макету:

1. Трижды копируете кнопку и расставляете по полю. Клавиши должны стоять рядом друг с другом.
2. Снова выделяете их, оборачиваете во фрейм и задействуете Auto Layout.
3. Прописываете отступ в двадцать пикселей. Конечно, вы можете взять другие размеры. Все зависит от фантазии.
4. Теперь пропишите разные тексты в каждой из кнопок. Например, они будут такими: «Вход», Registration, «Выход».

При правильном создании и применении функции кнопки будут расталкивать друг друга. Вы это сможете увидеть на макете. А также не забудьте зайти в блок Constraints. Используя его, вы сможете изменить стороны, куда кнопки будут отталкивать друг друга.

Какие параметры следует настраивать

Стрелки — это главные значения в этой функции. Например, стрелка вниз означает, что кнопки будут выравниваться по вертикали, а стрелка влево или вправо означает, что выравнивание будет проводиться по горизонтали.

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

Что говорят опытные программисты и дизайнеры

Опытные разработчики говорят, что «АвтоЛэйаут» не так умна еще, как хотелось бы многим. Сейчас, чтобы сделать компоненты изменчивыми, их отсоединяют от основного. Это действие требует небольших усилий. Поэтому программисты считают, что разработчики функции наконец допилят «Лэйаут».

Сегодня разработчики создали возможность взаимодействия функции с Constrait. Раньше такого не было.

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

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

Шаги по переносу проекта:

1. Скопировать Instense Cell.
2. Вставить его в новый проект. Последний должен стать детачнутым. Это обязательное условие, поэтому проведите исследование.
3. Опуститься в низкоуровневый слой. Преобразовать из него компонент.
4. Создать еще один компонент из слоя, который находится выше.
5. Четвертый шаг позволит низкоуровневому компоненту появиться рядом. А внутри останется только его инстанс.

Вот таким образом программисты-дизайнеры работают с функцией Auto Layout в программе Фигма. Она очень сильно помогает при разработке дизайна.

Заключение

Теперь вы знаете, как работать с функцией Layout в Figma, и сможете самостоятельно создавать резиновые кнопки. Теперь для этого не нужно писать код. Главное, делайте правильные отступы, чтобы у вас модули не попадали друг на друга.

Как использовать функцию автоматического изменения размера макета Figma | by Rich

Как использовать функцию автоматического изменения размера макета Figma | Рич | BootcampOpen в приложении Опубликовано в

·

Чтение: 3 мин.

·

17 декабря 2021 г.

Все, что вам нужно знать о самых мощных функциях автоматической компоновки в Figma

Добавление автомакет позволяет использовать функцию изменения размера для управления размерами объектов в кадре. Функция изменения размера имеет три свойства: Фиксированная ширина или высота, Содержимое Hug и Заполнить контейнер .

Во фрейме с автоматическим макетом можно изменять размер:

• Объектов как по вертикальной, так и по горизонтальной оси
• Текстовых слоев
• Слоев-фигур
• Вложенных фреймов с автоматическим макетом

При автоматическом макете кадр установлен на фиксированная ширина или высота , рамка не реагирует динамически на изменение объектов.

Динамически изменяет размер рамки автомакета, чтобы она была как можно меньше, чтобы окружать объекты внутри нее.

🪄 Пример того, как содержимое объятия изменяет размер рамки вокруг объектов внутри.

Изменение размера содержимого Hug.

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

🪄 Пример вложенного объекта, который растет вместе с родительским контейнером

Родительский фрейм и вложенный фрейм, оба с автоматической компоновкой.

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

Объекты внутри будут растягиваться до ширины и/или высоты рамки автомакета.

🪄 Пример использования контейнера заливки для текста

Контейнер заливки для текстовых объектов

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

🪄 Пример использования контейнера заливки для объектов формы

Контейнер заливки для объектов формы

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

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

Спасибо за внимание!

Если вам понравилась эта история, нажмите кнопку 👏 и поделитесь ею, чтобы помочь другим найти ее!

Учебник

Дизайн

Пользовательский опыт

Автор Rich

464 Последователи

· Writer for

9000 4 Главный UX-дизайнер. Автор статей для Geek Culture, UX Collective, Bootcamp, Design + Sketch.

Еще от Rich и Bootcamp

в

UX Collective

Как упорядочить файл Figma

Инсайты по созданию шаблона файла Figma для вашей команды

·6 мин чтения·14 июня 2022 г.

900 04 Asim Antule

в

Дизайнеры , Попрощайтесь с Dribbble и Behance и поприветствуйте эти скрытые жемчужины для умопомрачительного…

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

7 минут чтения·25 марта

Christie C.

в

20+ невероятных подсказок в середине пути, которые поразят вас (часть 1)

901 03 Изучите подсказки Midjourney для создания удивительных искусств искусственного интеллекта

· 8 минут чтения·10 марта

в

Дизайн + Эскиз

Системы дизайна

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

·6 минут чтения·5 марта 2020 г.

Просмотреть все от Rich

Рекомендовано Medium

Christine Vallaure

в

UX Planet

90 081 Figma: Адаптивный дизайн с автоматической компоновкой, ограничениями и сетками

Как и когда использовать что — правильно

·Чтение за 10 минут·28 сентября 2022 г.

Передача разработчика: с нуля до записи взаимодействия

Передача проекта может быть сложной задачей.

Это требует четкой коммуникации и общего понимания замысла проекта. Дизайнеры должны делать…

·7 мин чтения·3 января

Списки

Истории, которые помогут вам расти как дизайнеру

11 историй·21 сохранение

Хорошее мышление о продукте

11 историй ·36 сохранений

A Руководство по OKR – Цели и ключевые результаты

10 историй·14 сохранений

Плейлист для визуальных рассказчиков

25 историй·5 сохранений

Михал Малевич

in

UX Collective

Как создать регистрационную форму

Пошаговое руководство о том, как начать дизайн формы

·чтение за 5 минут· 3 февраля

Ульвин Омаров

in

7 плагинов Figma на основе ИИ, которые я использую в качестве дизайнера продукта

Дизайн-проекты UX/UI и как они могут помочь оптимизировать ваш…

·5 минут чтения·May 6

Edward Chechique

in

Как использовать ограничения Figma: простое руководство

Ограничения Figma просто фантастические.

Вот как их использовать.

·4 мин чтения·24 ноября 2022 г.

Ники Тиса

в

Большие дебаты: Именование слоев в Figma

Что инженеры ожидают от дизайнеров

·чтение через 4 мин·14 февраля

Посмотреть больше рекомендаций

Статус

Писатели

Карьера

Конфиденциальность

Преобразование текста в речь

Рекомендации по дизайну | Auto Layout in Figma

Введение с примерами, чтобы вы могли наконец понять, как работает Auto Layout в Figma и как вы можете использовать его для автоматической адаптации своих проектов.

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

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

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

Знакомство с основами

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

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

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

Направление

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

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

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

Padding

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

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

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

Разделение

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

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

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

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

Вы также можете легко размещать элементы, перетаскивая их прямо на холст.

Распределение

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

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

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

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

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

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

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

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

Результат параметров выравнивания в значительной степени зависит от примененных настроек захвата и от распределения по фрейму контейнера.

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

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

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

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

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

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

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

Фиксированный

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

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

Заполнить контейнер

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

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

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

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

Имейте в виду, что применение Заполнить контейнер приведет к автоматическому изменению ширины или высоты основного контейнера на фиксированное значение.

Constraints

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

Параметры ограничений доступны, только если фрейм или контейнер уже находится внутри другого фрейма.

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

В некоторых примерах, которые мы уже видели, уже применялись некоторые параметры ограничений. В примере ниже мы сказали, что компонент адаптируется при скрытии одного из слоев. Что также происходит, так это то, что он остается вертикально центрированным в пространстве, и это потому, что вертикальное ограничение установлено на Center .

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

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

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

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

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

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

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

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

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

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

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

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