Бесплатный плагин для Figma Desktop. Вставьте ссылку: плагин соберёт из страницы редактируемые фреймы, текст, картинки и SVG-векторы, а flex-блоки переведёт в Auto Layout.
Каждая ширина и тема становится отдельным фреймом. После импорта плагин показывает отчёт: сколько создано слоёв и Auto Layout-фреймов, какие картинки пропущены и каких шрифтов нет на компьютере.
Auto Layout
Flex-контейнеры становятся Auto Layout с отступами, gap и выравниванием. Если раскладка не сходится с реальными координатами элемента, слой остаётся на точной позиции.
Текст и шрифты
Текст остаётся текстом: шрифт, размер, начертание, интерлиньяж и выравнивание как на сайте. Если шрифта нет на компьютере, плагин подставит ближайший, а в крайнем случае Inter.
Размеры экрана
1440, 1280, 768 и 390 px или своя ширина от 320 до 3000 px. Выберите несколько, и варианты лягут рядом.
Несколько страниц
Кнопка «Найти страницы» читает карту сайта, а если её нет, обходит ссылки на два уровня вглубь. Каждая отмеченная страница займёт свой ряд фреймов. На одну уходит около 25 секунд.
Светлая и тёмная тема
Плагин открывает страницу со светлой и с тёмной системной темой и переносит обе за один запуск. Сработает, если сайт следит за настройкой prefers-color-scheme.
Изображения и SVG
Картинки приходят отдельными слоями, webp и avif плагин конвертирует сам. Ленивые изображения он подгружает прокруткой. SVG-иконки, включая спрайты, становятся векторами.
Что ещё можно включить
Плагин запоминает выбор для каждого сайта. В следующий раз импорт с теми же настройками запускается кнопкой «Повторить импорт».
В архиве папка website-to-figma с тремя файлами: manifest.json, code.js и ui.html.
Куда положить папку. В постоянное место, например в «Документы». Figma запоминает путь к manifest.json: если папку переместить или удалить, плагин перестанет запускаться.
01
Добавьте плагин в Figma Desktop
Откройте любой файл дизайна и выберите Plugins → Development → Import plugin from manifest. Укажите website-to-figma/manifest.json.
Не вижу пункт Development. Он есть только в настольном приложении Figma и только в файлах дизайна. В браузере и в FigJam плагин из ZIP не установить.
02
Запустите импорт
Plugins → Development → Website to Figma. Вставьте ссылку, выберите ширину и нажмите «Импортировать в Figma». Страница открывается до минуты, потом плагин собирает слои.
Если импорт не удался. «Сервер не отвечает»: проверьте интернет и адрес сервера в «Дополнительно». Страница обрезана снизу: увеличьте «Макс. высота». Сайт закрыт Cloudflare, капчей или входом: такие страницы плагин пока не переносит. Слои съехали: выключите Auto Layout, и плагин перенесёт всё по координатам.
03
Версия 2026.10.19
Новое оформление панели. Редкие настройки переехали в раздел «Дополнительно».
Куда уходит адрес страницы
Плагин отправляет ссылку на облачный сервер render.anisimovalisaveta.com. Он открывает страницу в Chrome и возвращает плагину слои, стили и картинки.
Вопросы и ответы
Сколько стоит и есть ли лимиты?
Плагин бесплатный, регистрация не нужна. Облачный сервер принимает ограниченное число импортов в час с одного IP-адреса. Лимит снимает токен доступа: запросите его по ссылке в разделе «Дополнительно».
Это работает в браузерной Figma?
Нет. Плагины из ZIP Figma запускает только в настольном приложении. Файл с импортированной страницей потом открывается где угодно, в том числе в браузере.
Что не перенесётся?
Анимации и переходы. Grid и обычные блочные раскладки остаются на точных координатах, без Auto Layout. Иконочные шрифты вроде Font Awesome пропускаются, если их нет на компьютере. Эффекты filter, blend-mode, clip-path и conic-gradient упрощаются. Часть защищённых iframe приходит картинкой.
Почему шрифты отличаются от сайта?
Figma берёт шрифты, установленные на вашем компьютере. После импорта плагин показывает список шрифтов сайта. Установите их и повторите импорт, тогда отличий станет меньше.
Можно перенести страницу, на которой нужен вход?
Пока нет. Сервер открывает страницу как гость, без ваших cookies, поэтому видит только то, что доступно без входа. Страницы под паролем, за проверкой Cloudflare или капчей не перенесутся. Для закрытого интерфейса подготовьте отдельную тестовую копию без конфиденциальных данных. Не снимайте защиту с рабочей страницы.
Почему не появилась тёмная тема?
Плагин включает тёмную тему через системную настройку. Если сайт переключает тему только своей кнопкой, плагин её не нажмёт, и тёмный вариант не появится.
Сколько длится импорт?
Около 25 секунд на страницу. Перед пакетным импортом плагин показывает оценку времени под списком страниц.
Как обновить плагин?
Скачайте ZIP с этой страницы и замените им файлы в папке плагина. Ссылка всегда ведёт на последнюю версию.
Какие страницы можно перенести?
Website to Figma переносит открытые страницы в редактируемые слои. Сервер открывает URL как гость: вход, cookies пользователя и защиту от ботов плагин не обходит.
Результат зависит от устройства страницы
Элемент
Что ожидать
Текст и SVG
Редактируемые слои; проверьте шрифты после импорта.
Flex
Auto Layout там, где структуру можно воспроизвести; возможна замена на координаты.
Grid и обычные блоки
Размещение по координатам; отзывчивость сайта не переносится автоматически.
Фильтры, blend modes, clip-path, conic-gradient
Упрощение эффектов; сравните с исходной страницей.
Анимация, вход и CAPTCHA
Анимация не переносится; закрытые страницы не поддерживаются.
Скорость импорта зависит от размера страницы и сервера. Для приватного интерфейса используйте отдельную обезличенную тестовую копию. Не снимайте защиту с рабочей страницы.
