Sie können über Adobe XD veröffentlichte Design-Spezifikationen anzeigen, die es Ihnen ermöglichen, User-Flows, Abstände, Stile und Formate des Designs auszuwerten und zu kommentieren

Die Funktion Design-Spezifikation dient der Verbesserung der Kommunikation zwischen Designern und Entwicklern. Ein Designer kann in XD eine öffentliche URL generieren, um sie an einen Entwickler weiterzugeben. Wenn ein Entwickler den Link öffnet, kann er die User-Flows, Abstände, Stile und Formate des Designs auswerten und kommentieren.

Vorbereitung

Zum Anzeigen der Design-Spezifikation benötigen Sie Folgendes:

  • Einen Link auf die Design-Spezifikation (den Sie vom Designer erhalten).
  • Desktop-Browser und Internetverbindung. Informationen zu unterstützten Browserversionen finden Sie unter Systemanforderungen.

Hinweis: Mobile Browser werden für die Anzeige von Design-Spezifikationen nicht unterstützt/empfohlen.

Hinweis:

Design-Spezifikationen sind öffentlich und stehen allen zur Verfügung, die den Link kennen. Um den Zugriff auf Design-Spezifikationen nahtloser zu gestalten, ist seit dem 21. März 2018 für die Anzeige einer Design-Spezifikation keine Anmeldung per Adobe ID mehr notwendig.

Weitere Informationen finden Sie unter Change to Design Specs for Adobe XD (Änderungen an Design-Spezifikationen).

UX-Flows anzeigen

Entwickler können in der UX-Flow-Ansicht die Reihenfolge und den Interaktionsablauf der Zeichenflächen sehen.

In dieser praktischen Ansicht werden alle Bildschirme einer Design-Spezifikation angezeigt. Sie vermittelt dem Entwickler folgende Informationen:

  • Die Anzahl von Bildschirmen, die programmiert werden müssen (nützlich für die Entwicklungsplanung) 
  • Die Reihenfolge und den Interaktionsablauf in der Design-Spezifikation (hilfreich für das Verständnis des UX-Flows beim Endanwender)
  • Das Datum, zu dem die Design-Spezifikation zuletzt aktualisiert wurde
Die UX-Flow-Ansicht bietet Ihnen einen Überblick über das Projekt
Die UX-Flow-Ansicht bietet Ihnen einen Überblick über das Projekt

In dieser Ansicht können Sie zudem die folgenden Aktionen ausführen: 

  • Einen bestimmten Bildschirm über seinen Namen suchen und anzeigen. Befindet sich der Bildschirm im Viewport, wird er hervorgehoben. Befindet sich der Bildschirm außerhalb des Viewports, wird ein Bildlauf durchgeführt, um den betreffenden Bildschirm anzuzeigen.
  • Den Mauszeiger über einzelne Bildschirme halten, um zu sehen, wie sie miteinander verbunden sind. 
  • Ein-/Auszoomen und Bewegen, um spezifische Details anzusehen. In der UX-Flow-Ansicht können Sie, wenn alle Bildschirme der Design-Spezifikation im Viewport angezeigt sind, die Anzeige nicht mehr weiterbewegen. 
    Tastaturbefehle zum Zoomen:
    • Cmd/Strg + Mausrad
    • Cmd/Strg + „+“ bzw. „–“ zum Zoomen
    • Cmd + 0, um den Zoomgrad zurückzusetzen

Tastaturbefehle zum Bewegen:
Leertaste + Klicken und Ziehen oder Umschalttaste + Pfeiltaste (für ein schnelleres Bewegen)

  • Weitere Tastaturbefehle, die Sie verwenden können:
    • Wenn Sie den Fokus auf einem Bildschirm setzen, können Sie mithilfe der linken und rechten Pfeiltaste durch die Bildschirme in der UX-Flow-Ansicht navigieren.
    • Durch Drücken der Eingabetaste wechseln Sie in die Design-Spezifikations-Ansicht. Mit Esc kehren Sie zur UX-Flow-Ansicht zurück.
  • Durch Klicken auf die Zeichenfläche eine detaillierte Ansicht der Zeichenfläche anzeigen.
  • Auf Kommentare anzeigen klicken, um die Benutzerkommentare auf dem Bildschirm der Design-Spezifikation zu öffnen.

