HTML to design: процесс редизайна сайта в Figma для агентств

Обычно дизайн движется в одну сторону: макет в Figma становится HTML в браузере. Но много реальной работы идёт в обратном направлении. Клиент даёт вам живой сайт и просит редизайн. Продукт за три года релизов ушёл далеко от исходных макетов. Разработчик собрал фичу прямо в коде, и теперь дизайн-команде нужно взять её под контроль.

Это обратное направление — HTML to design — означает взять то, что уже существует в браузере, и превратить обратно в редактируемый макет. При правильном подходе это экономит дни ручной пересборки и даёт нечто лучшее, чем мудборд из скриншотов: рабочий файл с настоящими фреймами, текстом, стилями и компонентами.

В этой статье — практический процесс для дизайнеров и агентств, от первого аудита до кликабельного прототипа, с помощью HTML to Frames.

Что на самом деле значит «HTML to design»

Под этим понимают любой процесс, который превращает живой код или сайт в макет, который можно редактировать. Есть три основных способа:

1. Ручная пересборка — открыть сайт, измерить его в DevTools и заново нарисовать каждый фрейм вручную.
2. Скриншоты — снять изображения каждой страницы и вставить их в Figma как референс.
3. Редактируемые слои — конвертировать отрисованную страницу в настоящие фреймы, текст, векторы и изображения Figma.

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

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

Для кого этот процесс

• UI/UX- и веб-дизайнеры, которые делают редизайн, аудит или разбирают сайты для вдохновения.
• Дизайн-агентства, которым нужно за минуты получить сайт клиента в Figma, чтобы подготовить предложение по редизайну. Тариф Team даёт пять мест по одному лицензионному ключу.
• Команды дизайн-систем, которые наводят порядок в цветах, типографике и компонентах, разъехавшихся в продакшене.
• Фронтенд-разработчики, которые хотят передать сборку с localhost дизайнеру в виде файла Figma.
• Продакт-менеджеры и маркетологи, которым для планирования нужны в Figma дашборды за логином или конкретные состояния интерфейса.

Процесс шаг за шагом

Вот последовательность, которую мы рекомендуем. Шаги можно пропускать, но порядок важен: каждый опирается на предыдущий.

Шаг 1: Проведите аудит того, что есть

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

• главная страница,
• одна-две ключевые посадочные или продуктовые страницы,
• цены или оформление заказа,
• шаблон контента, например статья блога,
• экраны за логином, если они входят в объём редизайна.

Запишите и нужные состояния — открытое меню навигации, форму с ошибками валидации, заполненную корзину. До них не добраться по одному URL; их вы снимете с помощью расширения для Chrome.

Шаг 2: Импортируйте адаптивный набор

Теперь заберите страницы. Для публичных страниц:

1. Откройте HTML to Frames и выберите Multiple (несколько ссылок).
2. Вставьте до 10 ссылок. Они обрабатываются по очереди, и каждая страница становится одной строкой на холсте.
3. Выберите Responsive set (адаптивный набор) — Desktop, Tablet и Mobile в один клик (до четырёх экранов за импорт на Pro и Team).
4. Включите Hide cookie banners & popups, чтобы оверлеи не перекрывали контент.
5. Включите Styles & variables (Pro), если на следующем шаге планируете извлечь дизайн-систему.

Экран Desktop использует Site width (ширину сайта): плагин измеряет реальную дизайнерскую ширину страницы, а не угадывает её. Сайты во всю ширину приходят в 1920 с центрированным контентом, сайты с контейнером — в ширине контейнера, «резиновые» — в 1440. У одного сайта одна ширина на всех страницах.

Помните правило подсчёта: один импорт = одна страница со всеми её экранами. Адаптивный набор из пяти страниц — это пять импортов, а не пятнадцать.

После первого импорта функция Import linked pages позволяет выбрать из списка другие страницы того же сайта. Для страниц за логином или localhost используйте расширение для Chrome и Send to Figma. Для страниц, которые существуют только в виде файлов, используйте Local file, чтобы импортировать HTML-файл, целую папку сайта или .zip. В руководстве HTML to Figma подробно разобран каждый источник.

Шаг 3: Извлеките дизайн-систему

Здесь импорт перестаёт быть картинкой сайта и становится рабочей основой. С включённым Styles & variables (Pro) плагин создаёт:

• Цветовые переменные из цветов, использованных минимум дважды, и из пользовательских CSS-свойств сайта — --brand-primary превращается в brand/primary — в коллекции Colors · <domain> (до 96).
• Текстовые стили (до 48).
• Стили теней (sm, md, lg, xl).

