Звичний маршрут дизайн-системи досі виглядав так: дизайнер малює в Figma, розробник переносить це в код, а розбіжності вирішують уже між собою. Автор матеріалу, дизайнер із багаторічним досвідом роботи у Figma, перевернув цей напрям. Тепер його дизайн-система починається в коді, а бібліотеку Figma він генерує з неї. Код вважається джерелом істини, а Figma є дзеркалом. Де вони розходяться, помилка в Figma. Це, за його словами, звучить як пониження для Figma, але на практиці файл Figma став завантаженішим, бо саме тут тепер фіксуються результати генерації.
Мотив простий і неприємний. Коли AI переводить файл Figma у код, він працює буквально. Реальних властивостей, станів і значень за замовчуванням він не вигадує, але все, чого файл не каже, заповнює правдоподібними припущеннями: порядком фокусу, поведінкою контейнерів, ARIA-мітками, тим, що озвучує скрінрідер, або тим, що відбувається, коли запит не вдався чи список повернувся порожнім. Такі речі не видно на скріншоті, тому на рев'ю їх ніхто не помічає. Раніше ці прогалини закривав розробник, який міг підійти й запитати. Автор зауважує, що від цього залежить і сама зручність бібліотеки: якщо фокус, поведінка контейнерів і ARIA-мітки живуть лише в коді, то дизайнеру доводилося б бути фронтенд-розробником, щоб користуватися власною бібліотекою. Для порівняння він провів власний аналіз того, що може описати React-компонент, і того, що може описати компонент у Figma. Його підрахунок дав приблизно 17% покриття для React і близько 45% для CSS. Це його особисте порівняння, а не офіційна статистика, тож цифри варто перевіряти на власному стеку.
Робочий процес, який він описує, починається з репозиторію або ізольованої гілки, де неможливо зачепити продакшн. Для тих, хто хоче потренуватися, підійде будь-яка демонстраційна дизайн-система, завантажена як архів. Далі потрібен запущений Storybook. Це локальний сайт на комп'ютері конкретної людини, адреса на кшталт localhost:6001, який бачить тільки вона і який збирається з того самого коду, що лежить у проєкті. Кожен компонент має поруч файл зі сторіз, тобто переліком прикладів, і все, що дизайнер бачить і клікає, є реальним кодом, а не окремою копією. Для з'єднання з Figma автор рекомендує Figma Console MCP від Southleft, бо базове підключення не вміє коректно читати й записувати змінні. Практичні промпти він розписує в наступних частинах серії, перша з яких вийде разом із цією.
Серія складається з трьох частин. Друга присвячена прототипуванню з AI всередині дизайн-системи, третя переходу від коду до Figma і назад. Автор також зазначає, що його відправна точка для дизайнерів, які знають Figma, але ніколи не писали продакшн-код, це саме розуміння того, що може і чого не може виразити файл. Терміни з технічного глосарію, який наприкінці матеріалу, пояснюють для читачів без розробницького бекграунду.
Для української команди важливий принцип. Агенції та продуктові команди, які працюють з AI-генерацією інтерфейсів, стикаються з тією самою проблемою: макет виглядає готовим, але поведінка в ньому вигадана. Перевернути напрям, тобто починати з коду й вести Figma як похідну, це один із способів зменшити кількість тихих помилок. Вартість переходу полягає в тому, що дизайнеру доведеться освоїти читання репозиторію та Storybook, а розробникам погодитися, що їхній код стає спільною точкою правди для дизайну. Для команд без власної дизайн-системи це, мабуть, менш болісно, ніж для тих, у кого вона вже роками живе у двох місцях одночасно.
5
