Website to Figma: перенос сайта в Figma для редизайна агентством

Любой редизайн начинается с одной и той же скучной задачи: перенести текущий сайт клиента в дизайн-инструмент. Скриншоты делаются быстро, но мертвы с самого начала. Ручная пересборка страниц точна, но съедает дни, которые лучше потратить на сам редизайн.

В этом руководстве показано, как перенести сайт в Figma (website to Figma) в виде настоящих редактируемых слоёв с помощью HTML to Frames и как превратить этот импорт в предложение по редизайну, которое клиент поймёт с первого взгляда. Текст написан для агентств и дизайнеров-фрилансеров, но процесс так же хорошо работает для in-house-команд, которые проводят аудит собственного продуктового сайта.

Зачем вообще переносить текущий сайт в Figma?

Предложение по редизайну — это аргумент. Вы говорите клиенту: «вот что у вас есть, вот каким это должно быть, и вот почему». Аргумент гораздо сильнее, когда часть «что у вас есть» точна и редактируема.

• Вы проводите аудит реального сайта. Отступы, типографическая шкала, использование цветов и расползание компонентов видны в панели слоёв, а не угадываются по скриншоту.
• Вы делаете редизайн поверх существующей структуры. Меняете hero, стиль карточек, перерабатываете навигацию — а остальная страница остаётся нетронутой для контекста.
• Вы показываете «до» и «после» рядом. Тот же размер фрейма, тот же контент, другой дизайн. Клиенты понимают сразу.
• Вы экономите время на пересборке. Часы, которые ушли бы на перерисовку текущего сайта, уходят на поиск вариантов.

HTML to Frames превращает страницу в настоящие фреймы, текст, векторы и изображения Figma, а не в плоскую картинку. Подробнее об этой разнице — в статье HTML to canvas против редактируемых слоёв.

Website to Figma и URL to Figma: в чём разница?

Люди ищут оба варианта, и на практике имеют в виду один и тот же процесс. URL to Figma обычно описывает механику: вставил одну ссылку — получил один дизайн. Website to Figma описывает масштаб: несколько страниц одного сайта, часто в разных размерах экрана. HTML to Frames покрывает оба сценария — от одиночного импорта URL to Figma до полного захвата website to Figma со связанными страницами.

Шаг 1: спланируйте, какие страницы захватить

Прежде чем открывать Figma, составьте список страниц, на которых держится история редизайна. Для большинства маркетинговых сайтов это:

1. Главная страница
2. Одна ключевая посадочная или продуктовая страница
3. Цены
4. О компании или команда
5. Список статей блога и одна статья
6. Контакты или страница с ключевой формой

Вся карта сайта нужна редко. Нужна одна страница на шаблон, потому что редизайнить вы будете именно шаблоны. Обычно хватает шести–десяти страниц — ровно один Multiple-импорт.

Шаг 2: импортируйте несколько страниц за раз

Откройте плагин и выберите источник Multiple (несколько ссылок). Вставьте до 10 ссылок: они обрабатываются последовательно, и каждая страница становится отдельной строкой на холсте. Multiple-импорт доступен на любом тарифе, включая Free.

Для работы агентства важны несколько деталей:

• Один сайт = одна ширина. Desktop использует Site width: плагин измеряет реальную дизайн-ширину страницы в момент импорта. Full-bleed-дизайны приходят в ширине 1920 с контентом по центру, сайты с контейнером — в ширине контейнера (например, 1200, 1280 или 1440), резиновые сайты — в 1440. При многостраничном импорте все страницы сайта получают эту ширину, поэтому строки выстраиваются ровно.
• Имена фреймов читаемы. Фреймы называются по шаблону domain/path — Desktop (1920), без протокола и www, так что страницы легко различать в панели слоёв.
• Cookie-баннеры и попапы можно скрыть по запросу, а анимации замораживаются ради чистого кадра. Сайт захватывается так, как его видит обычный посетитель.

Импортируйте связанные страницы вместо поиска URL

Если списка страниц ещё нет, сначала импортируйте главную. После импорта используйте импорт связанных страниц: выберите другие страницы того же сайта из списка, и они импортируются как Multiple-импорт. Это самый быстрый способ забрать основные пункты навигации, не копируя URL из браузера.

Шаг 3: захватите адаптивный набор

Клиенты всё чаще первым делом спрашивают: «а как это выглядит на телефоне?» Ответьте настоящими фреймами.

Включите Responsive set (адаптивный набор), чтобы захватить Desktop + Tablet + Mobile в один клик. Tablet — 768, Mobile — 390, есть ещё Laptop — 1280. На Pro и Team можно захватывать до 4 экранов на импорт и задать Custom width, если аналитика клиента показывает нестандартный брейкпоинт. Экраны одной страницы захватываются параллельно.

Тарификация остаётся простой: 1 импорт = 1 страница со всеми её экранами. Desktop, Tablet и Mobile главной страницы считаются одним импортом.

Шаг 4: добавьте Light + Dark, если сайт это поддерживает

Если сайт клиента реагирует на prefers-color-scheme, опция Light + Dark (Pro) захватывает страницу в обоих режимах. Вы получаете одну коллекцию переменных с режимами Light и Dark, а также тёмную копию каждого экрана. Это сильная отправная точка, если тёмная тема входит в бриф редизайна, и сразу видно, какие компоненты никогда не проектировались под тёмный фон.

