Использование Auto Layout компонентов в Figma

  • 23.07.2020

Перевод статьи Aleksei Kipin Using auto-layout components in Figma. Перевод сделан с разрешения автора.

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

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

Подход

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

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

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

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

Если вы не хотите вдаваться в детали, я оставлю ссылку на окончательный результат в Figma в конце этого поста.

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Атомы

На атомном уровне все довольно просто. Я выделил компоненты, которые используют Auto Layout.

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Давайте посмотрим на их анатомию. Стили и цвета текста определены в стилях Figma.

Image for postАнатомия атомных компонентов

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

Молекулы

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Панель подсказок здесь самый сложный элемент. Я использую её на нескольких разных страницах платформы, и она ведет себя по-разному в зависимости от ситуации. Она должна:

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

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

Image for postИзменяемый Auto Layout компонент

Как это работает:

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Остальные компоненты довольно простые.

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Блок кнопок работает аналогично. Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри.

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Организмы

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

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

  • От 1 до 3 строк
  • Строки могут иметь 4 блока информации или меньше

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Первый слой помогает нам создавать отступы вокруг контента.

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Этот слой отделяет раздел содержимого от заголовка раздела («Подробности»).

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Здесь мы создаем отступы между строками с несколькими атомными компонентами дизайна внутри.

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

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

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Затем я использую Auto Layout с расстоянием 0, чтобы сделать таблицу.

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Шаблоны

Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок раздела).

Image for postImage for postОсновной header

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

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

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

Вот ссылка на страницу: https://figma.fun/TxDFA4

P.S.

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

Использование Auto Layout компонентов в Figma | by Irina Bushueva | Jul, 2020 | Дизайн-кабак

Спасибо за чтение, и я надеюсь, что вы нашли это полезным. Не стесняйтесь обращаться ко мне в dribbble или twitter.

Первоначально опубликовано на https://chainstack.com 9 марта 2020 года.

По материалам: designpub.ru

GeekBrains

Добавить комментарий

Your email address will not be published. Please mark all required fields.