Как собрать UI-kit в Figma

Недавно мы рассказывали, как UI-kit помогает поддерживать порядок в дизайне. Там мы делились советами, которые подойдут для работы в Figma, Sketch, и Adobe XD. Но команда Purrweb работает в Figma, и для этого сервиса у нас собрался целый гайд. Любители Figma, ловите полезности.

Сразу оговоримся. Мы собираем UI-kit через компоненты и автолейаут (АЛ). И если компонентами пользуются почти все дизайнеры, то автолейаутом — не все. А зря. Нам эта функция экономит кучу времени и сил, когда приходят замечания от заказчика и в макетах нужно что-то поменять.

Поэтому сначала небольшое отступление про автолейаут, а затем перейдем к сборке компонентов в Figma.

Функция автолейаут: что это и как ей пользоваться

Автолейаут — это инструмент, который помогает выравнивать отступы, привязывать элементы к сторонам контейнера и выставлять расстояния между элементами. Как это работает, показываем на примере кнопки:

Меняем текст, но отступы остаются прежними

В итоге элемент правильно выглядит при любых изменениях. Если не использовать АЛ, изменения будут влиять на текст кнопки: он будет растягиваться, съезжать и вести себя не так, как нам нужно.

АЛ также удобно использовать при отрисовке сложносоставных компонентов: карточек, хедеров, модалок. Благодаря АЛ эти компоненты можно менять, сохраняя исходное расположение элементов.

Перейдем к сборке компонентов.

Инпуты

Инпут собираем с помощью АЛ с фиксированной высотой. Если у инпута есть заголовок, также делаем из текстового контейнера АЛ, а потом заголовок и инпут помещаем в один большой АЛ. Для заголовка и инпута выставляем настройку Fill container.

Теперь при растягивании и сжатии большого АЛ заголовок и инпут будут растягиваться и сжиматься, как один элемент

С дополнительным текстом под инпутом делаем то же самое. Только не нужно фиксировать высоту общего АЛ. Он должен растягиваться в случае, если ошибка будет длиной в несколько строк.

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

Также важно выставить настройку Hug content. С ней контейнер будет облегать содержимое, и разработчики не добавят на готовый экран лишние отступы.

Контейнер с настройкой Hug content и без нее

Дропдауны и меню

Их также собираем через АЛ с фиксированной высотой. Если есть заголовок, действуем так же, как с инпутом. И не забываем про Hug content.

Для дропдауна и меню добавляем настройку Space between. В таком случае текст будет всегда расположен по левой стороне контейнера, а стрелка, открывающая элемент — по правой.

Добавляем Space between

Раскрытый дропдаун — отдельная история. Создайте АЛ, в котором будет текст и разделительная линия снизу — это будет пункт дропдауна. Из таких контейнеров собирайте АЛ с расстоянием 0 px между элементами. Не забудьте задать всем элементам Fill container, чтобы они растягивались вместе с общим контейнером.

Иллюстрируем абзац выше

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

Скрываем пункты в слоях

Меню, как обычные, так и модальные, делаем ровно по тем же принципам. У этих элементов интерфейсов одинаковая механика работы.

Кнопки

Кнопку заворачиваем в АЛ с фиксированной высотой. Кнопки с одинаковой высотой — это один вариативный компонент. Можно менять подложку, цвет текста, состояния, растягивать и сжимать, но по сути, это одна и та же кнопка. Если вам нужна кнопка другой высоты — придется создавать отдельный компонент.

Разница в несколько пикселей имеет значение

Текстовым кнопкам задаем одинаковые размеры контейнера для всех состояний. Иначе может получиться корявая верстка: кнопка будет прыгать, менять размер и т. д. Текстовому полю задаем настройку Hug content.

Слева — без настройки Hug Content

Модальные окна

В прошлой статье мы писали, что каждый элемент, который может повторяться, нужно делать компонентом. Так вот, слишком усердствовать тоже не стоит. Лучше сделать 3-4 модальных окна и менять контент в инстансах.

Инстансы одного окна

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

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

Прогресс-бар, хлебные крошки и пагинация

Прогресс-бар на 5 шагов, на 3 и на 10 — это 3 отдельных мастер-компонента. Каждый нужно собирать по отдельности. Либо можно работать по методике Атомарного дизайна: сделать мастер-компонентом 1 шаг и собирать из него нужные элементы в интерфейсе.

Добавляем 4 шаг в прогресс-бар

Хлебные крошки собираем по аналогии с прогресс-баром.

Пагинацию лучше забивать в АЛ, а в макете — растягивать по ширине экрана. Она должна быть единым компонентом со своими паддингами. Тогда элемент точно не будет прыгать и деформироваться.

Чекбоксы, радиокнопки, тогглы

Собирайте в вариативный компонент, чтобы можно было переключать состояния элементов на экранах. В десктопе у чекбоксов, радиокнопок и тогглов по 8 состояний: Initial — начальное состояние, Hover — при наведении мыши, Focus — при выборе кнопки с клавиши Tab, Disabled — неактивное состояние у включенных и те же — у выключенных.

