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

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

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

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

Также в Guiding Tech

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

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

Экспорт файлов Adobe XD в HTML с помощью подключаемых модулей

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

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

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

Шаг 3: Выберите опцию Discover Plugins на панели Plugins.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также в Guiding Tech

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

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

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

Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается непредвзятым и аутентичным.

Оцените статью
ubisable.ru
Добавить комментарий