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


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

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

Плагин HTML to Figma
Окно загрузки плагина

Где скачать: //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

Настройка импорта сайта в Фигму
Настройка импорта сайта в Фигму

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

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

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

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

Сайт Tesla, импортированный в Фигму
Сайт Tesla, импортированный в Фигму
  1. Плагин делает копию всей страницы
  2. Плагин никак не группирует и не называет слои
  3. На тяжелый сайты плагин тратит до минуты времени на обработку

Наш отзыв

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

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


Комментариев: 2
  1. Аноним

    :!:

  2. Аноним

    Бе

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки