Как экспортировать Adobe XD в HTML

Adobe XD - это удивительный инструмент дизайна, который позволяет вам легко создавать фантастические дизайны сайтов без какого-либо опыта веб-разработки. Вы можете просто импортировать PSD-файлы вашего дизайна из Photoshop и создать привлекательный интерфейс веб-сайта.

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

Вы можете либо сохранить их как файл XD, и надеяться, что разработчик уже установил программное обеспечение в своей системе, либо экспортировать каждый артборд в виде отдельного файла PNG, который может быть немного неудобен в использовании.

Также на

Лучшие 3 инструмента дизайна для создания макетов и каркасов

К счастью, есть удобный сторонний плагин, который позволяет экспортировать монтажные области в виде HTML-файлов, и об этом я и поговорю. Но прежде чем мы доберемся до этого, нужно кое-что знать.

Примечание. Файл HTML, созданный с использованием этого метода, никоим образом не должен рассматриваться как основа для полной веб-страницы. Этот метод - всего лишь способ легко поделиться своими разработками с разработчиком, а не функциональный процесс разработки веб-сайта.

Экспорт файлов Adobe XD в HTML с помощью плагинов

Теперь, когда мы получили это, просто следуйте этим простым шагам, чтобы загрузить необходимый плагин, а затем экспортируйте файлы Adobe XD в HTML:

Шаг 1: Нажмите на кнопку меню гамбургера в верхнем левом углу программного обеспечения.

Шаг 2: Прокрутите весь путь вниз, а затем выберите опцию «Плагины». Это откроет новую панель плагинов справа от главного меню.

Шаг 3: Выберите опцию «Обнаружение плагинов» на панели плагинов.

Шаг 4: На следующей странице найдите HTML, а затем нажмите кнопку «Установить» рядом с плагином «Веб-экспорт».

После того, как вы установили нужный плагин, откройте проект, который вы хотите экспортировать в HTML, а затем продолжайте выполнять следующие шаги. В этой статье я буду использовать бесплатный артборд Adobe XD, который я нашел в Интернете.

Шаг 5: Выберите артборд, который вы хотите экспортировать, нажав на него.

Шаг 6: Теперь нажмите на кнопку меню, перейдите на панель плагинов и затем выберите опцию «Экспорт монтажной области» в новых настройках плагина Web Export.

В этом же окне вы также можете экспортировать несколько монтажных областей или последнюю отредактированную монтажную область.

Шаг 7. Во всплывающем окне «Экспорт монтажной области» добавьте имя для файла, а затем выберите папку, в которую вы хотите сохранить файл, щелкнув значок миниатюрной папки рядом с параметром «Экспорт папки».

Шаг 8. Теперь, если вы хотите добавить внешний скрипт, таблицу стилей или альтернативные шрифты в экспортируемый файл, вы можете добавить их в том же окне.

Шаг 9: Затем вы можете выбрать размеры выходного HTML-файла, введя значения в пустое пространство рядом с параметром «Размер».

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

Шаг 11. Кроме того, вы можете выбрать любые дополнительные настройки, такие как навигация с помощью клавиатуры, автообновление и т. Д., Установив флажки рядом с параметрами.

Шаг 12: После того, как вы завершили все настройки, просто нажмите синюю кнопку Экспорт, и все готово. Ваш артборд появится в виде HTML-файла в папке назначения, которую вы ранее выбрали.

Из того же окна вы также сможете скопировать CSS и разметку вашего артборда, если вы также захотите поделиться этой информацией с вашим разработчиком.

Еще раз отметим, что экспортированный HTML ни в коем случае нельзя использовать для разработки полнофункционального веб-сайта. На данный момент у вас нет возможности напрямую публиковать проект Adobe XD в Интернете, и, согласно нескольким дискуссиям на форумах Adobe, в ближайшее время его не будет.

Adobe XD - это всего лишь инструмент для создания прототипов, который позволяет создавать первоначальный дизайн без кода. Когда у вас есть готовый дизайн, вы можете использовать платформу, такую ​​как Dreamweaver, чтобы превратить ваш дизайн в веб-сайт. Но для этого вам понадобится некоторый предыдущий опыт веб-разработки или вам нужно будет нанять кого-то, кто делает.

Также на

#дизайн

Нажмите здесь, чтобы увидеть нашу страницу дизайна статей

Экспортируйте свой файл Adobe XD в HTML

Итак, теперь, когда вы знаете, как экспортировать файл Adobe XD в HTML, я уверен, что вы сможете легко поделиться своими монтажными областями с разработчиком или клиентом. И вам не придется беспокоиться о проблемах совместимости. Установите плагин прямо сейчас и начните с легкостью экспортировать ваши артборды.

Далее: ознакомьтесь со следующей статьей о паре бесплатных интерактивных веб-сайтов, на которых вы можете научиться кодировать и писать свой собственный HTML-сайт.