Як я вручну переношу локальні сторінки у Figma
Іноді в мене екран уже готовий локально, і я не хочу збирати його у Figma вручну з нуля.
У таких випадках я використовую простий ручний capture-флоу. Він дозволяє взяти реальну сторінку з localhost і відправити її у Figma-файл.
Ось як саме я це роблю.
Чому я використовую саме цей підхід
Якщо UI уже реалізований, перемальовувати його у Figma вручну просто немає сенсу.
Найчастіше я використовую це, коли:
- треба швидко перенести реальний екран у Figma
- треба задокументувати флоу для дизайну або продукту
- важливо зафіксувати поточну реалізацію, а не приблизну версію
- треба повторно зняти той самий маршрут після змін в інтерфейсі
Що насправді потрібно Figma
Уся схема працює тільки якщо є дві речі:
- на сторінці підключений Figma capture script
- сторінка відкривається через спеціальний URL з одноразовим
captureIdіendpoint
Все.
Коли сторінка відкривається з цими параметрами, script читає DOM і відправляє відрендерений результат у Figma.
Мій робочий процес
1. Спочатку я перевіряю, що сторінка працює локально
Я запускаю проєкт і відкриваю маршрут, який хочу перенести.
Наприклад:
npm run dev
Потім:
http://localhost:5173/nfc
Це важливіше, ніж здається. Якщо сторінка локально зламана, Figma забере саме зламаний стан.
2. Далі я додаю Figma capture script
Після цього я додаю в основну HTML-точку входу такий script:
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
Зазвичай я ставлю його ближче до кінця <body>, перед основним script застосунку.
Якщо знаю, що буду знімати кілька екранів, просто залишаю його на час розробки.
3. Потім я отримую новий captureId
Для кожного capture потрібен новий captureId.
Тут важливо не помилитися:
- один
captureIdпрацює лише один раз - один
captureIdдорівнює одному екрану - якщо мені потрібен інший маршрут, я беру новий
captureId - якщо мені треба повторно зняти той самий маршрут пізніше, я теж беру новий
captureId
Разом із ним я отримую ще й endpoint.
4. Потім я відкриваю сторінку з capture-параметрами
Я відкриваю маршрут не звичайно, а зі спеціальним hash:
http://localhost:5173/nfc#figmacapture=<captureId>&figmaendpoint=<urlencoded-endpoint>&figmadelay=1000
Це дає сторінці три речі:
- який capture використовувати
- куди відправляти результат
- скільки чекати перед стартом capture
Зазвичай я залишаю figmadelay=1000. Якщо сторінка важка або довше тягне дані, я просто збільшую затримку.
На macOS я зазвичай відкриваю так:
open -a "Google Chrome" "http://localhost:5173/nfc#figmacapture=<captureId>&figmaendpoint=<urlencoded-endpoint>&figmadelay=1000"
5. Далі я чекаю, поки Figma обробить результат
Після відкриття сторінки script зчитує DOM і відправляє його у Figma.
Потім я просто чекаю, поки статус стане completed.
6. Після цього я перевіряю результат у Figma
В кінці я відкриваю Figma-файл і дивлюсь, чи імпортований фрейм виглядає правильно.
Зазвичай я перевіряю:
- чи додався фрейм
- чи повністю зібрався layout
- чи сторінка встигла завантажитися до моменту capture
- чи немає візуальних поломок
Якщо результат неповний, я не намагаюся повторно використати той самий capture. Я просто генерую новий captureId і повторюю процес.
Що найчастіше ламається
Більшість помилок дуже приземлені.
- У Figma нічого не з’явилось: script не підключений, URL відкритий без повного hash або
captureIdуже використаний. - Результат частковий: сторінка не встигла дорендеритись.
- Стилі виглядають неправильно: ще до capture сторінка в браузері вже виглядала неправильно.
Якщо маршруту треба більше часу, я просто збільшую затримку:
figmadelay=2000
Висновок
Я не думаю про це як про “експорт localhost у Figma”.
Я думаю про це як про ситуацію, де сторінка сама захоплює себе.
Застосунок рендериться локально, Figma script його читає, а сторінка сама відправляє результат у потрібний файл.
У цьому і є весь флоу.