Figma Auto Layout: практические советы для динамического дизайна

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

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

Ознакомьтесь с тематическим исследованием Tines, чтобы узнать, как мы помогли крупной платформе безопасности достичь полного обновления UX.

Но даже если вы представите, что все дизайнеры на Земле выучили свой HTML, CSS и JavaScript, идеал все равно не будет достигнут. Код требует времени. Трудно объяснить вашим клиентам, что им придется ждать следующего выпуска продукта только для того, чтобы проверить результаты еще одной итерации дизайна.

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

Проблема со статическими макетами заключается в том, что они могут быть довольно быстро разработаны профессионалами с использованием таких инструментов, как Sketch и Figma (и Adobe Photoshop некоторое время назад ), Но их итерация и добавление новых функций — это сложный ручной процесс, который требует большого количества «выталкивания пикселей»: переупорядочения десятков слоев макета на экране при каждом незначительном изменении.

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

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

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

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

Кнопку, которую сложнее всего нажимать

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

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

Расширение возможностей автоматического макета

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

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

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

Потрясающие раскрывающиеся меню

Совет от профессионалов: не скрывайте разделители в представлении монтажной области, так как это заставит автоматический макет пересчитать наценки. Лучше установить их непрозрачность на ноль.

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

Включить уведомления

Совет от профессионалов: вы можете ограничить ширину ваших текстовых слоев, чтобы избежать переполнения.

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

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

Что в карты?

Совет профессионала: вы может переупорядочивать элементы в группе компонентов с помощью клавиш со стрелками на клавиатуре.

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

Auto Layout + Constraints = ❤️

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

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

Совет от профессионалов: если вы столкнулись с обрезанием при изменении размера — дважды щелкните компонент автоматического макета, чтобы автоматически разместить его содержимое.

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

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


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

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

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

И следите за обновлениями. посты о том, как мы получаем дополнительную отдачу от Figma — у нас есть кое-что интересное в работе, чем мы скоро поделимся с вами.

Оцените статью
techsly.ru
Добавить комментарий