Привет коты! ☀️ Делюсь на мой взгляд прикольной новостью: у Figma появилось свое официальное расширение для Chrome, чтобы перенести сайт в Figma.
Вы спросите, зачем это вообще может быть нужно?
Например, когда надо: — поставили задачу на редизайн, а в голове пустота, и хочется начать работу не с белого листа; — собрать мудборд или бенчмарк без миллиона скриншотов, которые будут грузиться потом миллиард лет, а нормальными страницами/блоками; — посмотреть, как собрана страница на реальном сайте; — похерились исходники, а надо принести в макет текущую продовую версию страницы; — поправить тексты/структуру и сразу увидеть, как это будет выглядеть, а инструменты разработчика в браузере вам пока неизвестны.
Раньше для похожих задач пользовались плагинами типа html.to.design и Web to Figma. Они умеют превращать сайт в редактируемые слои в Figma: тексты остаются текстами, картинки — картинками, блоки — блоками. Не всегда идеально, но сильно быстрее, чем собирать все вручную.
1. html.to.design
Это, кажется, самый мощный комбайн из этой троицы.
Что умеет: — импортировать сайт по ссылке; — выбирать версии под разные экраны: desktop, tablet, mobile; — импортировать через свое Chrome-расширение приватные страницы и страницы, доступные только после авторизации; — импортировать HTML/CSS код; — импортировать файлы: html, mhtml, zip со страницами и даже email-файлы; — переимпортировать страницы; — работать с AI через MCP, например с Claude Desktop и Cursor.
Плюсы: Очень много сценариев. Подходит не только для “забрать страницу по ссылке”, но и для более сложных задач: закрытые страницы, локальные файлы, код, несколько версий экранов, AI-автоматизация.
Минусы: Бесплатный план ограничен по количеству импортов, а часть самых вкусных возможностей уходит в Pro. Ну и, как у всех таких инструментов, сложная верстка может перенестись неидеально — потом все равно придется руками докручивать сборку.
2. Web to Figma
Тоже не просто “вставил ссылку и получил макет”.
Что умеет: — импортировать сайт по ссылке через плагин; — импортировать HTML-код; — через свое Chrome-расширение захватывать всю страницу или отдельный компонент; — сохранять захваченные страницы и блоки в Collections; — потом открывать коллекции в Figma и добавлять нужное в макет.
Плюсы: Классный сценарий для ресерча и вдохновения. Можно собирать библиотеку удачных решений, паттернов, блоков, лендингов, мудбордов — и потом возвращаться к ним в Figma. То есть это не только про “перенести сайт”, но и про “собрать себе визуальную насмотренность в рабочем виде”.
Минусы: Путь через расширение чуть длиннее: захватить → сохранить в коллекцию → открыть плагин → добавить в Figma. Плюс важные штуки вроде безлимитных коллекций, импорта иконок, стилей и кастомных размеров viewport — в Pro-версии.
3. Официальное Figma Chrome Extension
Что умеет: — открыть сайт в Chrome; — выбрать всю страницу или конкретный элемент; — перенести в Figma редактируемыми слоями.
Плюсы: Главный плюс — это официальное решение от самой Figma. Не отдельный шаманский комбайн, не сторонний сервис, не “а вдруг оно завтра отвалится”, а нативный сценарий: браузер → Figma. Для быстрых задач звучит очень удобно.
Минусы: Пока это beta. И по возможностям официальное расширение пока проще, чем вышедшие раньше аналоги. Тут нет такого количества продвинутых сценариев: импорта файлов, HTML/CSS editor, коллекций, bulk import, MCP и прочей тяжелой артиллерии.
Я немного потестила: автолейаут при сохранении страницы еще нормально не реализован, видимо, стили адаптива он пока интерпретировать не может.
Но мой поинт в том, что хоть Figma не изобрела что-то принципиально новое, нравится сам продуктовый сдвиг: Figma забирает этот сценарий себе внутрь.
Обнимаю, ваша Даша 🤗 которая верит в прекрасное будущее, где сайт можно будет нормально перенести в Figma, а из Figma — обратно в сайт. А с учетом Figma Make и Figma Sites это будущее, кажется, уже очень близко.
