Ситуація знайома: дизайн-система є, але вона "жива" лише в одному Figma-файлі. Компоненти без токенів, хардкодні hex-значення, нейменінг «в стилі 2019 року», і головне — розробники вже давно перестали туди дивитись і пишуть стилі прямо в коді.
Завдання — мігрувати. Але команда не може зупинитись. Як це зробити?
Правило перше: не переписувати все одразу
Найпоширеніша помилка — спроба зробити "велику міграцію" за один спринт. Результат: два тижні нічого не шипиться, команда ненавидить дизайн-систему ще більше, а половину змін потім відкочують.
Правильний підхід — strangler fig pattern. Нова система зростає поруч зі старою, поступово замінюючи компоненти один за одним. Стара система не видаляється — вона deprecated і замінюється тільки коли компонент торкають у роботі.
Аудит: що реально використовується
Перш ніж мігрувати, зробіть аудит реального використання компонентів у продукті. Часто виявляється, що з 80 компонентів у Figma активно використовується 15–20. Саме з них і починаємо.
- Пройдіться по всіх екранах продукту з інспектором
- Запитайте розробників, які компоненти вони найчастіше використовують у коді
- Перевірте Figma Analytics (якщо є Enterprise)
Етап 1: Токени першими
Почніть не з компонентів, а з токенів. Визначте кольорову палітру, типографіку, spacing і border-radius. Занесіть у Figma Variables або Tokens Studio. Запустіть Style Dictionary pipeline.
Це дозволяє розробникам одразу починати використовувати нові CSS-змінні у нових компонентах — навіть якщо Figma-компоненти ще не готові.
Ключовий принцип: токени мають жити в коді, не в Figma. Figma — лише джерело правди для редагування. Code — джерело правди для виконання.
Етап 2: Атомарні компоненти
Після токенів — базові атоми: Button, Input, Badge, Tag, Icon. Це компоненти, які використовуються скрізь і від яких залежать всі складніші елементи.
Для кожного компоненту:
- Зробіть Figma-компонент з прив'язкою до токенів
- Задокументуйте Props API (варіанти, стани, булеани)
- Попросіть розробника зробити відповідний React/Vue/Swift компонент
- Налаштуйте Figma Code Connect (якщо використовуєте)
Етап 3: Молекули і організми
Коли атоми готові — збираєте складніші компоненти: Card, Modal, Form, Navigation. Вони вже складаються з атомів, тому значна частина роботи вже зроблена.
Як не зупиняти розробку
Паралельно з міграцією команда продовжує шипити фічі. Правило просте: торкнули компонент у спринті — мігруйте його. Не торкнули — поки лишається старий.
Це створює природний тиск: чим більше фіч шипиться, тим більше компонентів мігрує. За 2–3 місяці більша частина активних компонентів буде в новій системі.
Проводимо міграції дизайн-систем як частину нашого 7-денного спринту — аудит, нова система і перші компоненти в коді за тиждень.