Создание сложных компонентов пользовательского интерфейса в Figma

Компоненты — это части элементов пользовательского интерфейса, которые можно повторно использовать в дизайне. Помимо поддержания последовательности в дизайне, сложный компонент Figma дает возможность создавать состояния с помощью функции интерактивных компонентов.

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

Структура и компоненты

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

Компонент sidebar-item

Этот компонент состоит из двух компонентов иконок и одного текстового слоя. Я объединил левую иконку и текстовый слой в один фрейм с автоматическим макетом, установленным на выравнивание по центру слева и ширину обнимаемого содержимого. Это обеспечит необходимую гибкость, если я когда-нибудь удалю иконку, текст просто сдвинется влево, а ширина hug content гарантирует, что у текста всегда будет столько места справа, сколько позволит контейнер фрейма. Я также назову рамку left-content.

Затем я обрамлю рамку left-content вместе с другой иконкой и добавлю авторазметку, установленную на space-between или auto center, ширину 250px, горизонтальный padding 15 и вертикальный padding 10. Теперь я хочу, чтобы этот компонент имел три свойства; свойство state, которое имеет три значения: default, hover и active, свойство right icon, значения которого просто yes или no, и свойство inner sidebar, значения которого true или false. Используя соглашение об именовании с разделительной косой, Figma автоматически сгруппирует экземпляры вместе, создаст свойства и присвоит им значения.

Поэтому я назвал фрейм sidebar-item / default / yes / false, чтобы позже Figma могла создать три свойства и передать эти имена в качестве значений каждому свойству, начиная с «default». Затем я продублировал фрейм, добавил светло-серую заливку и назвал его sidebar-item / hover / yes / false. Я сделал еще один дубликат и на этот раз немного увеличил значение серого цвета и назвал его sidebar-item / active / yes / false. Конечный результат выглядит примерно так:

Я продублировал все три фрейма, удалил левый значок и установил авторазметку на левый центр. Затем я переименовал фреймы «/ yes» в «/ no». Конечный результат выглядит следующим образом:

Затем я продублировал вышеуказанные фреймы, отделил паддинг от независимых паддингов, назначил паддинг слева на 40, а затем переименовал «/ false» фреймов в «/ true». Конечный результат выглядит следующим образом:

Наконец, я выбрал все девять вариантов, щелкнул по выпадающему значку компонента в верхнем центральном меню Figma и выбрал «Создать набор компонентов», который создает компонент с тремя свойствами. На левой панели свойствам были присвоены стандартные имена 1, 2 и 3, поэтому я переименую их в State, Inner и Right Icon соответственно. См. изображение

Последнее, что нужно сделать — это сделать компонент интерактивным. Поэтому я переключился в режим прототипа и добавил взаимодействие hover ко всем вариантам по умолчанию, чтобы они менялись на варианты hover при наведении. См. изображение

Компонент sidebar-body

В figma, как только вы создаете компонент с определенным количеством дочерних или вложенных компонентов, вы не сможете добавить больше дочерних компонентов в экземпляр, и в этом случае большинство из нас решает отсоединить экземпляр и жить свободно, пока менеджер продукта не потребует изменений, и теперь вам придется редактировать 20+ элементов по отдельности. Чтобы избежать этого, я создал компонент body, в котором размещаются компоненты sidebar-item от 1 до 10.

Я взял экземпляр sidebar-item из своих активов, продублировал его 10 раз, выбрал все 10 экземпляров, обрамил их рамкой с автоматическим расположением по центру, шириной и высотой, установленными на hug content, а затем назвал рамку sidebar-body / 10. Затем я продублировал его еще девять раз и уменьшил количество элементов боковой панели и число в названии на единицу в каждом дубликате. Результат выглядит следующим образом:

Наконец, я выбрал все десять вариантов, щелкнул на значке выпадающего компонента в верхнем центральном меню Figma, выбрал «Создать набор компонентов» и переименовал свойство в «Количество элементов».

С помощью этого компонента я всегда смогу увеличить количество элементов боковой панели в любом месте без необходимости отсоединения моих экземпляров.

Компонент sidebar-item-group

Некоторые элементы боковой панели будут иметь внутренние элементы, поэтому мне нужно, чтобы этот компонент мог открывать и закрывать их. Этот компонент состоит из компонентов sidebar-item и sidebar-item-body. Компонент sidebar-body пока имеет 2 элемента. Шаги, которые я использовал для создания этого компонента, следующие; выбрал все необходимые экземпляры > обрамил их > добавил автоматический макет, установленный на center-center > установил ширину и высоту на hug > переименовал рамку в sidebar-item-group > Ctrl + Alt + K (создать ярлык компонента в windows).

Компонент sidebar-title

Этот компонент состоит из трех элементов: компонента логотипа, текстового слоя и компонента иконки. Причина, по которой я использую компоненты, заключается в том, что впоследствии можно легко заменить логотип или иконку на что-то другое. Компонент логотипа и текстовый слой заключаются в рамку с автоматическим расположением слева по центру, шириной, равной hug, заливкой белого цвета и рамкой, переименованной в left-content. Затем рамка левого контента обрамляется вместе с правой иконкой с авторазмещением center-center и шириной hug.

Полагаю, я мог бы использовать компонент sidebar-item, но у меня есть другие планы на будущее в отношении этого компонента, которые выходят за рамки данного спринта, поэтому пока что я обойдусь этим.

Компонент sidebar

Он состоит из двух компонентов: sidebar-title и sidebar-body. На данный момент боковая панель имеет четыре элемента. Затем я обрамил эти два компонента вместе, и на этот раз без авторазметки просто установил фиксированную ширину 275 и высоту 1024. Между экземплярами sidebar-title и sidebar-body я поместил зазор в 20px. Я также добавил заливку желтого цвета.

Добавление состояния в группу элементов боковой панели

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

Итак, это состоит из двух экземпляров компонента sidebar-item-group. Один экземпляр не имеет внутренних элементов, а иконка справа имеет вид шеврона. Другой экземпляр имеет внутренние элементы и правый значок — шеврон вверх.

Название будет зависеть от названия элемента. Например, для элемента user я назову компонент user / no и user / yes; yes и no — значения свойства open.

Затем я выделю оба экземпляра и создам компонент (Ctrl + Alt + K ). Используя режим прототипа, я добавлю взаимодействие по щелчку на оба экземпляра, которые будут указывать друг на друга.

Заключение

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