HTML в Figma: импорт любого сайта в редактируемые слои

Установите бесплатный плагин Codia AI Web2Figma из Figma Community и запустите его в любом файле Figma. Вставьте URL страницы, выберите вьюпорт (десктоп, планшет или мобильный) и светлую или тёмную тему, затем запустите импорт. Страница появится на холсте в виде редактируемых слоёв Figma. Страницу, для которой нужен вход в аккаунт, сначала сохраните через расширение Chrome.

Да, начать можно бесплатно. Бесплатный план включает 10 кредитов Transform каждый месяц, банковская карта не нужна. Pro добавляет безлимитный импорт, обработку изображений в более высоком разрешении и импорт нескольких URL или файлов Codia за раз.

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

Да. Установите расширение Chrome Codia AI Web2Figma, откройте страницу в Chrome, войдя в аккаунт, и сохраните её — расширение создаст файл .codia. Затем загрузите или вставьте этот файл в поле импорта из расширения Chrome в плагине. Так можно перенести дашборды, админ-панели, тестовые стенды и другие страницы, до которых не дотягивается импорт по URL.

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

Текст превращается в редактируемые текстовые слои, изображения — в заливки изображением, а секции, фоны, обводки и градиенты — во фреймы и фигуры, повторяющие вёрстку страницы. Codia снимает страницу такой, какой она выглядит в момент импорта, поэтому анимации, скрипты и интерактивность не переносятся.

Да. Вместо URL загрузите в поле импорта из расширения Chrome в плагине файл .html или .htm либо .zip с экспортом сайта вместе с CSS и изображениями. Если в ZIP несколько страниц, вы выберете, какую импортировать. Это удобно для локальных сборок, HTML-экспортов и страниц, которые ещё не опубликованы.