Часть 1: Figmality = Figma + Fatality 💀

На одном из проектов в шутку даже ввели термин Figmality, он долго означал одно - сочетание Figma с Fatality. Если в двух словах, то:

новый дизайнер -> новые макеты -> фронтенд мёртв

За несколько лет фуллстек разработки проекта:

1. 3 дизайнера
2. 3 редизайна
3. 7 оттенков синего
4. 5 версий одной кнопки.

Разработка UI компонентов выглядела примерно так:

CSS превратился в слоеный торт Наполеон со множеством legacy слоев:

Каждый редизайн фронтенда:

1. не улучшал, а заменял
2. не объяснял, а стирал
3. добавлял код.

Дело было не в дизайнерах, они молодцы и каждый старался на максимум, а в подходе. Проблема была в том, что у интерфейса не было правил.

Часть 2: как Figmality перестал быть Fatality

С ростом проекта появилось больше макетов, добавилась поддержка мобильных устройств и дополнительного браузера (привет Safari!), а также требования к доступности. Использовали компонентный подход (Component-Driven Development), который позволял разбивать сложные интерфейсы на простые компоненты, как итог накопилось ~150 компонентов (а их еще и поддерживать!), но бизнес-логика и интерактивные состояния усложняли отладку. Storybook решает эту проблему и меняет правила:

Figmality = Figma + Reality

Мы не наняли «идеального» дизайнера.

Мы изменили определение Figmality: актуализировали UI kit, определили ключевые компоненты с дизайнером, на каждый из них создали компонент согласно существующего UI kit и написали stories под каждое состояние компонента. Можно создавать компоненты по-разному: начинать с крупных и постепенно разбивать их в более мелкие, и наоборот.

Теперь это:

Figma + Reality

Figma перестала быть картинкой. Она вместе со Storybook стала частью “контракта” между командой разработки и дизайнером.

Одна кнопка.

Все состояния.

Одна реализация.

Вместо десятков значений - зафиксированные в Storybook правила:

Компоненты перестали зависеть от редизайна:

Меняется дизайн → обновляются правила.

Код (бизнес логика, поведение) не переписывается.

Результат:

1. 0 переписываний фронтенда;
2. 1 система компонентов;
3. онбординг новых разработчиков - 2 дня;
4. Редизайн - теперь не reset;
5. Редизайн - это обновление контракта, иначе он просто зверски убивает время.