So exportieren Sie Adobe XD nach HTML

Adobe XD ist ein fantastisches Designtool, mit dem Sie auf einfache Weise fantastische Website-Designs erstellen können, ohne zuvor Erfahrungen mit der Webentwicklung gesammelt zu haben. Sie können einfach PSD-Dateien Ihres Designs aus Photoshop importieren und eine auffällige Website-Benutzeroberfläche erstellen.

Diese Designs tragen wesentlich dazu bei, dass Entwickler verstehen, wie Ihre Website aussehen soll, und dass sie den Entwicklungsprozess ein wenig vereinfachen. Es gibt jedoch nur eine begrenzte Anzahl von Möglichkeiten, wie Sie die Designs aus der Software exportieren können.

Sie können sie entweder als XD-Datei speichern und hoffen, dass der Entwickler die Software bereits auf seinem System installiert hat, oder Sie exportieren jede Zeichenfläche als einzelne PNG-Datei, was etwas unpraktisch sein kann.

Auch auf

Beste 3 Design-Tools zum Erstellen von Mockups und Wireframes

Zum Glück gibt es ein praktisches Plugin von Drittanbietern, mit dem Sie die Zeichenflächen als HTML-Dateien exportieren können. Darüber werde ich sprechen. Aber bevor wir dazu kommen, gibt es etwas, das Sie wissen müssen.

Hinweis: Die mit dieser Methode generierte HTML-Datei sollte in keiner Weise als Grundlage für eine vollständige Webseite betrachtet werden. Diese Methode ist nur ein Mittel, um Ihre Designs einfach mit einem Entwickler zu teilen, und kein funktionaler Website-Entwicklungsprozess.

Exportieren Sie Adobe XD-Dateien mithilfe von Plug-ins nach HTML

Nachdem wir das aus dem Weg geräumt haben, folgen Sie einfach diesen einfachen Schritten, um das erforderliche Plugin herunterzuladen und anschließend die Adobe XD-Dateien in HTML zu exportieren:

Schritt 1: Klicken Sie auf die Hamburger-Menüschaltfläche in der oberen linken Ecke der Software.

Schritt 2: Scrollen Sie ganz nach unten und klicken Sie dann auf die Option Plugins. Daraufhin wird rechts im Hauptmenü ein neues Plugins-Fenster geöffnet.

Schritt 3: Wählen Sie im Bedienfeld „Plugins“ die Option „Discover Plugins“.

Schritt 4: Suchen Sie auf der folgenden Seite nach HTML und klicken Sie dann auf die Schaltfläche Installieren neben dem Web Export-Plugin.

Nachdem Sie das erforderliche Plugin installiert haben, öffnen Sie das Projekt, das Sie in HTML exportieren möchten, und fahren Sie mit den folgenden Schritten fort. Für diesen Artikel verwende ich eine kostenlose Adobe XD-Zeichenfläche, die ich online gefunden habe.

Schritt 5: Wählen Sie die Zeichenfläche aus, die Sie exportieren möchten, indem Sie darauf klicken.

Schritt 6: Klicken Sie nun auf die Menüschaltfläche, navigieren Sie zum Bedienfeld „Plugins“ und wählen Sie in den neuen Einstellungen für das Web-Export-Plugin die Option „Zeichenfläche exportieren“.

Im selben Fenster können Sie auch mehrere Zeichenflächen oder die zuletzt bearbeitete Zeichenfläche exportieren.

Schritt 7: Fügen Sie im Popup-Fenster "Zeichenfläche exportieren" einen Namen für die Datei hinzu und wählen Sie den Ordner aus, in dem Sie die Datei speichern möchten, indem Sie auf das kleine Ordnersymbol neben der Option "Ordner exportieren" klicken.

Schritt 8: Wenn Sie der exportierten Datei nun ein externes Skript, Stylesheet oder alternative Schriftarten hinzufügen möchten, können Sie diese im selben Fenster hinzufügen.

Schritt 9: Anschließend können Sie die Abmessungen der Ausgabe-HTML-Datei auswählen, indem Sie die Werte in das leere Feld neben der Option Größe eingeben.

Schritt 10: Um sicherzustellen, dass das Projekt ordnungsgemäß skaliert wird, können Sie auch verschiedene Skalierungseinstellungen aus demselben Fenster auswählen, indem Sie das Kontrollkästchen neben jeder Option aktivieren.

Schritt 11: Darüber hinaus können Sie zusätzliche Einstellungen wie Tastaturnavigation, automatische Aktualisierung usw. auswählen, indem Sie die Kontrollkästchen neben den Optionen aktivieren.

Schritt 12: Wenn Sie alle Einstellungen vorgenommen haben, klicken Sie einfach auf die blaue Schaltfläche Exportieren und schon sind Sie fertig. Ihre Zeichenfläche wird als HTML-Datei im zuvor ausgewählten Zielordner angezeigt.

Im selben Fenster können Sie auch das CSS und das Markup Ihrer Zeichenfläche kopieren, wenn Sie diese Informationen auch an Ihren Entwickler weitergeben möchten.

Beachten Sie auch hier, dass das exportierte HTML keinesfalls zur Entwicklung einer voll funktionsfähigen Website verwendet werden kann. Ab sofort können Sie ein Adobe XD-Projekt nicht mehr direkt im Web veröffentlichen, und es wird laut einigen Diskussionen in den Adobe-Foren in Kürze keines mehr geben.

Adobe XD ist nur ein Prototyping-Tool, mit dem Sie ein erstes Design ohne Code erstellen können. Sobald Sie ein Design fertig haben, können Sie es mit einer Plattform wie Dreamweaver in eine Website umwandeln. Dafür benötigen Sie jedoch einige Vorkenntnisse in der Webentwicklung, oder Sie müssen jemanden einstellen, der dies tut.

Auch auf

#Design

Klicken Sie hier, um unsere Seite mit Designartikeln anzuzeigen

Exportieren Sie Ihre Adobe XD-Datei in HTML

Nachdem Sie nun wissen, wie Sie Ihre Adobe XD-Datei in HTML exportieren, können Sie Ihre Zeichenflächen ganz einfach für einen Entwickler oder einen Kunden freigeben. Und Sie müssen sich keine Gedanken über Kompatibilitätsprobleme machen. Installieren Sie das Plugin sofort und exportieren Sie Ihre Zeichenflächen mühelos.

Als Nächstes lesen Sie im folgenden Artikel ein paar kostenlose interaktive Websites, auf denen Sie lernen können, wie Sie Ihre eigene HTML-Website codieren und schreiben.