Не работает autolayout figma

Авто лейаут в Фигме

Функция авто лейаута очень полезная. Она позволяет решать несколько задач:

1. Удобное создание кнопок за счет расставления автоматических отступов
2. Группировка элементов с установкой автоматических отступов

Чтобы создать кнопку при помощи auto layout — нужно создать текстовый контейнер. Далее нажать клавиатурное сокращение “Shift + A”. Тогда у вашего текстового контейнера появятся границы.

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

Для создания auto layout с использованием нескольких объектов нужно:

1. Выделить два объекта
2. Нажать клавиатурное сокращение Shift + A

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

Таким образом вы можете очень гибко создавать сложные композиции и управлять расстоянием между элементами. Лично я в своей работе использую auto layout только для формирования кнопок, но я занимаюсь веб-дизайном, и в этой сфере данная функция не раскрывает себя полностью. Но если вы занимаетесь дизайном мобильных приложений, то эта функция вам будет крайне необходима.

Важно! Если вы хотите посмотреть, как на практике используется функция auto layout — рекомендую ознакомиться с готовыми шаблонами Figma. В них вы сможете изменять шрифт, и видеть визуальные отличия. Ссылки на шаблоны: ссылка 1 и ссылка 2

Источник

AutoLayout

Плагин AutoLayout динамически размещает слои во фреймах и обновляет макет при изменении размеров дочерних слоев. Он ведет себя аналогично стекам Framer и инструментарию Anima для Sketch.

Создание простого списка

1. Оберните элементы списка во фрейм
2. Откройте плагин Auto Layout, выберите фрейм и включите переключатель «Layout frame»
3. Измените направление на вертикальное и отрегулируйте расстояние

Как создать автоматический список дел

1. Создайте текстовый слой и прямоугольник как флажок рядом с ним для первого элемента задачи.
2. Оберните оба элемента во фрейм.
3. Откройте AutoLayout и включите его для фрейма. Установите направление по горизонтали и отрегулируйте отступы / выравнивание по своему вкусу. Можете изменить порядок, перемещая слои вверх и вниз на боковой панели слоев.
4. Выделив фрейм, установите для параметра «Высота» значение «Изменить по размеру» в AutoLayout, который автоматически изменит размер фрейма при увеличении длины текстового поля.
5. Дублируйте фрейм несколько раз ниже, чтобы создать список задач.
6. Оберните все элементы todo во фрейм и включите AutoLayout, установите вертикальное направление. Можете настроить расстояние между элементами.
7. Попробуйте добавить перенос строки в один из элементов задачи, чтобы увеличить его. Элементы ниже будут автоматически перемещаться вниз, чтобы освободить место.

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

Источник

Как работает новая функция 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) идут рука об руку, что несомненно меняет правила игры.

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

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 для столбцов контента.

Источник

Обновление Auto Layout для Figma

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

Сегодня Figma выпустила новый апдейт, главной звездой которого стала обновленная функция Auto Layout.

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

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

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

Вот что произойдет, после обновления фрейма:

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

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

В случае, если вам необходимо создать дизайн с дочерними элементами, в которых будут использованы разные настройки выравнивания:

1. Выберите элемент, который нужно выровнять иначе.
2. Добавьте Auto Layout к элементу с помощью сочетания клавиш Shift+ A.
3. Установите для вновь созданного фрейма значение «Заполнить контейнер» на оси, по которой должно быть выравнивание.
4. При необходимости установите выравнивание.

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

Источник

Советы по функции Auto Layout в Figma

Я работал над рядом особенностей последнего обновления Figma

Я один из тех людей, которые за лето переключились со Sketch на Figma. Примерно через неделю после перехода и преобразования компонентов, Sketch незаметно выпустил функцию Smart Layout. Я корил себя. Наша компания, GatherContent, была на полпути к созданию дизайн-системы и мы переключились на Figma, чтобы извлечь максимальную пользу из среды совместной работы. Но тут Sketch выпустил новую функцию и заставил нас переоценить свое решение. Тем не менее, мы продолжили создавать дизайн-систему в Figma, периодически оглядываясь назад, чтобы увидеть забавные изменения, происходящие в Sketch.

А потом… Figma анонсировала функцию Auto Layout, и недавно наконец выпустила ее! Ура! Хотя она не лишена недостатков, я потратил пару дней на ее освоение. Я подумал, что вам будет интересно, если я поделюсь рядом изученных приемов.

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

Преобразование Auto Layout

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

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

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

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

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

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

Кнопки с иконками

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

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

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

В нашей дизайн-системе все иконки заключены в контейнер. В частности, иконки 16px находятся внутри контейнера 24px. Для этого есть две основные причины. Во-первых, это позволяет нам полностью контролировать иконки по вертикали и горизонтали. Вы когда-нибудь использовали треугольную иконку, и она не выглядела достаточно выровненной? Во-вторых, это заставляет нас учитывать область нажатия кнопок при проектировании новых интерфейсов.

Фрагмент системы сетки, которую мы используем для наших иконок 16px

Это, конечно, создает проблемы с Auto Layout. Функция Auto Layout не учитывает пустое пространство, она учитывает только размер элементов внутри компонента. Однако, это не подходит для тех, кто использует подобную систему.

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

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

Это метод позволяет быстро усложнять вещи.

Кроме того, я узнал, насколько быстро могу все испортить, предполагая, что комбинация клавиш Shift+A действует подобно переключателю. Это не так. Неоднократное нажатие на Shift+A приведет вас к бездне ада Auto Layout.

Вам помогут меню параметров и функция «Remove Auto Layout».

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

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

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

И поскольку у нас включена функция Auto Layout на главном компоненте, контейнер соответственно изменяет свой размер.

Переопределения на лету

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

Давайте посмотрим на еще один компонент …

Структура рабочего процесса нашего выпадающего компонента

Опять же, главный компонент слева состоит из экземпляров компонентов модуля (справа). 2 компонента «Completed», 1 компонент «Current», 1 компонент «Future» с экземплярами компонента «Линия разделителя» между ними.

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

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

Я признаю, это кажется неправильным.

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

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

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

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

Источник