Две детали делают это практичным в реальных проектах:

• Переиспользование. Если в вашем файле уже есть переменные или стили с совпадающими значениями, плагин использует их. Повторный импорт того же сайта не создаёт ничего нового.
• Snap to my file's styles (привязка к стилям вашего файла, Pro). Если у вас уже есть дизайн-система, импортированные цвета и текст при отсутствии точного совпадения привязываются к ближайшему стилю вашего файла — по перцептивному расстоянию цвета в OKLab и при совпадении семейства и начертания шрифта и размере в пределах 10%.

Если сайт поддерживает тёмную тему, выберите Light + Dark (Pro). Страница снимается в обеих цветовых схемах, и вы получаете одну коллекцию переменных с режимами Light и Dark, а также тёмную копию каждого экрана. Учтите, что файлы Figma Free допускают один режим на коллекцию, поэтому там тёмный режим пропускается с пояснением.

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

Шаг 4: Превратите повторы в компоненты

С Components & hover states (Pro) повторяющиеся структуры — карточки, кнопки, пункты меню — становятся компонентами и инстансами с сохранением переопределений текста и изображений. Элементы с hover-состоянием превращаются в набор компонентов с вариантами Default и Hover и прототипным взаимодействием on-hover. Главные компоненты собираются во фрейме Components · <site>.

Так вы получаете инвентарь компонентов, который можно упорядочить. Типичные следующие шаги:

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

Шаг 5: Итерируйте на реальной структуре

Теперь — дизайн. Поскольку вёрстка приходит вложенными фреймами с Auto Layout там, где плагин смог его проверить, изменения ведут себя так же, как в файле, собранном вами самостоятельно:

• меняете заголовки — и стек перестраивается,
• меняете gap или padding одной секции,
• меняете цветовую переменную — и обновляются все её использования,
• меняете размер фрейма — и Fill и Center делают своё дело.

В наших тестах на реальных сайтах Auto Layout определялся примерно на 86–97% фреймов. Фреймы, оставшиеся с абсолютным позиционированием, получают разумные constraints (ограничения), а экран результатов показывает, почему фрейм остался абсолютным. Подробности — в статье про движок Auto Layout.

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

Шаг 6: Прототипируйте

Импортированные страницы уже частично связаны:

• Ссылки остаются кликабельными (Open link).
• Ссылки между импортированными страницами становятся взаимодействиями Navigate, так что многостраничный импорт — это кликабельный сценарий прямо из коробки.
• Фиксированные и sticky-шапки и области горизонтальной прокрутки работают в режиме Present.
• Hover-варианты из шага 4 приходят с взаимодействиями on-hover.

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

Шаг 7: Поддерживайте актуальность

Сайты продолжают меняться. Каждый импортированный фрейм хранит исходный URL, поэтому Re-import (повторный импорт) — это один клик, когда живая страница меняется. Поскольку существующие переменные и стили переиспользуются, повторный импорт не засыпает файл дубликатами.

Сценарии на практике

Предложения агентств по редизайну

Агентству, которое продаёт редизайн, нужно быстро получить текущий сайт клиента в Figma. Импортируйте ключевые страницы адаптивным набором, извлеките дизайн-систему — и у вас есть фактический раздел «вот что у вас сейчас» с реальной инвентаризацией цветов и типографики ещё до того, как вы покажете хоть одну новую идею. Тариф Team даёт пять мест, так что несколько дизайнеров могут работать по одной лицензии. См. Website to Figma и руководство по редизайну.

Аудит расхождений между дизайном и кодом

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

Фичи, собранные разработчиками

Разработчик сделал прототип фичи на localhost. Снимите его расширением для Chrome, отправьте в Figma — и дизайнер доработает его в том же файле, что и остальной продукт.

Страницы, сгенерированные ИИ

Если отправная точка — HTML из Claude или Cursor, подключите ассистента через MCP, и страница попадёт в ваш открытый плагин. См. AI to Figma.

Обучение и разбор

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

Конфиденциальность при работе с клиентами

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

С чего начать

Быстрее всего понять, подходит ли вам этот процесс, — попробовать его на одной реальной странице, с которой вы работаете. Free включает 10 импортов в месяц; Pro добавляет описанные выше функции дизайн-системы и компонентов. Сравните тарифы на странице цен, загляните в документацию или посмотрите сравнение с другими инструментами на странице альтернатив.