Учтите: в файлах Figma на бесплатном плане допускается один режим на коллекцию, поэтому в таком файле тёмный режим пропускается с пометкой.

Шаг 5: превратите импорт в аудит

Теперь импорт становится рабочим файлом. Прежде чем что-либо редизайнить, потратьте час на аудит.

Прочитайте уже существующую дизайн-систему

С Styles & variables (Pro) плагин создаёт цветовые переменные из цветов, использованных два и более раз, и из CSS custom properties сайта, так что --brand-primary становится brand/primary. Вы также получаете текстовые стили и стили теней. Импортируйте тот же сайт дважды — и ничего нового не создастся, потому что существующие переменные и стили переиспользуются при совпадении значений.

Эта коллекция — честная инвентаризация. Тридцать почти одинаковых серых или одиннадцать размеров основного текста говорят в вашем предложении сами за себя.

Найдите повторяющиеся компоненты

С Components & hover states (Pro) повторяющиеся структуры — карточки, кнопки, пункты меню — становятся компонентами и инстансами, а элементы с hover-видом становятся наборами компонентов с вариантами Default и Hover. Мастер-компоненты попадают во фрейм «Components · site». Для аудита этот фрейм — готовый перечень того, что на самом деле используется на текущем сайте.

Проверьте структуру раскладки

Большинство фреймов приходит с Auto Layout, так что их можно ресайзить и перестраивать. Сначала плагин собирает страницу с точностью до пикселя, затем выводит стеки, gap, padding и выравнивание и проверяет позицию каждого дочернего элемента, прежде чем сохранить результат. Если фрейм нельзя чисто выразить, он сохраняет абсолютные позиции с разумными constraints, а экран результатов объясняет почему. Весь механизм описан в статье Auto Layout: как это устроено.

Сохраните эталонный слой

Включите Reference screenshot, чтобы добавить скрытый заблокированный слой, который можно включать для сравнения импорта с живой страницей. Пригодится, когда клиент спросит: «это правда то, что у нас сейчас?»

Шаг 6: соберите предложение по редизайну

Когда есть точное редактируемое «до», предложение почти собирается само.

Дублируйте, затем редизайните

Дублируйте каждую импортированную строку. Оригинал оставьте как Before («до»), копию подпишите After («после») и начинайте редизайн на копии. Поскольку контент — настоящий текст и настоящие изображения, вы работаете с текстами и фотографиями клиента, а не с lorem ipsum.

Покажите доски «до/после»

Разместите фреймы Before и After рядом в одной ширине. Для каждого шаблона добавьте две-три выноски-аннотации с объяснением изменения: понятнее иерархия, короче формы, лучше контраст, объединены компоненты.

Сделайте прототип сценария

Ссылки между импортированными страницами становятся взаимодействиями Navigate, а фиксированные и sticky-шапки продолжают работать в режиме Present. Значит, в одном прототипе можно прокликать текущий сайт, а затем предложение, — это убедительная демонстрация на созвоне.

До и после: что меняется в вашем процессе

Тариф Team и лицензирование для агентств

Над редизайном в агентстве обычно работает больше одного дизайнера. Вот как тарифы соотносятся с этим:

• Free: $0, 10 импортов в месяц, 1 экран на импорт, Multiple-импорт на 10 ссылок. Подходит, чтобы попробовать процесс на небольшом сайте.
• Pro: $7 в месяц по стартовой цене (обычная — $9), безлимитные импорты в рамках fair use, до 4 экранов на импорт, а также стили и переменные, Snap, компоненты и hover, Light + Dark, Custom width, Detailed layers, Reference screenshot и Extra wait. Покупается через собственный checkout Figma.
• Team: $22 в месяц по стартовой цене (обычная — $29), те же функции, что в Pro, 5 мест по общему лицензионному ключу.

Для агентства, которое ведёт несколько редизайнов в месяц, Team держит всех на одном наборе функций, и каждому дизайнеру не нужно покупать отдельно. Подробности — на странице цен.

Пример: двухнедельный спринт редизайна

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

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

Советы, которые экономят время на клиентских сайтах

• Используйте Extra wait (Pro) для сайтов, которые подгружают контент с задержкой, — слайдеров или ленивых секций.
• Выбирайте язык страницы для мультиязычных сайтов; плагин поддерживает 15 языков.
• Сначала разберитесь со шрифтами. Экран Missing fonts предлагает замены до сборки и запоминает ваш выбор для каждого сайта.
• Делайте Re-import в один клик, когда клиент выкатывает изменение посреди проекта. Исходный URL хранится во фрейме.
• Следите за встроенным контентом. Карты, видео без постера и WebGL-canvas приходят как скриншот этого блока, поскольку слоями они стать не могут.
• Страницам за логином нужен путь через браузер. Для клиентских порталов и дашбордов за авторизацией используйте расширение для Chrome; см. наш гайд по localhost и страницам за логином.

Данные клиента и приватность

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

Итог

Перенос сайта клиента в Figma в виде редактируемых слоёв превращает первый и самый утомительный этап редизайна в короткий импорт. Вы получаете точное «до», аудит на основе реального CSS сайта и файл, в котором предложение естественно растёт рядом с оригиналом. Начните с одного шаблона, проверьте результат, затем перенесите остальной сайт через Multiple и импорт связанных страниц.

Готовы попробовать? Посмотрите все возможности, прочитайте документацию или установите плагин и сделайте первый импорт.