Adobe XD — это удивительный инструмент для дизайна, который позволяет легко создавать фантастические дизайны веб-сайтов без какого-либо предварительного опыта веб-разработки. Вы можете просто импортировать PSD-файлы вашего дизайна из Photoshop и создать привлекательный пользовательский интерфейс веб-сайта.
Эти дизайны помогают разработчикам понять, как вы хотите, чтобы ваш сайт выглядел, и немного облегчают процесс разработки с их стороны. Однако существует лишь ограниченное количество способов экспорта проектов из программного обеспечения.
Вы можете либо сохранить их в виде файла XD и надеяться, что разработчик уже установил программное обеспечение в своей системе, либо экспортировать каждую монтажную область в виде отдельного файла PNG, что может быть немного неудобно в использовании.
К счастью, есть удобный сторонний плагин, который позволяет экспортировать монтажные области в виде HTML-файлов, и об этом я расскажу в этой статье. Но прежде чем мы перейдем к этому, вам нужно кое-что знать.
Примечание:
Экспорт файлов Adobe XD в HTML с помощью плагинов
Теперь, когда мы разобрались с этим, просто выполните следующие простые шаги, чтобы загрузить необходимый плагин, а затем экспортировать файлы Adobe XD в HTML:
Шаг 1: Нажмите на кнопку меню гамбургера в верхнем левом углу программного обеспечения.
Шаг 2: Прокрутите вниз до конца и нажмите «Плагины». Это откроет новую панель плагинов справа от главного меню.
Шаг 3: Выберите параметр «Обнаружить плагины» на панели «Плагины».
Шаг 4: На следующей странице найдите HTML и нажмите кнопку «Установить» рядом с плагином Web Export.
После того, как вы установили необходимый плагин, откройте проект, который вы хотите экспортировать в HTML, а затем выполните следующие шаги. В этой статье я буду использовать бесплатную артборд Adobe XD, которую нашел в Интернете.
Шаг 5: Выберите монтажную область, которую вы хотите экспортировать, нажав на нее.
Шаг 6: Теперь нажмите кнопку меню, перейдите на панель «Плагины», а затем выберите параметр «Экспорт монтажной области» в новых настройках плагина веб-экспорта.
В том же окне вы также можете экспортировать несколько монтажных областей или последнюю отредактированную монтажную область.
Шаг 7: Во всплывающем окне «Экспорт монтажной области» добавьте имя для файла, а затем выберите папку, в которой вы хотите сохранить файл, щелкнув крошечный значок папки рядом с параметром «Экспортировать папку».
Шаг 8: Теперь, если вы хотите добавить внешний сценарий, таблицу стилей или альтернативные шрифты в экспортируемый файл, вы можете добавить их в том же окне.
Шаг 9: Затем вы можете выбрать размеры выходного HTML-файла, введя значения в пустое место рядом с параметром «Размер».
Шаг 10: Чтобы обеспечить правильное масштабирование проекта, вы также можете выбрать различные параметры масштабирования в том же окне, установив флажок рядом с каждым параметром.
Шаг 11: Кроме того, вы можете выбрать любые дополнительные параметры, такие как навигация с помощью клавиатуры, автоматическое обновление и т. д., установив флажки рядом с параметрами.
Шаг 12: После того, как вы завершили все настройки, просто нажмите синюю кнопку «Экспорт», и все готово. Ваша монтажная область появится в виде HTML-файла в папке назначения, которую вы ранее выбрали.
В том же окне вы также сможете скопировать CSS и разметку монтажной области, если хотите поделиться этой информацией со своим разработчиком.
Еще раз обратите внимание, что экспортированный HTML ни в коем случае нельзя использовать для разработки полнофункционального веб-сайта. На данный момент у вас нет возможности напрямую опубликовать проект Adobe XD в Интернете, и, согласно нескольким обсуждениям на форумах Adobe, в ближайшее время его не будет.
Adobe XD — это всего лишь инструмент для прототипирования, который позволяет создавать первоначальный дизайн без кода. Когда у вас есть готовый дизайн, вы можете использовать платформу, например Dreamweaver, для преобразования вашего дизайна в веб-сайт. Но для этого вам понадобится некоторый опыт веб-разработки или вам нужно будет нанять кого-то, кто этим занимается.
Экспортируйте файл Adobe XD в HTML
Итак, теперь, когда вы знаете, как экспортировать файл Adobe XD в HTML, я уверен, что вы сможете легко поделиться своими монтажными областями с разработчиком или клиентом. И вам не придется беспокоиться о каких-либо проблемах совместимости. Установите плагин прямо сейчас и начните легко экспортировать свои артборды.
Следующий: Ознакомьтесь со следующей статьей, чтобы узнать о нескольких бесплатных интерактивных веб-сайтах, на которых вы можете научиться программировать и писать свой собственный HTML-сайт.
