Как я Делал Документацию Для Дизайн-системы
Что: дизайн-система
Где: Wildberries
Роль: продуктовый дизайнер
Цель и задача
Нужно было сделать документацию по дизайн-системе, которой смогут пользоваться все — от джуна до сеньора. Просто открыл, нашел что нужно, применил.
В WB накопилась куча разрозненных компонентов и правил. Каждая команда работала по-своему, и это стало проблемой — продукты выглядели по-разному, новички тонули в хаосе, а опытные дизайнеры постоянно переспрашивали друг у друга «а как правильно?».
Классика жанра для больших команд:
В WB накопилась куча разрозненных компонентов и правил. Каждая команда работала по-своему, и это стало проблемой — продукты выглядели по-разному, новички тонули в хаосе, а опытные дизайнеры постоянно переспрашивали друг у друга «а как правильно?».
Классика жанра для больших команд:
- Правила есть, но где они лежат — непонятно
- Существующая документация написана так, что проще самому разобраться
- Новый человек первую неделю только ищет, где что
В чём проблема?
В WB решили замахнуться на амбициозную штуку: дизайн-систему, которая подойдёт под все их продукты. А их там много.
Систему сделали. Получилось сложно. Теперь нужна документация, которая объяснит, как со всем этим работать — причём так, чтобы было понятно без танцев с бубном.
Пока я писал документацию, дизайнеры уже засыпали вопросами — систему разрабатывали параллельно, и это создавало свои проблемы. Что-то менялось на ходу, приходилось подстраиваться.
Плюс нужно было сделать документацию так, чтобы можно было легко переставлять или менять разделы.
А вопросов про цвета было вообще в разы больше. Как их правильно применять, как красить макеты, какой оттенок где использовать. Дизайнеры просто тонули в этой системе — слишком много правил, слишком сложно.
Систему сделали. Получилось сложно. Теперь нужна документация, которая объяснит, как со всем этим работать — причём так, чтобы было понятно без танцев с бубном.
Пока я писал документацию, дизайнеры уже засыпали вопросами — систему разрабатывали параллельно, и это создавало свои проблемы. Что-то менялось на ходу, приходилось подстраиваться.
Плюс нужно было сделать документацию так, чтобы можно было легко переставлять или менять разделы.
А вопросов про цвета было вообще в разы больше. Как их правильно применять, как красить макеты, какой оттенок где использовать. Дизайнеры просто тонули в этой системе — слишком много правил, слишком сложно.
Что было сделано?
Я устал от унылых текстовых мануалов и запилил интерактивную документацию прямо в Figma. Это решило кучу проблем.
Что я сделал:
Вместо очередной помойки с инструкциями получилась штука, которой реально удобно пользоваться.
Что я сделал:
- Сначала разгрёб весь хаос и выстроил нормальную структуру. Получилось больше 40 гайдов — от базовых компонентов до сложных кейсов.
- Разбил всё на понятные разделы: компоненты, поверхности, стенды, обновления. Чтобы люди не блуждали в трёх соснах.
- Собрал отдельный UI-кит для самой документации. Потому что если учишь людей делать красиво, сам не можешь показывать говно. Ещё я свёл все пропсы, названия и состояния в стринговые переменные. Все значения, пропсы, что видит дизайнер (от enabled до SM), теперь лежит в одном месте.
- Новые гайды после этого собираются намного быстрее.
- Сделал всё живым. Кликаешь на компонент — он открывается в новой вкладке и показывает, как работает в прототипе. Никаких мёртвых скриншотов.
Вместо очередной помойки с инструкциями получилась штука, которой реально удобно пользоваться.
Результаты
Получился инструмент, который превратил документацию в живую энциклопедию дизайн-системы.
Теперь вся информация о компонентах, их состояниях и правилах использования собрана в одном месте. Дизайнеры перестали тратить время на поиски — навигация работает просто: от общего к частному.
Документацию легко обновлять. Изменился компонент — обновил ссылку или добавил примечание в нужном разделе. Новички быстро вникают в проект, изучая готовые паттерны и правила.
Теперь вся информация о компонентах, их состояниях и правилах использования собрана в одном месте. Дизайнеры перестали тратить время на поиски — навигация работает просто: от общего к частному.
Документацию легко обновлять. Изменился компонент — обновил ссылку или добавил примечание в нужном разделе. Новички быстро вникают в проект, изучая готовые паттерны и правила.
Что это значило для меня
Этот проект оказался сложнее, чем я думал. Сначала казалось — ну что там, сверстать документацию. А по факту пришлось разбираться в продукте с нуля, копать глубже.
Что я понял: дизайн-система — это отдельный продукт. Со своими пользователями (дизайнерами и разработчиками), со своими болями, со своей логикой.
Чему научился:
Самое ценное: я увидел, как правильно оформленная документация экономит время всей команде. Когда каждый знает, где что лежит и как это использовать, работа идёт быстрее. А интерфейс получается цельным, без случайных расхождений.
- Думать системно. Раньше видел кнопку — просто кнопку. Теперь вижу, как она связана с другими элементами, где используется, почему именно такая. Пришлось выстраивать всю архитектуру информации с учётом этих связей.
- Понимать пользователя. Дизайнеру не нужны длинные объяснения. Ему нужно быстро найти ответ: как это работает, где взять код, какие есть варианты. Я переделывал структуру три раза, пока не дошло.
- Договариваться. Разработчики хотят одно, дизайнеры — другое, а мне надо было свести это в единый стандарт. Научился объяснять, почему важно делать именно так, а не иначе.
Самое ценное: я увидел, как правильно оформленная документация экономит время всей команде. Когда каждый знает, где что лежит и как это использовать, работа идёт быстрее. А интерфейс получается цельным, без случайных расхождений.