URL to Figma: вставьте ссылку и получите редактируемые слои

Вставка ссылки выглядит мгновенной, но сервис захвата делает несколько вещей, чтобы результат совпал с тем, что видит посетитель.

1. Изолированная загрузка. Страница открывается в Chromium-песочнице, запущенной в отдельном контейнере с ограничениями seccomp. Каждый запрос проходит защиту от SSRF, поэтому URL нельзя использовать для доступа к внутренним адресам.
2. Очистка. При включённой опции Hide cookie banners & popups баннеры согласия и оверлеи удаляются перед захватом.
3. Ленивый контент. Страница прокручивается, чтобы изображения и секции, подгружаемые при скролле, были на месте к моменту захвата.
4. Неподвижность. Анимации замораживаются, а WebGL — через несколько кадров, поэтому ничего не попадает в кадр посреди перехода.
5. Измерение. Измеряется реальная ширина дизайна: 1920 для full-bleed-дизайнов, ширина контейнера для сайтов с фиксированным контейнером, 1440 для резиновых.
6. Доставка. Захваченная структура передаётся в ваш плагин один раз, затем удаляется из памяти.

Изображения обрабатывает отдельный контейнер-декодер без доступа в интернет. Затем плагин локально строит слои в Figma и применяет проверенный Auto Layout. Для многоязычных сайтов опция Page language позволяет выбрать один из 15 языков. Каждая опция описана в документации.

Чаще всего импорту по URL хватает настроек по умолчанию. Если хотите тонкой настройки, сильнее всего влияют несколько параметров:

Экраны

Каждый дополнительный экран — это ещё один захват. Экраны одной страницы снимаются параллельно, и полный адаптивный набор всё равно считается одним импортом. Free захватывает один экран на импорт; Pro и Team — до четырёх.

Full page

Захват всей прокручиваемой страницы даёт полный дизайн. Отключите опцию, если нужна только верхняя часть страницы.

Images

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

Extra wait (Pro)

Некоторые страницы продолжают подгружать контент уже после того, как выглядят готовыми. Extra wait даёт им больше времени, чтобы поздние секции попали в импорт.

Detailed layers (Pro)

Опция на случай, когда нужно более подробное дерево слоёв для изучения, а не структура по умолчанию.

Если страница обрезана лимитом тарифа, в результате появляется заметная фиолетовая полоса Capture limit, так что вы всегда знаете, видите ли страницу целиком. Чем отличаются тарифы — смотрите на странице цен.

Вставляя URL, вы просите наш сервис захвата посетить страницу от вашего имени, поэтому вопрос, что происходит с данными, вполне законный.

• Рендеринг выполняется в изолированном браузере-песочнице.
• Результат передаётся в ваш плагин один раз и затем удаляется из памяти. Он никогда не записывается на диск.
• Запись о задаче забывается через 15 минут.
• Логи ограничены: журнал импортов хранится 180 дней, IP-адрес удаляется через 30 дней, журнал безопасности — 90 дней.
• Никакого трекинга: в плагине, расширении и на сайте нет cookie, аналитики и пикселей отслеживания, а данные никогда не продаются.

Данных о вас тоже минимум. Идентификатор аккаунта формируется из вашего Figma user id, и мы никогда не получаем от Figma ваше имя или email. Плагин не читает содержимое вашего файла Figma. Он создаёт новые слои и читает только метаданные собственных фреймов, например исходный URL и ширину.

Импорт по URL работает только для страниц, доступных сервису захвата как анонимному посетителю. Для всего, что за логином, расширение для Chrome делает захват в вашем собственном браузере. Все подробности — на странице безопасности.