Как быстро перенести любой сайт в фигму
Когда встает задача преобразовать сайт в редактируемый макет в Figma, можно предположить, что придется все элементы воссоздавать руками. На самом деле это не так. Импортировать сайт в редактируемый макет можно буквально за минуту, если использовать специальные плагины.
Как это работает? Всё просто:
- Откройте меню плагинов в Figma и выберите нужный инструмент (о некоторых из них рассказываем ниже).
- Введите URL страницы, которую нужно импортировать в Figma.
- Нажмите «Импортировать» — и готово!
Через минуту у вас будет редактируемый макет сайта прямо в Figma. Звучит здорово, правда? Давайте разберёмся, какие плагины можно использовать для этой задачи. Я перечислю те, с которыми сама когда-то имела дело. О некоторых плагинах я уже рассказывала в своем блоге для начинающих дизайнеров в Telegram и ВК.
Обратите внимание, что плагины по выгрузке сайтов не дают идеального результата. Например, у части плагинов есть проблема с импортом интерактивных элементов сайта. Но сделать каркас для дальнейшей работы они вам помогут.
html.to.design
Популярный среди дизайнеров плагин, который позволяет выполнять только одну задачу — импортировать сайты в Figma. Имеет бесплатную и платную версии. Пройдемся по особенностям каждой.
Бесплатная версия позволяет:
- Импортировать 10 веб-страниц каждые 30 дней.
- Настраивать базовые параметры: разрешение экрана (десктоп, планшет, смартфон или пользовательское), тему (светлую или тёмную). Позволяет выгрузить несколько вариантов за раз. Например, вы можете импортировать страницу сразу как в темной, так и в светлой версии.
- Настраивать дополнительные параметры. Вы можете выбрать, хотите ли вы создать стили Figma на основе импортируемой страницы или применить существующие локальные стили к результату, импортировать страницы с уже настроенным Auto Layout, заменить отсутствующие шрифты и так далее.
Платная версия имеет то же функционал, что и бесплатная, но с некоторыми изменениями. Во-первых, снимает ограничения по количеству страниц, которые вы можете импортировать в Figma. А во-вторых, ещё разрешает:
- Выгружать изображения высокого качества.
- Импортировать несколько URL-адресов одновременно.
- Быстро выполнять повторное импортирование страницы.
- Получать поддержку в Discord в любое время.
Кстати! Если вам нужно выгрузить приватные или защищенные от входа веб-страницы, которые, к примеру, доступны только после авторизации или находятся на стадии разработки, воспользуйтесь расширением для Chrome. Оно поможет справиться с этой задачей.
За последний год в большинстве случаев я использовала только этот плагин. Десяти бесплатных выгрузок в месяц и большинства доступных в бесплатной версии настроек вполне хватает для продуктивной работы.
Codia AI Web2Figma: Import Web to Editable Figma
Этот плагин чем-то похож на предыдущий. Он тоже позволяет выполнять только одну задачу — импортировать сайты в Figma, имеет бесплатную и платную версии. Пройдемся по особенностям каждой.
Бесплатная версия позволяет:
- Импортировать 10 веб-страниц каждый месяц.
- Настраивать базовые параметры: разрешение (десктоп, планшет, смартфон или пользовательское), тему (светлую или тёмную), заменить отсутствующие шрифты. Позволяет выгрузить за один раз несколько вариантов страницы, например, и в темной, и в светлой версии.
Платная версия снимает ограничения по количеству страниц, которые вы можете импортировать в Figma и, помимо доступных в бесплатной версии настроек, ещё позволяет:
- Импортировать несколько URL-адресов за раз.
- Выгружать изображения более высокого качества.
- Получать приоритетную поддержку.
Обратите внимание! Перед использованием плагина потребуется вход в аккаунт сервиса.
Кстати! Если вам нужно выгрузить приватные или защищенные от входа веб-страницы, которые, к примеру, доступны только после авторизации, воспользуйтесь расширением для Chrome. Оно поможет справиться с этой задачей.
Об этом плагине я узнала недавно. Радует наличие бесплатного функционала, который неплохо помогает справляться с задачей импорта сайта в Figma. Но, кажется, что плагин работает только с VPN. Если VPN выключить, окно плагина долго подгружается, а при импорте сайта сервис выдает ошибку.
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Плагин, основной функцией которого является преобразование проектов Figma в чистый и адаптивный HTML-код. Но также он позволяет импортировать сайты в редактируемые макеты в Figma. На этой функции мы подробнее и остановимся.
Вот несколько основных мыслей по этому плагину:
- Позволяет выгрузить один URL за раз.
- На данный момент имеет небольшое количество настроек: можно выбрать разрешение экрана (десктоп, планшет, смартфон или пользовательское) и разрешить плагину преобразовывать слои во фреймы.
Кстати! Если вам нужно выгрузить приватные или защищенные от входа страницы, которые, к примеру, доступны только после авторизации, воспользуйтесь расширением для Chrome. Оно поможет справиться с этой задачей.
Если по каким-то причинам я не могу воспользоваться плагином html.to.design, то использую этот. Да, тут попроще функционал и нельзя за раз выгрузить страницу в разных разрешениях экрана. Но как инструмент для подстраховки — отлично работает!
Web to Figma
Плагин, специализирующийся на импорте сайтов в Figma. Позволяет выгружать как целые веб-страницы, так и их отдельные элементы. Не подразумевает бесплатного использования.
Бесплатно вы можете только попробовать инструмент — выгрузить страницу в светлой теме в одном из трех разрешений: десктоп, планшет или смартфон. Остальной функционал доступен только после оформления платной подписки. Он включает в себя следующие возможности:
- Выгрузить веб-страницу в темной или светлой теме (или сразу в двух вариантах за раз).
- Настроить пользовательское разрешение экрана.
- Воспользоваться дополнительным функционалом: импортировать компоненты, иконки, стили, библиотеки.
На официальном сайте я не нашла информации о том, сколько выгрузок можно сделать в бесплатном тестовом режиме. Но как показала практика — не более трех. Если вы хотите пользоваться плагином в неограниченном режиме, придется оформить подписку, которая на момент написания статьи начинается от $9 в месяц.
Этот плагин я пока не использовала на постоянной основе, так как на данный момент для выполнения задач мне вполне хватает плагинов с частично бесплатным функционалом, о которых я рассказала выше.
А какими плагинами для импорта сайтов пользуетесь вы? Делитесь своими находками и мнением в комментариях!
Чаще полезными плагинами я делюсь в своих блогах для начинающих дизайнеров в Telegram и ВК.
А есть фигма в тильду за один клик?
В 99% случаев перенос реального сайта в Figma абсолютно бесполезная затея.
Все плагины переносят кучу мусора в слоях в саму Figma, у вас постоянно будут проблемы с неперенесенными стилями и в лучшем случае вы просто получите кашу, которая на первый взгляд похожа на оригинальный сайт. Юзаемым для дизайнера эта каша всё равно не будет и зачем это всё нужно — загадка.