13.10.2025 16:38
timkaopensoul 0 1600 Источник

Что такое UI Kit и зачем он вообще нужен

UI Kit — это библиотека визуальных компонентов и стилей продукта: цвета, шрифты, отступы, кнопки, карточки и т.д.

Его основная цель — сделать интерфейс единым и предсказуемым, чтобы любой экран в приложении выглядел «по-нашему».

На словах всё просто. Но на практике — у каждой команды свой оттенок серого, своя толщина шрифта и своя кнопка “Купить”.

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

Польза для бизнеса

  • Один источник правды по бренду: цвета, шрифты, типографика и UI-компоненты живут централизованно → бренд в продукте всегда консистентен.

  • Время на рынок ↓: новая промо-механика/ребрендинг/сезонные темы раскатываются без переписывания экранов.

  • Стоимость владения ↓: меньше ручной вёрстки, меньше багов, дешевле поддержка нескольких платформ.

  • Гибкость ↑: легко запускать A/B-темы, B2B-white-label, региональные палитры, «дневные/ночные» режимы.

  • Масштабирование ↑: любая новая команда подключается к готовому «строительному лесу» из токенов и компонентов.

Проблема

UI Kit живёт в Figma — в виде красивых компонентов и токенов. А в коде — это отдельная вселенная, где цвета и размеры прописаны вручную. Любое изменение шрифта в Figma превращается в десятки pull-request’ов.

Добавь сюда тёмную тему — и хаос гарантирован.

Решение, которое мы внедрили

Мы решили связать Figma и код напрямую: чтобы дизайн-токены, экспортированные из Figma, автоматически превращались в Kotlin-код, XML-ресурсы и Compose-темы.

Для этого мы договорились с дизайнерами об обменном формате — JSON-токены (цвета, типографика, размеры). Эти JSON кладём в проект и генерируем код: типобезопасные структуры для Compose/KMP, Android XML, «raw» слой, который легко шарить и на iOS.

Сегодня: просто отправить JSON от дизайнеров.

Завтра: эти JSON скачиваются напрямую из Figma API — бесшовный дизайн→код.

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

Архитектура (в двух словах)

  • Отдельные Gradle-плагины для генерации цветов (compose + xml) и шрифтов

  • Парсеры строят деревья

  • Генераторы выпускают:

    • Raw-структуры (Kotlin data-классы) — единый слой для платформ.

    • Compose-структуры — типобезопасные токены в KMP.

    • Android XML — ресурсы для нативного Android.

Всё делается одной командой в Gradle:

./gradlew generateDesignTokens

Архитектура генератора

(условная схема: Figma → JSON → KotlinPoet → Compose/XML)

Основные модули:

  • generate-core — общий слой с утилитами и сериализацией.

  • generate-typography, generate-colors — плагины для конкретных токенов.

  • Gradle extension designTokens { ... } — конфиг без бренда.

Все классы генерируются с помощью KotlinPoet, полностью типобезопасно и без ручного кода.

Простой пример: из JSON → в Kotlin → на экран

Дизайнеры присылают токены примерно в таком виде (из Figma или JSON):

{
  "Background": {
    "Primary": {
      "value": "#FFFFFF"
    },
    "Secondary": {
      "value": "#F5F5F5"
    }
  },
  "Text": {
    "Primary": {
      "value": "#000000"
    },
    "Secondary": {
      "value": "#666666"
    }
  }
}

Эти данные описывают цвета — но не платформу.

Разработчик должен сам решить, как это применить в Android, iOS или Web.

 После генерации

Скрипт на Kotlin Poet превращает эти JSON-токены в реальные структуры кода:

object AppColors {
    object Background {
        val Primary = Color(0xFFFFFFFF)
        val Secondary = Color(0xFFF5F5F5)
    }
    object Text {
        val Primary = Color(0xFF000000)
        val Secondary = Color(0xFF666666)
    }
}

и параллельно — в XML-ресурсы для старых экранов:

<resources>
    <color name="Background_Primary">#FFFFFF</color>
    <color name="Background_Secondary">#F5F5F5</color>
    <color name="Text_Primary">#000000</color>
    <color name="Text_Secondary">#666666</color>
</resources>

Использование в коде Compose

Box(
    Modifier
        .background(AppTheme.colors.background.primary)
        .fillMaxSize()
        .imePadding()
) {
    Text(
        text = "Привет, UI Kit!",
        color = AppTheme.colors.text.primary,
        style = AppTheme.typography.title
    )
}

И тот же экран в старом XML

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/Background_Primary"
    android:fitsSystemWindows="true">

    <TextView
        android:text="Привет, UI Kit!"
        android:textColor="@color/Text_Primary"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Светлая и тёмная темы

Когда дизайнеры добавляют новую палитру ("Dark": { ... }),

