Нужно было сделать документацию по дизайн-системе, которой смогут пользоваться все — от джуна до сеньора. Просто открыл, нашел что нужно, применил.
В WB накопилась куча разрозненных компонентов и правил. Каждая команда работала по-своему, и это стало проблемой — продукты выглядели по-разному, новички тонули в хаосе, а опытные дизайнеры постоянно переспрашивали друг у друга «а как правильно?».

Классика жанра для больших команд:

• Правила есть, но где они лежат — непонятно
• Существующая документация написана так, что проще самому разобраться
• Новый человек первую неделю только ищет, где что

В WB решили замахнуться на амбициозную штуку: дизайн-систему, которая подойдёт под все их продукты. А их там много.

Систему сделали. Получилось сложно. Теперь нужна документация, которая объяснит, как со всем этим работать — причём так, чтобы было понятно без танцев с бубном.

Пока я писал документацию, дизайнеры уже засыпали вопросами — систему разрабатывали параллельно, и это создавало свои проблемы. Что-то менялось на ходу, приходилось подстраиваться.

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

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

Я устал от унылых текстовых мануалов и запилил интерактивную документацию прямо в Figma. Это решило кучу проблем.

Что я сделал:

• Сначала разгрёб весь хаос и выстроил нормальную структуру. Получилось больше 40 гайдов — от базовых компонентов до сложных кейсов.
• Разбил всё на понятные разделы: компоненты, поверхности, стенды, обновления. Чтобы люди не блуждали в трёх соснах.
• Собрал отдельный UI-кит для самой документации. Потому что если учишь людей делать красиво, сам не можешь показывать говно. Ещё я свёл все пропсы, названия и состояния 
в стринговые переменные. Все значения, пропсы, что видит дизайнер (от enabled до SM), теперь лежит в одном месте.
• Новые гайды после этого собираются намного быстрее.
• Сделал всё живым. Кликаешь на компонент — он открывается в новой вкладке и показывает, как работает в прототипе. Никаких мёртвых скриншотов.

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

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

Этот проект оказался сложнее, чем я думал. Сначала казалось — ну что там, сверстать документацию. А по факту пришлось разбираться в продукте с нуля, копать глубже.

Чему научился:

• Думать системно. Раньше видел кнопку — просто кнопку. Теперь вижу, как она связана с другими элементами, где используется, почему именно такая. Пришлось выстраивать всю архитектуру информации с учётом этих связей.
• Понимать пользователя. Дизайнеру не нужны длинные объяснения. Ему нужно быстро найти ответ: как это работает, где взять код, какие есть варианты. Я переделывал структуру три раза, пока не дошло.
• Договариваться. Разработчики хотят одно, дизайнеры — другое, а мне надо было свести это в единый стандарт. Научился объяснять, почему важно делать именно так, а не иначе.

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