Состояния чекбокса. У радиокнопок и тогглов — такие же

В мобильной версии достаточно состояний вкл/выкл. Если в параметр вариативного компонента забить значения On и Off (True и False) соответственно, Figma позволяет переключать их в боковой менюшке при помощи тоггла.

Вот так выглядит переключение

Табы

Табы также собираем по принципам Атомарного дизайна. Здесь атомы складываются в вариативный компонент с одним табом в разных состояниях (вкл/выкл, нажатие, наведение мыши и т. д.).

Состояния таба

Можно собрать отдельные компоненты на 3, 5, 10 и т. д. табов. В таком случае оборачиваем табы в общий АЛ с фиксированной высотой, а каждому атому задаем настройку Fill container. Теперь, после добавления новых табов в контейнер они будут выравниваться по размеру.

Табы выровнялись сами

Календари

Хороший календарь достаточно собрать 1 раз, а потом — использовать на всех проектах, меняя только цвет и незначительные детали.

Собираем снова по принципам Атомарного дизайна, где атом — это поле с датой и его состояния. Определяем для них АЛ фиксированного размера, скажем 40х40 px, и растягиваем текстовый контейнер по ширине этого квадрата. Из атомов собираем общий АЛ с расстоянием 0 px между элементами.

Этот календарь мы используем на проектах

Тултипы

Все так же используем АЛ с привязкой элементов. Чтобы иконка «закрыть» всегда оставалась в верхнем правом углу, а общий контейнер — растягивался в зависимости от объема текста.

Уголок тултипа помещаем в отдельный АЛ и выставляем 0 px между ним и основным контейнером. АЛ, в который мы поместили уголок, делаем шире самого уголка, и теперь можем размещать элемент там, где нам нужно.

Собираем тултип

Хедеры, карточки и другие сложносоставные элементы

Так же, как в случае с модалками, хедеры, карточки и другие сложные элементы делаем в количестве не более 2-3 штук. Главное — делайте такие компоненты максимально универсальными. При любом изменении контента они должны вести себя по заданным правилам.

Либо можете собирать все из атомов. Например, хедер для мобильного приложения можно разбить на вот такой набор атомов и молекул:

Все вместе складывается в хедер

Для карточки достаточно собрать 1 сложный компонент, который будет растягиваться в зависимости от изменения содержимого. Для примера возьмем карточку для декстопа, которая должна подстраиваться под размер экрана.

Создаем прямоугольный вертикальный АЛ со скругленными углами. Иконку шестеренки фиксируем в верхнем правом углу. Изображению задаем Fill container, чтобы тянулось и сжималось вместе с карточкой. То же делаем с заголовком и кнопкой, которая у нас уже обернута в АЛ, поэтому будет правильно тянуться 😊

Карточка меняет размер, но ничего не ломается

Совет: в сложносоставных элементах ограничьте количество символов в заголовке, чтобы текст помещался в контейнер. Кроме того, все иконки должны быть добавлены в UI-kit.

Цвета и стили

В Figma есть 2 плагина, которые упакуют ваши текстовые и цветовые стили в блоки UI-kit.

Color Styleguide автоматически оформит все ваши цветовые стили в виде блока.

Вот так

А Typography Styleguide сделает то же самое с текстовыми стилями.

И вот так

Если знаете другие полезные плагины, поделитесь ими в комментариях.

Горячие клавиши

Важно научиться собирать UI-kit не только правильно, но и быстро. И здесь никуда без горячих клавиш. По ссылке можно найти полный список для Windows и Mac.

Часто пользуемся этими

Что посмотреть

Это не реклама. Мы искренне рекомендуем вам 2 You-Tube канала с видеоуроками по Figma: Алексей Бычков и Виктор Теплов. Авторы — практикующие дизайнеры, которые освещают крутые и полезные фишки визуального редактора.

Для тех, кто все прочитал — ссылка на наш образец UI-kit. Чтобы посмотреть все настройки элементов, сделайте копию файла и сохраните в драфты.

Хотите больше полезных советов по дизайну? Тогда подписывайтесь на блог Purrweb и читайте наши статьи.

0
33 комментария
Написать комментарий...
Андрей Вечерний

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

И даже тут узнал кучу нового про AutoLayout, например про автоспейс.

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

Почему именно эта характеристика делает его новым компонентом?
Единственное что не понял...

Ответить
Развернуть ветку
Purrweb
Автор

