Воссоздавать сайт в Figma вручную — это боль: сохранить картинки, подобрать шрифты, повторить отступы, выстроить сетку, пересобрать хедер, подвал и карточки. На всё это уходит много времени, хотя по факту вам часто нужен не «идеальный клон», а рабочая копия для анализа, редизайна или быстрого вдохновения.
Плагин HTML.to.design решает эту задачу автоматически — он импортирует любую веб-страницу в редактируемый макет прямо в Figma. Вы вставляете ссылку — и уже через несколько секунд получаете аккуратный фрейм со всеми текстами, иконками и изображениями.
Что такое HTML.to.design
HTML.to.design — это плагин для Figma, который «переводит» HTML-страницу в Figma-файл. Он извлекает из сайта векторные фигуры, текстовые блоки, изображения и стили, превращая их в редактируемые элементы.
Плагин работает как по ссылке (URL), так и через браузерное расширение — последним удобно импортировать страницы, требующие входа в систему или с динамическим контентом.
Бесплатная версия позволяет выполнить до 10 импортов в месяц, а в PRO-версии доступны:
- неограниченные импорты;
- импорт сразу нескольких экранов (desktop, tablet, mobile);
- улучшенное качество изображений.
Как установить плагин HTML.to.design
- Откройте Figma и перейдите во вкладку Community → Plugins.
- В поиске введите HTML.to.design.
- Нажмите Try in… и выберите проект, в который хотите импортировать сайт.
- Для быстрого доступа к плагину в дальнейшей работе нажмите Save, если же хотите воспользоваться плагином прямо сейчас нажмите Run.
- После сохранения плагин появится в разделе Plugins → Saved Plugins.
💡 Установить можно также через официальную страницу HTML.to.design (откроется в Figma Community).
Интерфейс плагина
После запуска вы увидите простое окно импорта.
В нём нужно:
- обязательно вставить ссылку на сайт, который вы хотите импортировать
- выбрать размер экрана (viewport), если вам нужен определенный экран.
- указать тему (светлая/тёмная) и язык (если вам не нужны какие то специфичные темы и язык, можете не трогать данный параметр),
- нажать Import.
Через несколько секунд в проекте появится фрейм с редактируемым макетом. Все элементы — отдельные слои, готовые к правке.
После импорта вы можете:
- анализировать композицию и типографику;
- выделять компоненты;
- заменить тексты и шрифты под свой проект;
- собрать свою библиотеку UI-элементов.
Чтобы довести импортированный макет до идеального состояния, важно правильно его отредактировать — убрать лишние стили, оптимизировать слои и привести всё к единой системе.
👉 Как редактировать (дублировать) чужие макеты в Figma
Где брать готовые макеты под Figma
Не всегда есть смысл импортировать сайты вручную. Иногда проще взять уже адаптированные шаблоны с готовой сеткой и стилями.
👉 Каталог макетов сайтов в Figma — коллекция готовых лэндингов, интернет-магазинов и UI-систем, которые можно использовать как основу для редизайна или вдохновения.
Итоги
- HTML.to.design позволяет импортировать сайты в Figma за секунды.
- Плагин сохраняет структуру, текст, иконки и шрифты.
- Есть гибкие настройки: тема, язык, viewport и поддержка расширения.
- Импортированный макет можно сразу редактировать и использовать для анализа.
- Для практики и вдохновения пригодятся:
