В этой статье мы расскажем, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги.

В статье мы подойдем к китам, которые сделаны не только дизайнерами, но также переведены в компоненты фронтенд-разработчиками.

Что такое UI KIT?

Это единый набор элементов пользовательского интерфейса. Выглядят они примерно так:

Для чего он нужен?

1. Единый стиль всех проектов

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

Начало проекта всегда подразумевает создание первых базовых элементов ui-kita на основе утвержденного концепта.

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

К счастью для нас прошло времена Photoshop и на рынке появилась для бога избранных Sketch (маководы ликуют), а уж позже Figma. Что в разы упростило работу для дизайнера. Всеми любимые компоненты позволили делать изменения в разы быстрее, буквально в один клик, что позволяет не бегать по всем экранам и не проверять, где там цвет поменялся, а где нет.

Андрей Залетов

Senior UI/UX designer KOTELOV

2. Экономия на разработке

Если нет кита, компании, нанимая подрядчика заполняют бриф, далее подрядчик разрабатывает с нуля дизайн, далее создает компоненты на фреймворках JavaScript (Angular, React, Vue). То есть заказчик каждый раз платит за дизайн и программирование одних и тех же элементов на фронтенде разным подрядчикам, причем элементы получаются у всех разные по дизайну и коду, что не позволяет масштабироваться. В случае с китом вы платите 1 раз.

3. Мгновенный доступ к UI KIT у всей команды

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

4. Скорость разработки

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

Почему важно делать UI KIT, если кнопку или поле можно отрисовать и запрограммировать достаточно быстро?

Большинству пользователей кнопка представляется, как всего лишь прямоугольник с текстом посередине:

Вот так выглядит код кнопки на React:

// Core
import * as React from "react";

// Styles
import styles from "./BadButton.module.scss";

interface BadButtonProps {
  children: React.ReactNode;
  background?: string;
  color?: string;
}

const BadButton: React.FC<BadButtonProps> = (props) => (
  <button
    className={styles.button}
    style={{
      background: props.background || "#5199FF",
      color: props.color || "white"
    }}
    {...props}
  >
    {props.children}
  </button>
);

// Exports
export default BadButton;

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

Так выглядит код кнопки здорового человека:

// Core
import * as React from "react";
import classNames from "classnames";

// Utils
import { capitalize } from "./utils/string";

// Styles
import styles from "./GoodButton.module.scss";

const ButtonVariantTypes = ["filled", "outlined", "link"] as const;
const ButtonColorTypes = ["primary", "secondary"] as const;
const ButtonSizeTypes = ["small", "medium", "large"] as const;
const ButtonHTMLTypes = ["submit", "button", "reset"] as const;

export type ButtonVariantType = typeof ButtonVariantTypes[number];
export type ButtonColorType = typeof ButtonColorTypes[number];
export type ButtonSizeType = typeof ButtonSizeTypes[number];
export type ButtonHTMLType = typeof ButtonHTMLTypes[number];

export interface BaseButtonProps {
  /**
   * Передать дочерний элемент для кнопки
   */
  children: React.ReactNode;
  /**
   * Определить класс для кнопки
   */
  className?: string;
  /**
   * Выбрать вариацию отображения кнопки
   */
  variant?: ButtonVariantType;
  /**
   * Выбрать цвет кнопки
   */
  color?: ButtonColorType;
  /**
   * Выбрать размер кнопки
   */
  size?: ButtonSizeType;
  /**
   * Определить размер кнопки во всю ширину от родительского контейнера
   */
  fullWidth?: boolean;
  /**
   * Отключить кнопку
   */
  disabled?: boolean;
  /**
   * Обработчик события на клик по мыши для кнопки
   */
  onClick?: () => void;
}

export type AnchorButtonProps = {
  /**
   * Передать url и определить кнопку как ссылку
   */
  href: string;
} & BaseButtonProps &
  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "onClick">;

export type NativeButtonProps = {
  /**
   * Выбрать тип кнопки
   */
  type?: ButtonHTMLType;
} & BaseButtonProps &
  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">;

export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;

const GoodButton: React.FC<ButtonProps> = ({
  children,
  className,
  variant = "filled",
  color = "primary",
  size = "small",
  type = "button",
  fullWidth,
  disabled,
  onClick,
  href,
  ...rest
}) => {
  const Component = href ? "a" : "button";

  let buttonProps;

  if (Component === "a") {
    buttonProps = { "aria-disabled": disabled };
  } else {
    buttonProps = { type, disabled };
  }

  return (
    <Component
      {...rest}
      {...buttonProps}
      className={classNames(
        styles.root,
        styles[variant],
        styles[size],
        {
          [styles[`${variant}Color${capitalize(color)}`]]: color,
          [styles[`${variant}Size${capitalize(size)}`]]: size,
          [styles.disabled]: disabled,
          [styles.fullWidth]: fullWidth
        },
        className
      )}
      onClick={onClick}
    >
      {children}
    </Component>
  );
};

// Exports
export default GoodButton;

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

Можно ли использовать готовый UI KIT?

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

Основные причины для постройки, а не покупки UI KIT

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

2. Компаниям необходимо соблюдать фирменный стиль;

3. При покупке UI KIT вам необходимо отталкиваться от технологий заложенных в купленном ките;

4. Купленный кит не может закрыть весь функционал систем, то есть вам необходимо будет дорисовывать его и дорабатывать;

5. Строя ui kit с нуля вы видите полноценно цель разработки. То есть сможете разрабатывать элементы исходя из задачи, делая каждый элемент удобнее.

Требования к разработчику UI KIT:

UI KIT разрабатывается только дизайнером и разработчиком уровня Senior, которые имеют опыт в подобных проектах. Дизайнер и фронтенд-разработчик должен обладать опытом и знаниями для построения сложных систем, так как ui kit будет использоваться около 5 лет всеми командами разработки вашей компании и привлекаемыми подрядчиками для большинства ваших систем.