Как я вручную переношу локальные страницы в 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 его считывает, а страница сама отправляет результат в нужный файл.
В этом и состоит весь флоу.