Дизайн-система WB и как AI помогает решать проблемы

Summary

Vladislav Tkachenko presents Rhythm, WB’s design system, focusing on the challenges of supporting more than 100 products rather than on basic Figma component-building practices.

Architecture and semantics

Rhythm is organized into three linked layers: primitives, abstractions, and exports. Tkachenko compares them to ingredients, recipes, and finished dishes. Primitives hold raw tokens, such as colors; abstractions give those tokens meaning and context; and exports make the resulting values available for use. Designers mainly work with the exported layer.

Abstractions let teams change themes, product branding, button styles, corner radii, breakpoints, and other properties without rebuilding every component. For example, products can use different primary colors while retaining the same semantic role for a primary button.

Tkachenko stresses that tokens should express meaning rather than the name of a particular component. This helps prevent a redesign from unintentionally changing unrelated elements and reduces legacy design debt.

Rhythm classifies surfaces into three categories:

• Foundation: static backgrounds
• Wrapper: containers that may contain interactive elements
• Controls: interactive elements such as buttons and checkboxes

These categories guide how tokens and interactions should be applied.

Component quality and workflow

Complex components need enough properties and states to support real product needs and communicate their implementation clearly to developers.

The form-field example demonstrates slots, icons, prefixes and suffixes, hints, counters, validation states, selects, text areas, and other variations. Abstractions let designers show states such as errors or success without duplicating every component variant.

A code-generation plugin helps developers retrieve component information and implementation details. Tkachenko frames the design system’s business purpose as helping products reach the market faster.

Components should be designed for both designers and developers. The drawer/modal example shows how a flexible container can preserve adaptable layouts while passing relevant configuration to development.

Figma limitations and possible alternatives

Tkachenko says Figma’s variant and property limits, performance constraints, and pricing can make large design systems difficult to manage. Teams may split components into groups or use workarounds, but these can make the system harder to use.

He argues that Figma’s canvas-based approach is poorly suited to some advanced responsive relationships and relative units. He points to emerging web-based editors that can work with actual code, such as React components, rather than only pixel-oriented design representations.

AI and the future of design systems

In Tkachenko’s view, AI’s value depends on a well-defined design-system architecture and thoroughly specified components. The goal is not for AI to invent new UI elements, but to generate designs using approved components and rules.

WB’s team has been adding design-system rules and component knowledge to a knowledge base used with standard models such as Gemini and Claude, rather than building a model from scratch. Tkachenko says this work had been underway for about two months.

The initial task is deliberately constrained: generate a simple form using the correct backgrounds, inputs, buttons, text styles, and colors. The broader aim is to accelerate parts of design and development workflows, not to replace the people and roles involved.

His central principle is that the product should guide the design system, not the other way around. The system must flexibly accommodate product, brand, and marketing needs while preserving clear rules and avoiding ad hoc changes that create legacy debt.

Practical overview

The webinar includes a walkthrough of Rhythm’s Figma structure and examples involving buttons, form fields, surfaces, and modal/drawer layouts. It is an analysis and demonstration rather than a step-by-step tutorial or product review.

Main speaker/source: Vladislav Tkachenko, head of design automation at RWB (Russ + Wildberries).