Bei der Arbeit mit den Design-Spezifikationen werden Sie von einer integrierten Hilfe unterstützt. Am unteren Fensterrand werden Benachrichtigungen zum Bewegen, Zoomen, Klicken zum Kopieren und dem Erhalt von Verbindungen angezeigt. 

Auswertung der Design-Spezifikationen

In der Standardansicht werden die Farben und Zeichenformate angezeigt, die auf dem Bildschirm verwendet werden. Mithilfe des aus- bzw. einklappbaren Pfeils können sie die einzelnen Bereiche erweitern bzw. reduzieren.

Wenn Sie auf die Zeichenfläche klicken, werden die Abmessungen der Zeichenfläche angezeigt. 

Im Bedienfeld Eigenschaften rechts im Bildschirm können Sie folgende Aktionen ausführen:

  • Die Bildschirmdetails anzeigen – die in diesem Bildschirm verwendeten Farben und Zeichenformate sowie die Zielzeichenfläche, mit der er verbunden ist.
  • Die aufgelisteten Optionen im Bedienfeld Eigenschaften erweitern oder reduzieren. 
  • Wenn Sie im Bedienfeld rechts mit dem Mauszeiger auf diese Farben oder Zeichenformate zeigen, können Sie sehen, in welchen Instanzen sie verwendet wurden.
  • Die hexadezimalen Farbcodes und benutzerdefinierten Beschriftungen für die auf dem Bildschirm verwendeten Farben anzeigen.
  • Die Details der verschiedenen Interaktionen auf dem Bildschirm, wie Übergänge, Overlays, Sprache und Auto-Animate, anzeigen.
  • Wenn Sie auf Kommentare anzeigen klicken, werden die Kommentare zur Zeichenfläche geöffnet. Um eine Farbe oder ein Zeichenformat zu kopieren, klicken Sie darauf.

Hinweis:

Die benutzerdefinierten Beschriftungen können nur angezeigt werden, wenn der Designer die Namen der Farbbeschriftungen im Bedienfeld „Elemente“ umbenannt hat.

Texteigenschaften auswerten, Zeichenformate und Inhalte kopieren und Abstände messen
Texteigenschaften auswerten, Zeichenformate und Inhalte kopieren und Abstände messen

Design-Spezifikationen überprüfen und kommentieren

Seit Version XD 10.0 verfügen Design-Spezifikationen über dieselbe Kommentarfunktion wie Prototypen. Sie können Design-Spezifikationen kommentieren, die genaue Position des Kommentars mit einer Stecknadel fixieren und diese bei Bedarf verschieben. Beim Navigieren eines Links bleiben der Kommentar und die Antworten darauf im Kontext erhalten. Außerdem bietet eine E-Mail mit einer Kommentarbenachrichtigung an den Designer einen direkten, kontextsensitiven Link zu der Zeichenfläche. Ihre Antworten werden angezeigt, sobald der Entwickler die Seite im Browser aktualisiert. 

Sie können Ihre Kommentare auch an bestimmte Bereiche auf der Zeichenfläche anheften oder die Kommentare verschieben. Um einen Kommentar anzuheften, klicken Sie auf Stecknadel platzieren und dann auf eine bestimmten Stelle auf der Zeichenfläche. Geben Sie dann Ihren Kommentar ein und klicken Sie auf Senden, um den Kommentar einzureichen.

 Sie haben auch die Möglichkeit, mit Abbrechen einen bereits in das Kommentarfeld eingegebenen Kommentar abzubrechen.

Sie können einen Standardkommentar in einen angehefteten Kommentar ändern. Die E-Mail mit der Kommentarbenachrichtigung enthält dann einen direkten Link zu der Zeichenfläche, auf der der Kommentar erstellt wurde, und nicht nur zur Startseite.

Kommentaroptionen
Kommentaroptionen
Kommentieren
Kommentaroptionen

Jedem angehefteten Kommentar in XD wird eine Nummer zugewiesen. Die Kommentare im Bedienfeld „Kommentare“ sind entsprechend nummeriert, sodass Designer den Kontext des Kommentars ganz einfach erfassen können.

