Figma — отличный инструмент, который быстро становится фаворитом среди UX/UI и веб-дизайнеров. Вы можете быстро и легко создавать адаптивный веб-дизайн с помощью этого бесплатного браузерного инструмента.
В то время как большинство людей создают свои проекты с нуля в Figma, вы можете вдохновиться реальными веб-сайтами и легко создать дизайн Figma прямо из существующей HTML-страницы. Вот как это сделать.
Почему вы должны создавать дизайны Figma из HTML
Есть много причин, по которым вы можете захотеть воспроизвести существующий веб-дизайн как дизайн Figma. Выполнение этого с помощью плагина Figma экономит время, позволяя вам сосредоточиться на тонкой настройке вашего дизайна.
Практика веб-дизайна путем воссоздания существующих веб-страниц — отличный способ учиться у мастеров. Вы также можете использовать инструмент проектирования HTML to Figma, если вы ранее разработали и опубликовали веб-страницу, к которой вы потеряли доступ. Вместо того, чтобы переделывать его с нуля, вы можете сэкономить время, преобразовав его обратно в Figma, чтобы снова работать над ним.
Теперь, когда вы знаете, почему этот инструмент может быть удобен, пришло время узнать, как он работает.
Как превратить любой веб-сайт в дизайн Figma
Чтобы начать любую работу по проектированию на основе Figma, вам необходимо открыть Figma и войти в систему или зарегистрироваться. Вы можете использовать браузерную версию, Фигма, или скачать десктопное приложение; они оба работают одинаково для этого проекта.
Откройте Новый файл дизайна чтобы начать свой дизайн-проект HTML to Figma.
Шаг 1. Загрузите плагин html.to.design
Чтобы иметь возможность напрямую конвертировать работающий веб-сайт в дизайн Figma, вам понадобится плагин. На Figma есть бесчисленное множество плагинов, которые помогут с вашими проектами, в том числе плагины для создания мокапов для телефонов и устройств. Вы можете добавить преобразованный дизайн веб-сайта в макет позже, если хотите.
Чтобы скачать плагин, выберите Фигма меню (логотип Figma) > Плагины > Найдите больше плагинов. Кроме того, вы можете выбрать Ресурсы > Плагины. В любом из вариантов введите в строке поиска html.to.design.
Найдите вариант, предоставленный divRIOTS, и выберите Бегать. Это откроет плагин в виде диалогового окна на вашем холсте Figma.
Шаг 2. Вставьте URL-адрес веб-сайта
Плагин html.to.design бесплатный, но предлагает профессиональную версию. Вы можете полностью завершить процесс проектирования с помощью бесплатной версии.
Найдите веб-сайт, для которого вы хотите создать дизайн Figma. Вы должны использовать общедоступный веб-сайт, а не веб-страницу, доступ к которой можно получить, только войдя в систему. Мы собираемся использовать нашу домашнюю страницу MakeUseOf.com.
Скопируйте полный URL-адрес и вставьте его в поле импорта на Figma, заменив заполнитель веб-сайта Apple.
Шаг 3: Загрузите свой дизайн
Вставив URL-адрес веб-сайта, откройте Настройки под полем импорта, чтобы выбрать размер дизайна. Вы можете импортировать дизайн для различных устройств, но вы добьетесь большего успеха при выборе настольного устройства, если вы использовали URL-адрес рабочего стола, и больший успех при использовании мобильного URL-адреса для мобильных устройств.
Существуют также настраиваемые параметры для устройств или размеров, которые недоступны по умолчанию. мы выбираем Макбук Про 14” с Свет тема.
После того, как вы указали свое устройство и настройки просмотра, выберите Импортировать чтобы воплотить ваш HTML-дизайн в Figma. Подождите, пока полоса загрузки не заполнится, чтобы дизайн Figma заполнился.
В зависимости от того, какой веб-сайт вы использовали, вы можете заметить всплывающее окно, объясняющее, что некоторые шрифты необходимо заменить. Это будет связано с авторскими правами на лицензионные шрифты. Figma заменит их шрифтами, к которым у вас есть доступ.
Выйдите из любых всплывающих окон, затем выйдите из диалогового окна плагина, чтобы увидеть свой новый дизайн в его полной форме.
Шаг 4: отредактируйте свой дизайн Figma
Отсюда вы можете начать редактировать свою веб-страницу Figma любым удобным для вас способом. Как уже упоминалось, эта функция HTML to Figma позволяет вам узнать, как были разработаны существующие веб-страницы, чтобы вдохновить вас на создание собственных с нуля. Вы можете использовать базовый дизайн с веб-сайта и создать презентацию с помощью переходов в Figma, или просто узнайте, как другие дизайнеры настраивают веб-страницы.
В левом меню вы найдете слои. Поскольку это было преобразовано непосредственно из HTML, слои могут быть более подробными или даже запутанными, чем то, к чему вы привыкли при самостоятельном проектировании. Выберите раздел в дизайне, чтобы найти выделенные слои в меню слева.
Вы можете заменить изображения, перепечатать заголовки и основной текст или переместить элементы в макете, дважды щелкнув аспект дизайна. Плагин html.to.figma не копирует настройки анимации или перехода при переходе по ссылкам или смене страниц. Вы можете добавить их самостоятельно.
Как преобразовать частную веб-страницу
Большая часть процесса создания частного веб-сайта, для доступа к которому требуется учетная запись, по сравнению с общедоступной веб-страницей одинакова. Однако вместо вставки URL-адреса вы должны использовать расширение Chrome, которое создает файл.
Для начала откройте Figma и плагин html.to.figma так же, как и раньше.
Шаг 1. Загрузите и запустите расширение Chrome.
Вы можете использовать это расширение только с Google Chrome, поэтому для начала откройте Chrome. В диалоговом окне плагина Figma выберите Расширение Chrome-или открыть расширение здесь в вашем браузере Chrome.
Выбирать Добавить в Chrome > Добавить расширение чтобы добавить расширение в ваш браузер.
После добавления расширения перейдите на частный веб-сайт или страницу, дизайн которой вы хотите воспроизвести (мы используем страницу Instagram), и выберите расширение. Свернутые расширения находятся под значком кусочка головоломки в вашем браузере.
Он спросит, хотите ли вы захватить всю страницу или только то, что находится в поле зрения. Сделайте свой выбор, и тогда снимок появится в ваших загрузках в виде файла .h2d.
Шаг 2: перетащите сгенерированный файл в плагин Figma
Перейдите в приложение Figma или на сайт Figma в браузере и перетащите загруженный файл .h2d в поле. Файл будет загружаться и генерироваться так же, как и общедоступный веб-сайт.
Как и в общедоступной версии веб-страницы, вы можете дважды щелкнуть элементы дизайна, чтобы отредактировать их, или щелкнуть левое меню, чтобы увидеть, где они появляются на макете.
Возможно, вы захотите добавить новые элементы дизайна в дизайн веб-страницы, например Эффект матового стекла Figma, или вы могли бы даже воспроизвести части дизайна веб-страницы в виде мастер-шаблон для презентаций Figma. В 2022 году Adobe приобрела Figma, поэтому мы можем ожидать более интересных способов использования Figma в будущем.
Используйте любой веб-сайт для вдохновения в своих проектах Figma
Хотя Figma в первую очередь предназначена для разработки веб-сайтов или страниц UX / UI с нуля, это отличная возможность заполнить существующие веб-страницы, чтобы увидеть, как они были созданы. Вы также можете сделать свой веб-дизайн копией существующего сайта, если не знаете, с чего начать с чистого листа.
Еще одна веская причина, по которой вам следует использовать плагин html.to.figma, заключается в том, что вы уже разработали веб-сайт, к которому потеряли доступ. Вы можете заполнить страницу в Figma и начать заново без необходимости начинать заново.