Как быстро перенести любой сайт в фигму
Когда встает задача преобразовать сайт в редактируемый макет в Figma, можно предположить, что придется все элементы воссоздавать руками. На самом деле это не так. Импортировать сайт в редактируемый макет можно за минуту, если использовать специальные плагины.
Как это работает? Всё просто:
- Откройте меню плагинов в Figma и найдите нужный плагин (о некоторых из них рассказываем ниже).
- Введите URL страницы, которую нужно переместить в Figma.
- Нажмите «Импортировать».
Обратите внимание! Плагины по выгрузке сайтов не дают идеального результата. Например, у части плагинов есть проблема с импортом интерактивных элементов сайта. Но использовать эти плагины как отправную точку — вполне сносно. Например, пользователи Reddit отмечают, что такие плагины экономят время и бюджет клиента, так как элементы сайта не нужно создавать с нуля.
html.to.design
Популярный среди дизайнеров плагин, который позволяет выполнять только одну задачу — импортировать сайты в Figma. Имеет бесплатную и платную версии. Пройдемся по особенностям каждой.
Бесплатная версия позволяет:
- Импортировать 10 веб-страниц каждые 30 дней.
- Настраивать базовые параметры. Вы можете выбрать разрешение, в котором хотите выгрузить сайт: десктоп, планшет, смартфон или пользовательское; тему (светлую или тёмную). Можно выгрузить несколько вариантов одновременно, например, светлую и тёмную темы сайта.
- Настраивать дополнительные параметры. Вы можете выбрать, хотите ли вы создать стили на основе импортируемой страницы или применить существующие локальные стили к результату; нужно ли импортировать страницы с уже настроенным Auto Layout; заменить отсутствующие шрифты и так далее.
Платная версия имеет то же функционал, что и бесплатная, но с некоторыми изменениями. Во-первых, вы можете импортировать столько страниц, сколько требуется. А во-вторых, платная версия ещё разрешает:
- Выгружать изображения в высоком качестве.
- Импортировать несколько 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 в месяц.
Этот плагин я пока не использовала на постоянной основе. Мне вполне хватает плагинов с частично бесплатным функционалом, о которых я рассказала выше.
А какими плагинами для импорта сайтов пользуетесь вы? Делитесь своими находками и мнением в комментариях!
Мы каждую неделю делимся классными плагинами Figma в наших социальных сетях!
А есть фигма в тильду за один клик?
Конечно, гуглится за 5 секунд. Инструкция есть в самом справочнике Тильда
В 99% случаев перенос реального сайта в Figma абсолютно бесполезная затея.
Все плагины переносят кучу мусора в слоях в саму Figma, у вас постоянно будут проблемы с неперенесенными стилями и в лучшем случае вы просто получите кашу, которая на первый взгляд похожа на оригинальный сайт. Юзаемым для дизайнера эта каша всё равно не будет и зачем это всё нужно — загадка.