Перевод
Использование Auto Layout компонентов в Figma
Перевод статьи Aleksei Kipin Using auto-layout components in Figma. Перевод сделан с разрешения автора.
Я какое-то время играл с компонентами Figma Auto Layout. Здесь я покажу, как создать полностраничный компонент, используя Auto Layout в Figma.
Я большой поклонник атомарного дизайна, потому что он хорошо работает для дизайнеров, и это приближает нас к подходу, который используют фронтенд — разработчики в своей работе. Хотя мы используем тот же подход, мы можем сотрудничать более эффективно. Имея это в виду, я пытался найти способ максимизировать использование атомарного дизайна в моей библиотеке компонентов, и, наконец, это стало возможным благодаря новой функции Auto Layout. Давайте посмотрим на то, что я узнал.
Подход
Если вы не знакомы с концепциями атомарного дизайна, я настоятельно рекомендую вам сначала прочитать больше об атомарном дизайне.
Рисунок выше иллюстрирует логику, которую я использую для своих компонентов. При таком подходе легко проектировать компоненты и, что очень важно, поддерживать их после.
Ниже вы можете увидеть страницу, которую я буду использовать в качестве примера. Это настоящая страница, которую я разработал и использую в проекте, над которым я работаю на Chainstack.com. В этом посте я остановлюсь только на компонентах, которые используют Auto Layout.
Если вы не хотите вдаваться в детали, я оставлю ссылку на окончательный результат в Figma в конце этого поста.
Атомы
На атомном уровне все довольно просто. Я выделил компоненты, которые используют Auto Layout.
Давайте посмотрим на их анатомию. Стили и цвета текста определены в стилях Figma.
Это типичный компонент атомного уровня. Auto Layout: горизонтальное, расстояние между элементами 8px.
Молекулы
Здесь все становится немного сложнее. Для наших молекул мы используем только атомы, которые мы создали на предыдущем шаге, и некоторые базовые элементы, которые я создал в своей библиотеке (стили шрифта и цвета).
Панель подсказок здесь самый сложный элемент. Я использую её на нескольких разных страницах платформы, и она ведет себя по-разному в зависимости от ситуации. Она должна:
- Соответствовать размеру контента
- Занимать всю ширину контентной области
- Поддерживать многострочный текс для обоих сценариев выше.
Вы не можете просто изменить размер компонента Auto Layout в Figma, но я не хочу хранить два очень похожих компонента в моей библиотеке. Я нашел решение.
Как это работает:
У меня есть компонент Auto Layout, который подстраивает его размер под содержимое, но он находится в компоненте без Auto Layout, поэтому я могу вручную изменить размер родительского компонента, если мне нужно настроить его по ширине страницы.
Остальные компоненты довольно простые.
Компонент хлебных крошек, например, представляет собой набор атомных компонентов, которые ведут себя так же, как и его дочерние элементы: атомы корректируют свой размер в соответствии с содержимым> компонент хлебных крошек корректирует свой размер в соответствии с размером атомов внутри.
Блок кнопок работает аналогично. Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри.
Организмы
Самым сложным было организовать секцию деталей: она должна поддерживать многострочные параметры. Это означает, что все блоки должны вести себя в соответствии с объемом контента, который имеют блоки выше. Блок может иметь от одной до трех строк параметров, поэтому нам необходимо поддерживать любые конфигурации в этих пределах:
- От 1 до 3 строк
- Строки могут иметь 4 блока информации или меньше
Первый слой помогает нам создавать отступы вокруг контента.
Этот слой отделяет раздел содержимого от заголовка раздела («Подробности»).
Здесь мы создаем отступы между строками с несколькими атомными компонентами дизайна внутри.
Последний уровень — это компонент строки с несколькими атомными компонентами внутри. Он ведет себя так же, как компонент хлебных крошек.
Еще один большой организм — это компонент таблицы, но он очень простой. Здесь нам нужен первый компонент Auto Layout, чтобы отделить заголовок от тела таблицы.
Затем я использую Auto Layout с расстоянием 0, чтобы сделать таблицу.
Шаблоны
Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок раздела).
Я не добавил основной заголовок в окончательный шаблон, потому что компоненты в Figma не поддерживают фиксированное положение при прокрутке его элементов. Это единственная причина, по которой мы не можем использовать эту страницу в качестве компонента, но это не проблема для коротких страниц, которые размещают 100% своего контента на экране.
Теперь у нас есть очень гибкая, простая в поддержке страница. Вот как это выглядит в итоге.
В приведенной выше анимации вы можете увидеть, как работает наша страница атомарного дизайна в режиме прототипа в Figma.
Вот так просто и чисто выглядит страница. Кроме того, все компоненты на странице очень гибкие и отзывчивые, и я могу использовать их во всех моих файлах дизайна. В случае каких-либо изменений в дизайне страницы, я могу обновить их в своей библиотеке, и она автоматически обновит все мои файлы дизайна.
Вот ссылка на страницу: https://figma.fun/TxDFA4
P.S.
Figma предлагает использовать автоматическое создание Auto Layout (нажмите Shift + A) для простых компонентов, и обычно это работает хорошо, но иногда это не работает, как ожидалось.Вместо удаления фонового слоя и его копирования с параметрами Auto Layout Figma считает, что это объект, который должен быть частью компонента, который мы пытаемся создать. Вы можете увидеть пример такого поведения ниже. В этом случае я создаю компонент Auto Layout вручную.
Спасибо за чтение, и я надеюсь, что вы нашли это полезным. Не стесняйтесь обращаться ко мне в dribbble или twitter.
Первоначально опубликовано на https://chainstack.com 9 марта 2020 года.
Курсы со скидкой 55%. Промокод DESIGNPUB.
