Adobe XD – потрясающий инструмент для дизайна, который позволяет легко создавать фантастические дизайны веб-сайтов без предварительного опыта веб-разработки. Вы можете просто импортировать PSD-файлы своего дизайна из Photoshop и создать привлекательный пользовательский интерфейс веб-сайта.
Эти проекты имеют большое значение, помогая разработчикам понять, как вы хотите, чтобы ваш веб-сайт выглядело, и упрощают процесс разработки с их стороны. Однако существует лишь ограниченное количество способов экспорта дизайнов из программного обеспечения.
Вы можете сохранить их в виде файла XD и надеяться, что разработчик уже установил программное обеспечение на своем компьютере. систему или экспортируйте каждую монтажную область как отдельный файл PNG, который может быть немного неудобным в использовании.
Также в Guiding Tech
К счастью, есть удобный сторонний плагин, который позволяет экспортировать монтажные области в виде файлов 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. Однако это не влияет на нашу редакционную честность. Содержание остается непредвзятым и аутентичным.