Это хорошая функция, но, честно говоря, я редко использовал ее в своей повседневной работе. В основном потому что она немного «сходила с как сделать auto layout в фигме ума» от адаптивных ограничений, которые я часто использую. Функция Auto Layout находится в зачаточном состоянии, поэтому в ближайшие дни / недели после написания этой статьи, я ожидаю много изменений в ее поведении. На данный момент, однако, это все, что я могу вам о ней сказать. Кроме того, я узнал, насколько быстро могу все испортить, предполагая, что комбинация клавиш Shift+A действует подобно переключателю.
Центрируйте элементы с помощью заголовка
Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма. Если выделить объект внутри фрейма, на которых применен Auto Layout также можно заметить изменения в левой панели в блоке Align. В меню параметра указывают размер каждого внешнего поля и выравнивание объектов внутри модуля с Auto Layout.
Чому продуктовим дизайнерам потрібно розбиратися в метриках?
Я немного беспокоился об этом, так как все мои файлы настроены с помощью адаптивных сеток. Просто сохраните фреймы с сетками такими, какие они есть (поэтому не добавляйте auto-layout в родительский фрейм, содержащий сетку!). Затем в этом родительском фрейме вы можете добавить auto-layout ко всем элементам. Таким образом, вы можете оставить в ограничениях настройку «left & right», чтобы заблокировать объект auto-layout для столбцов контента. Судя по всему, эта функция находится в процессе разработки, поэтому я проявлю терпение и буду изменять размер вручную. Когда у вас много auto layout, структура фреймов внутри может начать усложняться.
Советы по функции Auto Layout в Figma
Однако приятным дополнением стала возможность выровнять дочерние элементы фрейма auto-layout с помощью нового инструмента выравнивания. По сути, это конец инструмента выравнивания в прежнем виде (хотя, он все еще находится в самом верху панели свойств справа). Auto-layout позволяет создавать динамические фреймы, которые реагируют и изменяют размер в соответствии с их содержимым.
Два дочерних элемента внутри одного родительского Auto Layout
Однако, на данный момент, единственный способ сделать ваши компоненты суперизменчивыми – это отсоединить их от главного компонента. Опять же, главный компонент слева состоит из экземпляров компонентов модуля (справа). 2 компонента «Completed», 1 компонент «Current», 1 компонент «Future» с экземплярами компонента «Линия разделителя» между ними. С вложенными компонентами и функцией Auto Layout вы ожидаете, что сможете добавлять элементы, и все они будут органично увеличиваться / уменьшаться, не так ли? Да, но, возможно, не так легко, как вы себе это представляете.
AUTO.RIA розпочав оновлюватись: новий дизайн та функції вже доступні у застосунку
И поскольку у нас включена функция Auto Layout на главном компоненте, контейнер соответственно изменяет свой размер. В любом случае, вложенные компоненты – это довольно впечатляющая функция. Как только вы освоите описанный выше прием, то добавление дополнительных элементов в компонент с включенной функцией Auto Layout не вызовет проблем. Я один из тех людей, которые за лето переключились со Sketch на Figma. Примерно через неделю после перехода и преобразования компонентов, Sketch незаметно выпустил функцию Smart Layout.
Viktor Klimenko – UX designer at EPAM. Поділився як стати офіційним представником Figma Community
Затем размер фрейма определяется общим размером элементов в нем. Фреймы Auto Layout могут иметь свои собственные отступы, заливку, обводку и радиус угла, поэтому вы можете создавать кнопки без добавления дополнительных слоев. Чтобы сделать кнопку адаптивной, задайте ей параметры ширины и высоты в зависимости от размера экрана устройства пользователя. Для этого можно использовать функцию «Пользовательский размер компонентов». Эта функция способна задавать размеры компонентов в зависимости от размера экрана устройства пользователя.
- Но, как и в случае с любым другим инструментом, здесь имеется кривая обучения.
- Это хорошая функция, но, честно говоря, я редко использовал ее в своей повседневной работе.
- И как любой безумный ученый, вы можете быть перфекционистом и стремиться к тому, чтобы все было точно и идеально до пикселя.
- Он дает возможность работать в свободной форме, используя такие ключевые концепции, как кривые, слои и группы.
- Автоматически привязывает объекты к границам родительского фрейма при изменении его размеров.
Это элементы, которые Фигма позволяет массово редактировать. Если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера и текста у главного элемента — копии также будут меняться. Теперь с темной темой нужно удвоить количество компонентов. Определение всех свойств и их порядка очень важно, и, прежде чем предпринять следующий шаг, вы должны четко понимать, как вы хотите их структурировать.
Внутренний отступ устанавливается с помощью настроек справа. В нашем случае это отступ 18px слева и справа, и 9px сверху и снизу. Когда вы добавляете Auto Layout к фрейму, элементы внутри располагаются рядом друг с другом (вертикально или горизонтально).
Чтобы решить эту проблему, дизайнеры должны были создавать несколько разделов Auto Layout. Auto Layout стал популярным среди дизайнеров и разработчиков на протяжении последних лет, благодаря своей гибкости и универсальности. Он может быть использован для создания любых типов интерфейсов, от веб-страниц до мобильных приложений, и может значительно упростить процесс дизайна и разработки. Для остальных элементов формула Fill-Hug тоже отлично подходит.
По моему опыту могу сказать, что в процессе проектирования свойства одного компонента редко меняются. Обычно эти свойства были определены на более ранней стадии (то есть в начале проекта), поэтому исключение их из таблицы может уменьшить ее размер. Тем не менее, исследование свободной формы дизайна практически невозможно в этих условиях. Если вам нужно выровнять элементы, которые не находятся внутри Auto-Layout, используйте нулевую высоту фрейма.
После того, как мы объединили компоненты в виде вариантов, Figma перемещает все компоненты в новый фрейм, что разбивает нашу таблицу. В начале этого года я опубликовал статью о создании компонентов кнопок в Figma с помощью функции Auto Layout. За последние несколько месяцев Figma значительно улучшила Auto Layout.
С помощью auto layout и значения “spacing between items”, довольно легко создать регулируемый компонент ползунка для диапазона значений, количества или индикатора выполнения. Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать. Функция Auto Layout не учитывает пустое пространство, она учитывает только размер элементов внутри компонента.
Когда пользователь создает новый элемент на форме, он передает параметры, такие как координаты X и Y, а также другие свойства, такие как ширина и высота. Затем система использует эти параметры для определения места расположения на форме. Если система обнаруживает, что один элемент перекрывает другой, она может переместить его в другое место. Если пользователь задает ширину кнопки равной 50 пикселям, то кнопка будет располагаться слева от элемента управления. Когда дело доходит до создания профессиональных дизайн-проектов, важно использовать передовые инструменты.
Благодаря Auto Layout можно в два клика поставить разбросанные на рабочей области объекты рядом, выровнять их по единой оси с одинаковыми и настраиваемыми отступами. Порядок в макете — основа профессионального подхода к работе. Посмотрите мое руководство, чтобы узнать, как создавать полностью гибкие и адаптивные интерфейсы с помощью функции auto-layout. Но так как в кнопке на данный момент у нас находится только текст, мы можем просто поменять ориентацию на вертикальную и визуально для нас ничего не изменится. А наша кнопка сделана с помощью горизонтального (если Auto Layout применяется на фрейм, где всего один объект, он дефолтно делает список горизонтальным). Это происходит, потому что мы не настроили Align для объектов в фрейме «pop-up».
Задайте такие же параметры инпуту, кнопке и маленькому тексту. Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений. Чем чаще вы будете использовать горячие клавиши auto layout, тем быстрее их применение войдет у вас в привычку. К сожалению, компоненты и Auto Layout не так умны, как хотелось бы. Я знаю, что прошу Figma о многом, но надеюсь, что они это исправят.
IT курсы онлайн от лучших специалистов в своей отросли https://deveducation.com/ here.
