Как импортировать сайт в проект — HTML в Figma [Плагин]

Содержание скрыть

3 Некоторые особенности, которые стоит учитывать

Когда речь заходит о доработке уже действующего сайта, часто оказывается, что нет не только исходников макетов (или они есть только в PSD, что на текущий момент — более чем реалистичный вариант), но и какой либо еще информации по проекту: ни UI-кита, ни бренд-бука и т.д.

Быстрым и очень эффективным решением этой проблемы станет плагин HTML To Figma, который позволяет импортировать по слоям любую доступную страницу html из сети.

Где скачать: //www.figma.com/c/plugin/747985167520967365/HTML-To-Figma

Поддержка: //github.com/builderio/html-to-figma/issues

Как устанавливать плагины: //svgpng.ru/novosti/testiruem-plaginy-dlja-figma-chast-1/

Ограничения плагина

Не поддерживаются псевдоэлементы и внешние элементы вроде iframe

Поддерживаются не все свойства CSS

Не поддерживается анимация и видео

Шрифты должны быть уже загружены в Figma

Как импортировать HTML в Figma

Чтобы воспользоваться плагином, вам потребуется только страница в проекте, потому что фрейм он создаст сам.

Вызываем плагин
Выбираем разрешение из предустановленных значений (десктоп, планшет, телефон) или задаем свои
Нажимаем IMPORT

Работа плагина занимает порядка 10 секунд, после чего появляется новый фрейм со страницей.

Некоторые особенности, которые стоит учитывать

Плагин делает копию всей страницы
Плагин никак не группирует и не называет слои
На тяжелый сайты плагин тратит до минуты времени на обработку

Наш отзыв

Абсолютный мастхэв для тех, кто практикует работу с дизайном уже действующих веб-сайтов. Пока что импорт происходит во многих случаях не идеально, но это всё равно позволяет быстро начать работать с чужим дизайном. Проект является опен-сорс, поэтому есть основания полагать, что его ожидает дальнейшее развитие.

Без тени сомнения ставим плагину 10 из 10 и оставляем в коллекции.