Як експортувати Adobe XD в HTML

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

Ці конструкції допомагають розробникам зрозуміти, як ви хочете, щоб ваш веб-сайт виглядав, і полегшують процес розробки з їхнього боку. Однак існує лише обмежена кількість способів експортувати проекти з програмного забезпечення.

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

На щастя, є зручна стороння сторона підключати який дозволяє експортувати монтажні області як файли HTML, і саме про це я розповім у цій статті. Але перед тим, як ми перейдемо до цього, вам потрібно дещо знати.

Примітка: HTML-файл, створений за допомогою цього методу, ні в якому разі не повинен розглядатися як основа для повної веб-сторінки. Цей метод є лише засобом легкого обміну своїми дизайнами з розробником, а не функціональним процесом розробки веб-сайту.

Експортуйте файли Adobe XD в HTML за допомогою плагінів

Тепер, коли ми розібралися з цим, просто виконайте ці прості кроки, щоб завантажити необхідний плагін, а потім експортувати файли Adobe XD у HTML:

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

Крок 2: Прокрутіть до кінця вниз, а потім натисніть на опцію «Плагіни». Це відкриє нову панель плагінів праворуч від головного меню.

Крок 3: Виберіть опцію «Відкрити плагіни» на панелі «Плагіни».

Крок 4: На наступній сторінці знайдіть HTML, а потім натисніть кнопку Встановити поруч із плагіном веб-експорту.

Після встановлення необхідного плагіна відкрийте проект, який потрібно експортувати в 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.