Der Designer kann die Kommentare anzeigen und gegebenenfalls schließen. Sie können geschlossene Kommentare überprüfen, indem Sie auf Geschlossene Kommentare anzeigen klicken. Wenn Sie der Meinung sind, dass Ihr Kommentar fälschlicherweise geschlossen wurde, können Sie auf In „Offen“ verschieben klicken, um den Kommentar wieder zu öffnen.

Farbformat wechseln

Sie können auch das Farbformat wechseln. Wenn Sie beispielsweise lieber im HSLA-Format arbeiten, können Sie über die Dropdown-Liste das Farbformat in HSLA konvertieren. Diese Änderung gilt für die gesamte Sitzung – wenn Sie andere Bildschirme anzeigen, wird dasselbe Farbformat verwendet.

Farben von einem Format in ein anderes konvertieren
Farben von einem Format in ein anderes konvertieren

Abstände auswerten

Sie können die Abstände zwischen den Elementen auf dem Bildschirm auswerten. Wenn Sie ein Element auf dem Bildschirm auswählen, werden seine Koordinatenwerte für Höhe und Breite angezeigt.

Um den Abstand zwischen Elementen zu ermitteln, wählen Sie ein Element aus und halten den Mauszeiger über andere Elemente auf dem Bildschirm, damit jeweils der Abstand zwischen den beiden Elementen angezeigt wird.

Die Abstände zwischen den Elementen anzeigen
Die Abstände zwischen den Elementen anzeigen

Texteigenschaften auswerten

Sie können auch die Eigenschaften des Textes auf dem Bildschirm auswerten. Wenn Sie eine Textzeile auswählen, werden ihre Zeichenformate angezeigt. Sie können auch die Zeichenformate, Farbwerte und den Inhalt aus den Design-Spezifikationen kopieren.

Adobe XD verwendet keine Einheiten, sondern konzentriert sich auf die Verhältnisse zwischen den Elementen. Wenn Sie etwa ein eine Zeichenfläche für ein iPhone 6/7 mit 375 x 667 Einheiten erstellen und mit einer Schriftgröße von 10 Einheiten, so bleibt dieses Verhältnis erhalten, unabhängig davon, auf welche tatsächliche Größe Ihr Design skaliert wird.

Die Design-Spezifikation hängt jedoch an die einheitsneutralen Maßangaben je nach Plattform Standardmaßeinheiten wie px, pt und dp an, damit Sie die Abmessungen auf der Plattform, für die Sie Ihre Seiten entwickeln, besser verstehen. In den Design-Spezifikationen können Sie auch die verwendete Maßeinheit ändern.

Maßeinheit ändern
Maßeinheit ändern

Layoutrastereigenschaften anzeigen und auswerten

Maßeinheit ändern
Maßeinheit ändern

Hat der Designer im Design Layoutraster verwendet, können Sie sie auch in der Design-Spezifikation anzeigen und auswerten. 

Die aufgeführten Werte entsprechen den vom Designer festgelegten Werten. Wenn Sie mit der Maus auf die Beschriftungen der Eigenschaften zeigen, werden sie im angezeigten Bildschirm hervorgehoben.

Wenn Layoutraster angezeigt werden sollen, setzen Sie den Regler für Layoutraster auf die rechte Stellung. Diese Option aktiviert das Layoutraster für alle Bildschirme in der Design-Spezifikation. Um Layoutraster auszuschalten, setzen Sie den Regler auf links. Und mit dem Regler Deckkraft können Sie die Transparenz des Layoutrasters steuern.

Bevor Sie den Design-Spezifikations-Link veröffentlichen, vergewissern Sie sich, dass die Layoutraster auf den Zeichenflächen in den Bereichen aktiviert sind, in denen Sie dem Entwickler angezeigt werden sollen. Wenn Sie in Ihrem Design keine Layoutraster verwendet haben, werden sie im Design-Spezifikations-Link standardmäßig nicht angezeigt.

Overlays auswerten

In einer Design-Spezifikation können Entwickler die Overlay-Verbindungen im UX-Flow-Bildschirm auswerten und das Overlay über dem Ausgangsbildschirm bzw. der Zeichenfläche aufrufen.

