IT ОбразованиеСоветы По Функции Auto Layout В Figma Uxpub Дизайн-спільнота

Советы По Функции Auto Layout В Figma Uxpub Дизайн-спільнота

- Advertisement -
- Advertisement -

Не забудьте включить Expose nested situations на компоненте выпадающего списка. В приведенной выше анимации вы можете увидеть, как работает наша страница атомарного дизайна в режиме прототипа в Figma. Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок раздела). Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри. Рисунок выше иллюстрирует логику, которую я использую для своих компонентов. При таком подходе легко проектировать компоненты и, что очень важно, поддерживать их после.

2 компонента «Completed», 1 компонент «Current», 1 компонент «Future» с экземплярами компонента «Линия разделителя» между ними. Это должно быть особенно полезно для тех, кто управляет дизайн-системой, поскольку это может повлиять на Auto Layout компонентов каскадирования. Эта auto layout figma что это статья предполагает умеренный уровень знаний Figma и компонентов. Затем используйте плагин Batch Create Component, чтобы создать все компоненты сразу. После копирования и заполнения всех вариантов в таблице мы можем изменить цвета вариантов в соответствии с состоянием.

Соберём страницу из трёх модулей, каждый из которых имеет отступы 60 пикселей. Очень быстро мы сможем получить полный набор вариантов для типа «Первичный». Для внесения изменений, вам сперва необходимо обновить фрейм, чтобы удалить отдельное дочернее выравнивание. В панели Design укажите, что и сколько раз вы хотите продублировать.

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

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

Скопируйте Свойства И Стиль Auto-layout

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

Сэкономьте несколько кликов мышью, набрав «auto» в поле значения интервала, чтобы установить для контейнера значение «space between». Чем чаще вы будете использовать горячие клавиши auto layout, тем быстрее их применение войдет у вас в привычку. К сожалению, компоненты и Auto Layout не так умны, как хотелось бы. Я знаю, что прошу Figma о многом, но надеюсь, что они это исправят.

По умолчанию Figma в Resizing использует свойство Hug contents — форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого. Чтобы понять, как работает Auto Layout, создадим простую кнопку с любым текстом. В отличие от обычного фрейма, кнопка с активной функцией Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать. Теперь мы можем, наконец, создать компоненты для нашей кнопки. Перед преобразованием фрейма в компонент убедитесь, что в названии слоя есть все варианты, разделенные «/». Мы постараемся визуально сохранить ваш оригинальный дизайн.

Или нажать плюсик около заголовка “Auto Layout” в правом панели, как показано ниже. Несмотря на то, что постоянная подгонка обычной кнопки в нужные размеры, в зависимости от введенного текста, не такое уж сложное задание, оно довольно утомительно. Если у нашего контейнера auto-layout есть заголовок, и нам нужно, чтобы объект оставался в центре, есть небольшая хитрость, чтобы сделать это.

Важливість Доступності Дизайну

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

Функция Auto Layout

Давайте продублируем его и сделаем еще несколько шаблонов для разных размеров и типов кнопок. Когда все свойства внесены в список, я начинаю думать об организации этого компонента в Figma, чтобы он был управляемым и масштабируемым. Они также представили новейшую функцию – Variants, которая поможет вам привести в порядок ваши компоненты. У этой функции есть «мера предосторожности» от случайных действий, например, перетаскивания большого изображения внутрь кнопки. Но на тот случай, если это было вашим намерением, вы можете убрать «защиту», удерживая нажатой клавишу command (ctrl в Windows).

Вы можете визуально выдвинуть первый или последний элемент на передний план, изменив параметры наложения. Кроме того, все компоненты на странице очень гибкие и отзывчивые, и я могу использовать https://deveducation.com/ их во всех моих файлах дизайна. В случае каких-либо изменений в дизайне страницы, я могу обновить их в своей библиотеке, и она автоматически обновит все мои файлы дизайна.

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

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

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

Функция Auto Layout

Стоит обратить внимание, что Auto Layout сам удалил слой Rectangle «bg» под моим текстом и применил настройки его стиля (цвет, радиус скругления) на сам фрейм целиком. До появления Auto Layout в моей жизни, кнопку я делала таким образом. Посмотрите мое руководство, чтобы узнать, как создавать полностью гибкие и адаптивные интерфейсы с помощью функции auto-layout. В совете 6 Роджи Кинг показал нам, что мы можем создать контейнер auto-layout с минимальной шириной или высотой.

Последний уровень — это компонент строки с несколькими атомными компонентами внутри. Первый слой помогает нам создавать отступы вокруг контента. Но вдруг если мы хотим, чтобы наши кнопки также растягивались по всей широте фрейма, ничего не мешает нам это сделать. Мы просто меняем ориентацию списка кнопок на вертикальную и также делаем для него Stretch Left & Right. В случае текстов, мы сделали Stretch Left & Right, а для кнопок оставили по левому краю, потому что сохраняем ориентацию по левому краю. Чтобы применить Auto Layout на ваш фрейм, нужно выделить фрейм и нажать сочетание клавиш Shift+A.

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

Наконец-то мы дождались обновления для всеми нами любимого инструмента. Расстояние между объектами может обозначаться положительным или отрицательным числом. При значениях меньше zero дочерние элементы частично перекрывают соседние.

С помощью auto structure и значения  “spacing between items”, довольно легко создать регулируемый компонент ползунка для диапазона значений, количества или индикатора выполнения. Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать. Если у каждой стороны должен быть свой отступ, нажмите на иконку  и укажите нужные значения в дополнительном меню. Если их нужно сделать одинаковыми, укажите значение напротив иконки . Мы имеем к ней быстрый доступ и можем использовать её в нашем проекте — просто берём и перетаскиваем её из панели слева. Чтобы скопировать кнопку, нужно выделить её, зажать клавишу Alt и потянуть в сторону.

  • Не забудьте включить Expose nested cases на компоненте выпадающего списка.
  • Большой плюс работы с вертикальными списками, это то, что мы можем работать с адаптивностью фрейма, так как чаще всего нас волнует именно ширина контента.
  • Стоит обратить внимание, что Auto Layout сам удалил слой Rectangle «bg» под моим текстом и применил настройки его стиля (цвет, радиус скругления) на сам фрейм целиком.
  • Если после манипуляций на предыдущем шаге мы постараемся изменить размер фрейма получится такая проблема.
  • На это уходит секунда, тем более что здесь вы можете сочетать много настроек.
  • Теперь с темной темой нужно удвоить количество компонентов.

Прежде чем создавать дополнительные варианты для разных стилей, давайте удостоверимся в правильности свойств и значений. Затем добавьте метку-плейсхолдер и используйте функцию auto-layout, чтобы сохранить внутренние отступы кнопки. Кроме того, если у вас есть библиотеки компонентов и дизайн-системы, теперь вы можете применить Auto Layout к каждому компоненту, нажав Shift + A или через меню «Option». Тем не менее, исследование свободной формы дизайна практически невозможно в этих условиях.

تعليقات الفيس بوك

الكاتب

مقالات ذات صلة

الأكثر قراءة

اخر الأخبار