генератор создаёт AppColorsDark, и переключение темы происходит автоматически через AppTheme.

Как всё работает под капотом

Генераторы используют KotlinPoet — DSL для генерации исходников Kotlin:

val typeSpec = TypeSpec.objectBuilder(cfg.baseColorsObject)
    .addModifiers(KModifier.DATA)
    .addProperty(PropertySpec.builder("primary", Color::class)
        .initializer("Color(0xFF000000)")
        .build())
    .build()

Названия классов, пакетов и путей вывода полностью задаются через Gradle-extension:

designTokens {
    packageBase = "com.uikit.tokens"
    colorsClass = "ColorTokens"
    typographyClass = "TypographyTokens"
    outputKotlinDir = "src/commonMain/kotlin"
    outputAndroidResDir = "src/androidMain/res/values"
}

⚙️ Это позволяет переиспользовать генератор в любом бренде, не меняя исходники.

Что получает бизнес

1. Единый визуальный язык


Все продукты выглядят одинаково: один цветовой стиль, одна типографика, одна логика компонентов.

Метрика: ↓ визуальных расхождений, ↓ QA-правок.

2. Быстрее промо и A/B-тесты

Запустить «новогоднюю тему» или «чёрную пятницу» — значит просто подменить JSON токенов.

Метрика: время от идеи до релиза ↓ в разы.

3. Ребрендинг без боли

Смена логотипа, палитры или шрифта не требует переписывать код.

Новые токены — новый бренд за несколько минут.

4. Масштабирование и white-label

Региональные палитры, партнёрские темы, разные наборы токенов — всё живёт в одном пайплайне.

5. Контроль и прозрачность

Токены версионируются в Git, проходят ревью и автоматически проверяются CI.

Можно откатить любую визуальную правку, как обычный код.

Интеграция с CI/CD

  1. Дизайнер публикует токены в Figma.

  2. Скрипт (или дизайнер вручную) кладёт JSON в design-tokens/json/.

  3. CI запускает generateDesignTokens.

  4. Генератор создаёт обновлённые Kotlin- и XML-файлы.

  5. Репозиторий получает pull-request с изменениями токенов.

Следующий шаг — автоматическая выгрузка токенов через Figma REST API.

Преимущества подхода

Что было

Что стало

Цвета и шрифты захардкожены в коде

Все значения централизованы в токенах

Ребрендинг = переписывать весь UI

Меняем JSON и пересобираем

Несогласованность между платформами

Единый источник данных

Медленные эксперименты

Быстрые A/B-темы и адаптации

Риск утечки бренд-данных

Нейтральный генератор с внешним конфигом

Summary: Под капотом

  • KotlinPoet — генерация исходников Kotlin и Compose.

  • XML DOM — формирование Android-ресурсов.

  • Gradle-Plugin DSL — простая интеграция в любой проект.

  • Configurable Policies — стратегия маппинга шрифтов, единиц измерения, нейминга файлов.

Продаем бизнесу

UI Kit — не просто инструмент разработчика.

Это операционная платформа бренда.

  • Он ускоряет выход новых фич и кампаний.

  • Удешевляет поддержку и снижает технический долг.

  • Делает ребрендинг и масштабирование предсказуемыми.

  • Даёт бизнесу уверенность, что «бренд живёт одинаково» на всех экранах.

Что с iOS?

Пока генерация внедрена на Android и KMM,

но iOS-команда легко может подключиться — кодогенератор уже строит данные в чистом JSON-формате, который:

  • может быть импортирован в Swift через Codable;

  • или превращён в .xcassets при помощи простого скрипта;

  • поддерживает тот же ключевой набор токенов (color, font, radius, spacing).

Таким образом, архитектура уже кросс-платформенная, переход займёт 1–2 дня.

Технические доработки

  • Автоматизировать импорт токенов из Figma API.

  • Добавить поддержку токенов анимаций, радиусов и теней.

  • Расширить генерацию на Web (CSS variables).

  • Добавить визуальные snapshot-тесты в CI для контроля изменений.

 Как масштабировать

  • White-label → просто добавляем ещё один JSON.

  • A/B-темы → токены под разные эксперименты.

  • Мультибренд → разные designTokens конфиги в Gradle.

  • Figma API → следующая итерация, чтобы JSON качался автоматически

Итог

1) Мы превратили UI Kit из дизайнерского артефакта в живую систему, которая соединяет дизайн и код напрямую.

2) Больше не нужно «переводить» макеты в разработку — код сам строится из токенов, а дизайн-команда остаётся единственным источником правды.

3) UI Kit становится не просто частью проекта, а стратегическим активом компании, ускоряющим продукт, снижающим стоимость и делающим бренд масштабируемым.

Результат:

⏱️ скорость разработки растёт, ? стоимость поддержки падает, ? бренд выглядит стабильно.

Комментарии (0)