Wenn Sie mit der Maus auf eine Zeichenflächen zeigen oder bei gedrückter Umschalttaste auf eine Zeichenfläche oder einen Bildschirm klicken, wird in der UX-Flow-Ansicht eine gepunktete Linienverbindung angezeigt, wodurch kenntlich gemacht wird, dass Overlays angewendet worden sind.

Overlays auswerten
Overlays auswerten
Gepunktete Verbindungen kennzeichnen Overlays
Gepunktete Verbindungen kennzeichnen Overlays

Um die angewendeten Overlays auszuwerten, navigieren Sie im Bedienfeld Eigenschaften zum Abschnitt Overlays und klicken auf die Miniatur im Abschnitt Overlays oder klicken bei gedrückter Umschalttaste auf den Hotspot in der Design-Spezifikation. 

Angewendete Overlays
Angewendete Overlays

Sie können Bildschirmdetails, Formate und Zielinformationen für das angewendete Overlay auswerten und ableiten:

  • Viewport-Größe: Zeigt die Abmessungen des sichtbaren Bereichs an, der je nach Größe des für den Zugriff auf die Seite verwendeten Geräts unterschiedlich ist.
  • Designgröße: Zeigt die Abmessungen des Designs auf dem Bildschirm an.
  • Overlay-Position: Zeigt die Position des Overlays mit Bezug auf den Ausgangsbildschirm auf der Basiszeichenfläche in der Einheit px, pt oder dp an. 
  • Farben: Zeigt die verwendeten Farben im RGBA-, Hex- oder HSLA-Format an.
  • Zeichenformate: Zeigt die Zeichenformate in der Einheit px, pt oder dp an. Die Einheit der Overlay-Position richtet sich nach der für das Zeichenformat verwendeten Einheit.
  • Ziele: Zeigt Informationen zu den Zielzeichenflächen an.

Drücken Sie Esc oder wählen Sie Overlay schließen, um zur Basiszeichenfläche zurückzukehren.

Feste Elemente auswerten

Um die festen Elemente in einem Design auszuwerten, klicken Sie oben links in der Design-Spezifikation auf die Stecknadel. Dieses Symbol zeigt an, dass Designelemente auf der Zeichenfläche fixiert wurden. 

Feste Elemente auswerten
Feste Elemente auswerten
Feste Position
Feste Position

Hotspots anzeigen und auswerten

Um die Hotspots in Design-Spezifikationen auszuwerten, klicken Sie auf das im Abschnitt Overlays oder Ziel angezeigte Artefakt oder klicken in der Design-Spezifikation bei gedrückter Umschalttaste auf den Hotspot. 

In der UX-Flow-Ansicht erhalten Sie eine Übersicht über alle Bildschirme in der Spezifikation. Von dort aus können Sie auf einzelne Bildschirme klicken und zwischen ihnen navigieren.

Zwischen den Bildschirmen navigieren
Zwischen den Bildschirmen navigieren

Klicken Sie unten im Bildschirm auf das Startsymbol (das kleine Häuschen) um zum Startbildschirm zu wechseln. Sie können auch auf den linken bzw. rechten Pfeil klicken, um zum jeweils vorigen bzw. nächsten Bildschirm zu wechseln. 

Wenn Sie auf verknüpfte Objekte klicken, wird rechts der Zielbildschirm angezeigt. Um dorthin zu navigieren, klicken Sie auf den Zielbildschirm.

Um von der UX-Flow-Ansicht wieder in die Design-Spezifikations-Ansicht zu wechseln, drücken Sie Esc.

Elementextrahierung in Design-Spezifikationen

Um Zeit zu sparen, können Sie den Entwicklern die Möglichkeit geben, Elemente aus Design-Spezifikationen zu extrahieren und herunterzuladen. Verwenden Sie diese Funktion, um Ebenen als Elemente für den Export zu markieren und als Design-Spezifikations-Link zu senden. Entwickler können alle Vektorelemente als SVG-, PNG- oder PDF-Dateien herunterladen und Bitmap-Elemente als PNG- oder PDF-Dateien.

