Как построить интерфейс уровня IBM и не сойти с ума
Знакомая ситуация: вы начинаете новый проект, и вроде бы всё идет по плану, пока дело не доходит до интерфейса. Дизайнер присылает макеты, где «синий» цвет в пяти разных оттенках, кнопки на каждой странице ведут себя по-разному, а про доступность (accessibility) для людей с ограниченными возможностями все благополучно забыли. В итоге вместо разработки фич вы тратите недели на «изобретение велосипеда» в CSS.
Но что, если я скажу, что один из технологических гигантов уже решил эти проблемы за вас и выложил решение в открытый доступ? Речь идет о Carbon Design System — открытой дизайн-системе от IBM, которая стала эталоном того, как нужно строить сложные корпоративные интерфейсы.
Что такое Carbon и почему это не просто «еще одна библиотека компонентов»
Когда мы слышим «дизайн-система», в голове часто всплывает просто набор UI-китов. Но Carbon — это нечто большее. Это полноценная экосистема, которая объединяет в себе рабочие куски кода, инструменты для дизайнеров, гайдлайны по человеческому интерфейсу и огромное сообщество.
IBM создавала Carbon для своих внутренних нужд — а задач у них, поверьте, хватает: от облачных панелей управления до сложных аналитических систем. Это значит, что система «заточена» под работу с данными, сложную навигацию и высокую плотность информации. Если ваш проект сложнее, чем лендинг кофейни, Carbon — это то, что доктор прописал.
Чем Carbon зацепит разработчика
Давайте честно: нам, разработчикам, важно, чтобы библиотека была предсказуемой, гибкой и не заставляла нас переписывать всё с нуля каждые полгода. Вот несколько причин, почему Carbon заслуживает места в вашем package.json:
1. Всеядность фреймворков
Хотя ядро системы написано на React, Carbon удивительно дружелюбен к другим технологиям. У проекта есть официальная поддержка Web Components, а сообщество активно развивает версии для Angular, Vue и Svelte. Это значит, что вы можете использовать одни и те же визуальные стандарты в разных командах, даже если одна пишет на React, а другая — на Vue.
2. Доступность как стандарт, а не доп-фича
В моей практике доступность часто оставляют «на потом», что в итоге превращается в «никогда». В Carbon доступность (A11y) вшита на уровне ДНК. Каждый компонент протестирован на соответствие стандартам WCAG. Клавиатурная навигация, правильные ARIA-атрибуты, контрастность — всё это работает из коробки. Вам не нужно гадать, как сделать модальное окно удобным для экранного диктора, — за вас это уже сделали инженеры IBM.
3. Модульность и микро-пакеты
Carbon не заставляет вас тянуть в проект «всё и сразу». Система разбита на десятки пакетов. Нужны только цвета? Ставим @carbon/colors. Нужна сетка? Есть @carbon/grid. Хотите добавить фирменную анимацию? @carbon/motion к вашим услугам. Это позволяет держать бандл в узде.
| Пакет | Что внутри |
| :--- | :--- |
| @carbon/react | Готовые компоненты и стили для React |
| @carbon/elements | Основы: цвета, типографика, иконки |
| @carbon/themes | Цветовые токены для светлых и темных тем |
| @carbon/type | Токены для работы с фирменным шрифтом IBM Plex |
4. Дизайн-токены и темы
Интересно, что Carbon использует систему токенов. Вместо того чтобы хардкодить #0f62fe, вы используете переменную $interactive-01. Это позволяет мгновенно менять тему всего приложения или адаптировать его под брендинг заказчика, просто переопределив значения токенов.
Как это выглядит в коде
Начать работу с Carbon проще, чем кажется. Если вы используете React, типичный компонент будет выглядеть примерно так:
import { Button, DatePicker, DatePickerInput } from '@carbon/react';
function MyComponent() {
return (
<div>
<DatePicker datePickerType="single">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Выберите дату"
id="date-picker-single"
/>
</DatePicker>
<Button onClick={() => alert('Carbon работает!')}>
Нажми на меня
</Button>
</div>
);
}
Кстати, обратите внимание на структуру: компоненты очень декларативны. Вам не нужно возиться со сложной логикой состояний для простых элементов управления — Carbon берет это на себя.
Техническая мощь под капотом
Проект управляется с помощью Lerna, что позволяет поддерживать монорепозиторий с десятками пакетов в актуальном состоянии. Стили написаны на Sass (SCSS), что дает отличную гибкость в кастомизации.
Особого упоминания заслуживает система иконок @carbon/icons. Это огромный сет профессионально отрисованных иконок, которые доступны как в виде SVG, так и в виде React/Vue/Svelte компонентов. Больше никаких поисков «той самой иконки» по всему интернету.
Кому особенно подойдет Carbon?
В моей практике я видел много дизайн-систем, но Carbon лучше всего проявляет себя в следующих кейсах:
- Админ-панели и Dashboards: Если вам нужно выводить много графиков, таблиц и фильтров. У Carbon есть расширение Carbon for IBM Products, которое содержит еще более сложные паттерны.
- B2B продукты: Где важна строгость, чистота интерфейса и предсказуемость поведения.
- Проекты с долгой поддержкой: Carbon — это всерьез и надолго. IBM не забросит его завтра, а четкие гайды по миграции (например, с v10 на v11) помогут вашему проекту не превратиться в легаси-болото.
Итог: стоит ли пробовать?
Если вы устали от «пластиковых» UI-китов, которые рассыпаются при первой попытке кастомизации, или если вам нужен надежный фундамент для крупного проекта — Carbon определенно стоит изучить.
Да, порог вхождения здесь чуть выше, чем у условного Bootstrap, из-за обилия токенов и строгих правил. Но эта инвестиция времени окупается сторицей, когда ваш интерфейс начинает выглядеть и работать как единый, отлаженный механизм.
Полезные ссылки для старта:
- Официальный сайт с документацией
- Интерактивный Storybook для React
- Discord сообщество — там всегда можно задать вопрос живым людям.
Попробуйте внедрить хотя бы сетку или систему цветов Carbon в свой следующий проект, и вы почувствуете, насколько приятнее становится процесс разработки, когда за вашей спиной стоит опыт сотен инженеров и дизайнеров.