Спасибо!
С точки зрения верстки, высота кнопки - это, как правило, постоянная величина. Т.е высота кнопки не имеет поведения. Высота задается как "размер шрифта (px) + высота паддингов (px)" (в Figma это параметр fix). Размер шрифта, как правило, тоже константа. Если он меняется - то это новая компонента.
Мы задаем высоту кнопок и шрифта постоянной, чтобы унифицировать дизайн.
А вот ширина кнопки - часто динамическая величина. Ширина кнопки, как правило, задается "100%" ( в Figma - Fill) . А ее размер ограничивается с помощью внешнего контейнера. Использование внешнего контейнера позволяет легко управлять ее размером в каждом кейсе изменения ширины. Не нужно лишний раз прописывать настройки для каждой отдельной кнопки.
На ширину влияет много факторов: длина текста, ширина экрана или блока, респонсив. Именно поэтому мы делаем ее динамической.

Ответить
Развернуть ветку
Shamil Guseinov

100000500 лайков вам, отличная статья, с дополняющим её комментарием

Ответить
Развернуть ветку
Индивидуальный Валера

совсем необязательно должен быть новый компонент, в рамках одного родителя можно задать размерный ряд и доп параметры с помощью тех же самых вариантов и свойств

Ответить
Развернуть ветку
Вадим Д.

Благодарю, полезно!

Ответить
Развернуть ветку
Purrweb
Автор

💜

Ответить
Развернуть ветку
Никита

Вагон клиентов вам

Ответить
Развернуть ветку
Александр Шульгин

😘

Ответить
Развернуть ветку
Bravemoon

Канал Бычкова всем надо смотреть от и до, про Теплова даже не знала. Спасибо! Остался последний вопрос: как попасть к вам на стажировку?

Ответить
Развернуть ветку
Purrweb
Автор

Рады открывать новое :) За набором на стажировки можно следить в нашем ТГ канале - https://t.me/purrclub или в группе ВК - https://vk.com/purrweb

Ответить
Развернуть ветку
Багира

Полезно, сохранила 🔥

Ответить
Развернуть ветку
Alsat

Спасибо за статью. Давно искал подобную инструкцию

Ответить
Развернуть ветку
Daniil BoiLama

Большой и полезный материал, есть что забрать и изменить в своих проектах. Просто бомба)

Ответить
Развернуть ветку
Максим Соколов

Можно просто как образец показывать всем авторам статей!
Четко, просто, полезно, наглядно да еще и с макетами в фигме 🔥🔥🔥

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Шалтай Болтай

Фил-Хуг вообще то!

Ответить
Развернуть ветку
Николай Волков

Отлично, возьму на заметку!

Ответить
Развернуть ветку
Николай Волков

Спасибо!

Ответить
Развернуть ветку
Ирина Галимова

Анимашка красивая на превью)

Ответить
Развернуть ветку
Andrew Oz

Спасибо! Очень полезно, хоть и делаю это же другими способами 👍

Ответить
Развернуть ветку
Виктор Шулика

Пипец, отличная статья.
Я сначала хотел написать " а чего там делать, садись и делай", но у вас прям всё подробно по полкам. Конкретно, с примерами, без воды.
Аплодирую стоя.

Ответить
Развернуть ветку
Николай Волков

Статья 👍🏿

Ответить
Развернуть ветку
Alex Maltsev

А на каком языке это написано?
"You-Tube"
"Инпуты"

Ответить
Развернуть ветку
Индивидуальный Валера

You-tube- на английском
Инпуты-на русском

Ответить
Развернуть ветку
Колхозный Панк

...

Ответить
Развернуть ветку
Некунгфу Панда

Спасибо за такой детальный разбор!

Ответить
Развернуть ветку
Purrweb
Автор

😉

Ответить
Развернуть ветку
Sergey Klochko

Отлично, но AL с английского в русские термины будет АС

Ответить
Развернуть ветку
Anatolii Sheriev

🫱🏻‍🫲🏾🫡

Ответить
Развернуть ветку
Natalja

Как-то странно. Можно же взять готовый кит и переколбасить его под себя. И там будут и настройки все и новички много выучат покопавшись в хорошем ките скажем от Atlassian или другой именитой фирмы.

Ответить
Развернуть ветку
Виктор Шулика

Можно, и дизайн готовый скачать со стока, и перелопатить. Только поймешь ли, что там до тебя Таец с Ютуба наделал в этом стоке? И никакого отношение это к обучению иметь не будет.
Научиться можно только собрав с нуля самостоятельно. Так как ты будешь знать, почему и для чего, ты принял то или иное решение в построении Kit`a, или дизайна в целом.

Ответить
Развернуть ветку
Natalja

я не говорю о каких-то стоках, а о дс типа atlassian, shopify etc. Эти дс сделаны классными спецами и молодой специалист может подсмотреть как умудренные ребята настраивают свойства компонентов, используют слоты, булианы, swap instances, не забывают, как в примере выше, все состояния чекбоксов итд. Более того, если молодой спец придет в продукт со своим легаси и каким-то китом в наследстве, ему именно этим и придется заниматься, ковыряться в чужом дизайне и улучшать его.

Ответить
Развернуть ветку
Eazy Haze

Полезная статья. Спасибо!
Жду сборник для насмотренности :)

Ответить
Развернуть ветку
30 комментариев
Раскрывать всегда