Website to Figma: перенесите в Figma весь сайт, а не только главную

Есть три способа перенести в Figma много страниц одного сайта, и они хорошо сочетаются.

Несколько ссылок

Вставьте до 10 URL во вкладку Multiple. Плагин обработает их последовательно и разместит каждую страницу в своей строке: экраны Desktop, Tablet и Mobile одной страницы стоят рядом, а страницы идут друг под другом.

Import linked pages

После импорта плагин может показать другие страницы того же сайта, на которые есть ссылки. Выберите нужные — они запустятся как импорт Multiple. Если начать с главной, основная навигация обычно покрывается за пару итераций.

Папка сайта или .zip

Если у вас есть статическая сборка, перетащите папку во вкладку Local file или загрузите .zip размером до 30 МБ и выберите HTML-страницы для импорта. Файлы открываются из памяти в изолированном браузере и удаляются сразу после завершения импорта.

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

Статичный набор фреймов полезен, но клиенты и заинтересованные стороны быстрее понимают сайт, когда могут по нему пройтись. HTML to Frames сохраняет уже существующую навигацию:

• Ссылки между импортированными страницами становятся взаимодействиями Navigate: клик по Pricing во фрейме главной ведёт во фрейм с тарифами.
• Остальные ссылки сохраняют действие Open link и открываются в браузере.
• Фиксированные и sticky-шапки остаются на месте при прокрутке в режиме Present.
• Области с горизонтальной прокруткой, например карусели и полосы вкладок, прокручиваются вбок.

На Pro элементы с hover-состоянием становятся наборами компонентов с вариантами Default и Hover и взаимодействием on-hover, поэтому кнопки и пункты меню реагируют на наведение.

Так импортированный сайт становится отправной точкой, которую можно показать как есть. Пройдитесь по текущему опыту, отметьте проблемы комментариями, затем продублируйте фреймы и начните редизайн рядом с оригиналом. Каждый фрейм хранит исходный URL, поэтому любую страницу можно позже импортировать заново и сравнить живой сайт с предложением. Подробнее о структуре страниц — в разделе HTML to frame.

Связи прототипа создаются только между страницами, вошедшими в импорт, поэтому добавление страниц через Import linked pages расширяет и кликабельный сценарий.

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

Типичный процесс выглядит так:

1. Перед питчем: импортируйте ключевые шаблоны клиента и включите Styles & variables, чтобы увидеть реально используемую систему цветов и типографики.
2. На этапе исследования: покажите клиенту кликабельный импорт и отмечайте болевые точки прямо на фреймах.
3. Во время редизайна: дублируйте фреймы и меняйте их на месте; компоненты, извлечённые из повторяющихся структур, ускоряют глобальные правки.
4. При передаче: заново импортируйте изменённые страницы, чтобы убедиться, что именно вышло в продакшн.

Тариф Team даёт пять мест на общем лицензионном ключе по стартовой цене $22 в месяц и до четырёх экранов на импорт. Это подходит небольшой студии, где несколько дизайнеров параллельно импортируют сайты клиентов.

Агентства, работающие с клиентскими проектами, часто спрашивают и о данных. Страницы рендерятся в изолированном браузере, результат выдаётся один раз и никогда не записывается на диск. Полная картина — на странице безопасности.