Как перенести в Figma страницу, доступную только после входа

Самые нужные экраны видны только после входа. Именно их и приходится перерисовывать вручную.

Самые интересные экраны в продукте видны только после входа. Панель со своими данными, страница настроек, состояние после третьего шага мастера. Именно их приходится перерисовывать в Figma вручную, потому что инструмент импорта до них не добирается.

Причина всегда одна и та же, и она устроена проще, чем кажется.

Почему инструменты по URL не проходят вход

Конвертер, который принимает URL, загружает страницу на своём сервере. У этого сервера нет ваших куки, вашей сессии, вашего второго фактора. Он получает то же, что получил бы незнакомый человек, открывший ссылку в новом браузере: экран входа.

Дальше происходит одно из трёх, и все три бесполезны.

• Импортируется форма входа, а не ваш экран.
• Приходит пустой каркас: приложение отрисовало оболочку и остановилось без данных.
• Ошибка или таймаут.

Тот же барьер стоит перед экранами за платным доступом, внутренними админками, стейджингом за VPN, страницами, привязанными к IP, и любым состоянием, которое существует только после нескольких действий в интерфейсе. Одна ссылка ничего из этого не описывает.

Обходные пути и чего они стоят

Обычно предлагают передать инструменту куки или учётные данные, чтобы он вошёл вместо вас. Работает иногда, а платить приходится сразу.

Вы отдаёте живую сессию стороннему сервису. Если у вас SSO, а компания к этому относится серьёзно, это прямое нарушение правил. Двухфакторную аутентификацию так вообще не пройти. И даже когда всё срабатывает, состояние теряется: корзина с тремя товарами, форма, заполненная наполовину, открытая панель — сессия этого не восстановит, потому что это результат ваших действий, а не адрес.

Второй обычный ответ — скриншот. Но в Figma он приходит картинкой. Ни текста, который можно поправить, ни слоёв, которые можно двигать, ни цветов, которые можно вытащить.

Другой подход: снимать из вашего браузера

Расширение работает внутри вкладки, которая уже открыта у вас. Вы вошли, вы дошли до нужного состояния, и в этот момент снимается ровно то, что на экране.

Из этого следует несколько вещей, и они важнее самой техники.

• Никакие учётные данные никуда не передаются. Их не спрашивают, потому что вход уже произошёл.
• SSO, двухфакторная аутентификация, корпоративный VPN — всё это уже сработало до того, как вы нажали «снять».
• Состояние сохраняется: то, что вы видите после трёх кликов, снимется вместе с этими тремя кликами.
• Обработка идёт в браузере. У Snapture плагин Figma объявляет allowedDomains: ["none"], то есть Figma сама запрещает ему любые сетевые запросы. Проверить это можно в манифесте плагина, не полагаясь на наше слово.

Что приходит в Figma: настоящие слои. Текст правится, автолейаут восстановлен, цвета и типографика извлечены в стили, повторяющиеся карточки собраны в компоненты. Цифры на реальных сайтах опубликованы на странице измерений.

Что именно снимается

Отдельно про модальные окна и выпадающие меню. Снимок читает DOM в том виде, в каком он сейчас, а не перезагружает страницу, поэтому открытое окно остаётся открытым. Съёмка идёт с горячей клавиши, а не через клик по панели, и именно поэтому наложенный слой не успевает закрыться от потери фокуса.

Как это делается

1. Войдите и доведите экран до нужного состояния. Откройте, что должно быть открыто, введите, что должно быть введено.
2. Нажмите AltShiftC для всей страницы. Для части экрана: AltShiftE выбирает элемент, AltShiftR — область. То же самое есть в самом расширении.
3. Файл сохраняется локально. Можно вместо этого скопировать в буфер обмена.
4. В Figma запустите Snapture Import и перетащите файл или нажмите CtrlV.

Тем, кто беспокоится о данных на снятом экране: файл лежит у вас, никуда не отправляется, и его можно открыть текстовым редактором, чтобы посмотреть, что внутри.

Где всё-таки не получится

Ограничения есть, и лучше знать о них заранее.

• Страницы chrome:// и Chrome Web Store: расширениям туда доступ закрыт по правилам браузера.
• Canvas и WebGL приходят изображением. Слоёв внутри 3D-сцены не существует, разобрать её не на что.
• Кросс-доменные <iframe> снимаются как картинка. Читать их содержимое браузер не даёт, и это правильно.
• Видео приходит текущим кадром.

Всё остальное на обычной странице становится слоями.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia