HTML to design: восстановите дизайн-файл, от которого ушёл ваш код

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

HTML to Frames считывает значения прямо из браузера, поэтому отступы, цвета и размеры шрифтов точные, а не приблизительные. SVG-иконки становятся редактируемыми векторами. Макет переводится в Auto Layout и проверяется с допуском 2 px, а абсолютное позиционирование остаётся только там, где Auto Layout что-то сдвинул бы.

Это меняет первый день редизайна. Вместо того чтобы тратить его на реконструкцию, команда начинает с точной копии текущего продукта и тратит время на решения:

• Какие цвета реально используются, а какие — случайные почти-дубликаты?
• Какие компоненты повторяются и сколько их вариантов живёт в продукте?
• Где выпущенный макет отличается от задуманной системы?

Как агентства используют это для подготовки предложений, рассказано в руководстве по редизайну: сайт в Figma.

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

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

Цвета

Цвет становится переменной, если используется минимум дважды или если сайт задаёт его как CSS custom property. Имена custom properties сохраняются как структура: --brand-primary превращается в brand/primary. До 96 переменных цвета попадают в коллекцию Colors · <domain>.

Текст и тени

До 48 текстовых стилей создаются из типографики, реально отрисованной на странице. Тени группируются в стили sm, md, lg и xl.

Сначала переиспользовать, потом создавать

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

Light + Dark

Со цветовой схемой Light + Dark страница захватывается при обоих значениях prefers-color-scheme, а одна коллекция получает два режима. Файлы Figma Free допускают только один режим на коллекцию, поэтому в этом случае тёмный режим пропускается с пометкой.

Всё это опционально. Выключите Styles & variables — и получите простые слои с «сырыми» значениями; иногда именно это и нужно для быстрого референса или разового разбора.

Продакшен-код редко идеально совпадает с дизайн-системой. Кнопка может использовать #2161E9 вместо токена #2160E8, а заголовок — 31 px вместо 32 px. Если импортировать такие значения буквально, файл утонет в почти-дубликатах стилей.

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

Это полезно в трёх ситуациях:

1. Аудиты, когда вы хотите увидеть продукт, выраженный в официальной системе.
2. Редизайны, которые должны быть «в системе» с первого фрейма.
3. Разбор конкурентов, когда вы перестилизуете чужой макет своими токенами.

Snap, Styles & variables и Components & hover states — функции Pro. Плагин никогда не читает содержимое вашего файла сверх необходимого: он записывает слои и читает только метаданные собственных фреймов, как описано на странице безопасности.

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