DesignHub

🦴 UI kit

UI-Kit — это набор компонентов пользовательского UI интерфейса со всеми состояниями и вариантами использования.

В любой момент времени дизайнер, верстальщик или разработчик может взять необходимый ему элемент интерфейса и использовать его, понимая как он выглядит в разных состояниях. К тому же UI Kit создает крепкую базу для всего дизайна, что оптимизирует работу и позволяет дизайнерам создавать интерфейсы быстрее и качественнее (ведь все будет в одном стиле и отклонения регулируются китом🐳.

Из чего состоит UI-kit?

  1. Стили — стили вы настраиваете еще в самом figma файле и относятся к ним (их можно быстро и удачно настроить, если у вас уже есть готовый концепт дизайна)
    1. Палитра цветов
    2. Шрифты
    3. Эффекты
  2. Правила — в них входят описание
    1. Интервалов которые мы не регулируем компонентами
    2. Сетки
  3. Элементы — тут набор всего что мы используем в интерфейсе и во всевозможных вариациях. Кнопки, карточки, свичи (switch), уведомления — все сюда. Но самое главное не забывать делать из всего этого компоненты и оборачивать в группы компонентов, что бы с этим набором было удобнее работать.

Основные грабли

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

Но как только проект продался или вы получили зеленый свет и вы понимаете что в нем будет достаточное количество экранов (если все приложение состоит из 5-ти экранов 2 из которых состояния, то и смысла в нем никакого не будет), то можно смело раскидывать структуру.

Стили

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

Группировка поможет и следующему дизайнеру, в том случае если вы покинете проект

Что бы группировать стиль, нужно кликнуть по нему правой кнопкой мышки и выбрать пункт “Add new folder”. Старайтесь назвать папки так, что бы в том случае если сядет ваш младший пятилетний братишка — он все понял.

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

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

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

Правила

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

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

К правилам также относятся сетки и часто так и отображаются (а если это веб, то сразу под несколько разрешений)

Итак, что стоит указывать в описательной части?

  1. Цветовую палитру
    1. Тут основные цвета, дополнительные, градиенты
  2. Текстуры
    1. Постарайтесь подготовить ее бесшовной, что бы бы удобно было в дальнейшем ее использовать
  3. Текста и правила размещения текстов (если добавите пару примеров, это будет хорошо)
  4. Именно в правила мы можем добавить описание цели дизайна. Цели это своего рода конфигурация которую должен выбрать для себя дизайнер. Например: удобство, скорость получения фичи, повышение CTR. Если их несколько то добавьте приоритеты, так другой человек их правильно поймет и с более высокой точностью попадет в цель.

Элементы

Это самая большая часть дизайн системы. Перед их составлением в первую очередь нам нужно понять на сколько масштабный кит у нас будет. Кто-то все элементы собирает на одной-двух страницах. Я лично делаю отдельную страницу для каждого. В будущем проще ориентироваться если UI-kit перерастает в полноценную дизайн систему. Не придется уделять время для того что бы найти нужный элемент.

Сразу о важном. Не пытайтесь впихнуть UI-kit для десктопа и для мобилок в один файл — это усложнит вашу работу в будущем.

Теперь чуть чуть о структуре (опять же, я опишу так, как это делаю я)

Для начала разберем наш концепт (который должен быть принят) на кусочки. Разберем на примере кнопок. Предположим у нас есть кнопки которые включают в себя набор параметров:

  1. 2 размера (Size)
  2. 3 цвета (Color)
  3. 3 типа (Type)
  4. возможность добавить иконку (Icon)

В данном сценарии кнопку в каждой вариации нам нужно cоздать и сделать из нее компонент. После чего нам нужно объединить все это дело в группу компонентов и задать правильный нейминг.

Обратите внимание что название полей по умолчанию будет указано иначе. А если вам нужно добавить еще один параметр, то в имени компонента внутри, если по нему нажать, можно увидеть такую конструкцию: Color=blue, Type=default, Size=L, Icon=none

что бы добавить еще один параметр ко всем компонентам в группе компонентов, достаточно добавить запятую, написать название вашего параметра и через знак “=” сам параметр.

В результате у нас получится группа компонентов. Но разработчику или новому дизайнеру, а тем более вашему PM не будет понятно как в этом ориентироваться. Поэтому добавляем подписи и получаем примерно такую картинку

Теперь достаточно будет один раз добавить кнопку в ваш интерфейс, и просто выбирать параметры.

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

Соответственно если мы возьмем для примера text input, то разложим его так же по параметрам:

ну и если есть поле с иконкой, то умножаем на 2.

Обратите внимание на название группы компонентов. Она называется не “Buttons” во множественном числе, а “Button”. Потому что когда мы вставим кнопку в интерфейс, она будет называться просто “Button”, а набор параметров будет виден только в правой часте экрана с его выбором. По этой причине и внутри кнопки не нужно лишний раз называть кнопками, имя должно нести в себе только параметры.

Грубо говоря группа компонентов для интерфейса — это и есть один элемент, а в зависимости от того что мы у нее спрашиваем, она подстраивает результат под запрос.

Когда применять и когда упарываться?

Ui-kit — это время. Во всех проявлениях. Что бы его создать — нужно время. Если проект большой — потом он начинает себя окупать и экономит время. Он безусловно полезен, но в проекте как я писал выше из 5-ти экранов, можно вполне обойтись. В этом случае все так же стоит использовать группы компонентов, но они будут не большими и излишнее описание будет излишне.

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

Если в сухом остатке, то Ui-kit нужен тогда, когда вы понимаете что количество затраченного времени на его создание поможет в перспективе сэкономить больше времени чем вы отдадите.