Elemente in Design-Spezifikationen markieren

  1. Öffnen Sie das Bedienfeld Ebenen und wählen Sie eine Zeichenfläche aus. Führen Sie den Mauszeiger über eine Ebene und klicken Sie auf das Symbol Für Export markieren

    Für Export markieren
    Für Export markieren

    Hinweis:

    Wenn Sie bestimmte Elemente aus Gruppen auswählen möchten, klicken Sie auf das Gruppensymbol, um den Inhalt der Gruppe anzuzeigen, und wählen Sie dann die Elemente aus.

Elemente im Web freigeben und herunterladen

Im Design-Spezifikationen können Sie den Entwicklern einen zentralen Speicherort zum Herunterladen aller ausgewählten Elemente und anderer Details Ihrer Zeichenfläche bereitstellen. Sie können die Elemente auswählen und nur diese freigeben. Wenn Sie für den Entwickler einen Design-Spezifikations-Link freigeben, stehen dem Entwickler im Web alle für den Export markierten Elemente zur Verfügung. Die Design-Spezifikationen umfassen sowohl Bitmap- als auch Vektorelemente.

  1. Befolgen Sie die Anweisungen im Abschnitt Elemente in Design-Spezifikationen markieren.

  2. Klicken Sie rechts oben im Bildschirm auf das Symbol Freigeben und wählen Sie Design-Spezifikation veröffentlichen.

    Wählen Sie „Design-Spezifikation veröffentlichen“
    Wählen Sie „Design-Spezifikation veröffentlichen“
  3. Aktivieren Sie im Dialogfeld Design-Spezifikation veröffentlichen die Option Elemente einschließen und überprüfen Sie, ob die Anzahl markierter Elemente stimmt. Wählen Sie im Dropdownmenü Exportieren für die Plattform für den Designexport aus, und klicken Sie auf Öffentlichen Link erstellen.

    Einstellungen für das Erstellen eines öffentlichen Links
    Einstellungen für das Erstellen eines öffentlichen Links

    Basierend auf der Plattform, für die Sie das Design erstellen, verfügt jede Plattform über separate Einstellungen für die Auflösung:

    • Web: Die Elemente werden bei einer Auflösung von 1x oder 2x exportiert.
    • iOS: Die Elemente werden bei einer Auflösung von 1x, 2x oder 3x exportiert. 
    • Android: Elemente werden für die folgenden in Android definierten Pixeldichten optimiert und exportiert:
      • ldpi – geringe Dichte (75 %)
      • mdpi – mittlere Dichte (100 %)
      • hdpi – hohe Dichte (150 %)
      • xhdpi – extra hohe Dichte 1 (200 %)
      • xxhdpi – extra hohe Dichte 2 (300 %)
      • xxxhdpi – extra hohe Dichte 3 (400 %)
  4. Klicken Sie zum Öffnen des Projekts im Browser auf das Symbol Im Browser öffnen. Wählen Sie eine Zeichenfläche aus, um die Elemente anzuzeigen. Die ausgewählten Elemente werden zusammen mit anderen Details der Zeichenfläche im Browser angezeigt.

    Die ausgewählten Elemente werden im Browser angezeigt
    Die ausgewählten Elemente werden im Browser angezeigt

    Wenn Sie den Mauszeiger über die Elemente führen, werden in der kontextabhängigen Auswahl die ausgewählten Elemente blau hervorgehoben.

    Kontextabhängige Auswahl
    Kontextabhängige Auswahl
  5. Zum Herunterladen wählen Sie eines oder mehrere Elemente aus. Mit Cmd/Strg+A können Sie alle Elemente auswählen und bei gedrückter Umschalttaste mehrere Elemente. Am unteren Bildschirmrand sind die Elemente als Vektor- bzw. Bitmap-Element kategorisiert.

    Die ausgewählten Elemente herunterladen
    Die ausgewählten Elemente herunterladen
  6. Sie können das Format von Vektorelementen in SVG, PDF oder PNG ändern und das Format von Bitmap-Elementen in PNG und PDF. Die Elemente werden als ZIP-Datei in den Download-Ordner auf Ihrem Computer heruntergeladen.

  7. Damit Sie aus einer als Element markierten Ebene auch einzelne Elemente herunterladen können, besitzt das Dialogfeld Design-Spezifikationen im Web einen Abschnitt, der eine entsprechende Option zum Herunterladen enthält.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie