Auswerten von Design-Spezifikationen

Attribute wie Farben, Text, Abstände, Komponentenzustände, Interaktionshervorhebungen in Design-Spezifikation anzeigen und auswerten.

In einem freigegebenen Design-Spezifikations-Link können Sie den Prototyp anzeigen und testen, Kommentare und Feedback kontextbezogen hinzufügen und Abstände und Design-Spezifikations-Informationen abrufen.

Registerkarten im Design-Spezifikations-Link
Registerkarten im Design-Spezifikations-Link

Der Design-Spezifikations-Link wird standardmäßig im Prototypmodus geöffnet. Um Eigenschaften und technische Daten abzurufen, klicken Sie in der Randleiste rechts auf das Symbol .

Wenn Sie zur Registerkarte mit den Design-Spezifikationen wechseln, können Sie auf der Arbeitsfläche den Mauszeiger über Elemente führen und Attribute wie Farben, Text, Abstände, Zustände und andere Eigenschaften im Eigenschafteninspektor abrufen.

Über das nächste Symbol können Sie zur Registerkarte für Variablen wechseln. Diese Registerkarte ist verfügbar, wenn der Designer einen Design-Spezifikations-Link fürs Web veröffentlicht. Definiert der Designer Variablennamen für Farben und Zeichenformate, können Sie die Designtoken-Informationen auf dieser Registerkarte anzeigen. 

Im Folgenden wird erläutert, wie Sie die Attribute in einer Design-Spezifikation anzeigen und zuordnen.

 

Bildschirmdetails und Eigenschaften

A. Bildschirmdetails: Wählen Sie ein Objekt aus, um Abmessungen und Abstände zu überprüfen.

B. Farben: Für den Export markierte Farben anzeigen.

C. Eigenschaften des Layoutrasters: Hier können Sie in die Rasteranzeige wechseln.

Text und Erscheinungsbild

A. Texteigenschaften: Wählen Sie eine Textzeile aus, um Texteigenschaften in den Standardeinheiten px, pt oder dp anzuzeigen.

B. Erscheinungsbild: Sie können Farben anzeigen, die in einem Objekt oder Text im Bereich „Erscheinungsbild“ verwendet werden. 

Mit dem Regler „Deckkraft“ können Sie die Transparenz der Farben ändern.

Ausgeblendete Ebenen

Ausgeblendete Ebenen

Führen Sie den Mauszeiger auf den jeweiligen Bereich und klicken Sie mit der rechten Maustaste, um die Liste der Ebenen und die Kontextinformationen an diesem Pixelpunkt anzuzeigen. 

Gleiche Zeichenformate

Führen Sie den Mauszeiger über Teilbereiche innerhalb eines Textelements, um ähnliche Teilbereiche innerhalb des Textelements hervorzuheben.

Overlays

Klicken Sie auf Interaktionshervorhebungen, um Zeichenflächendetails, Stile, Design- und Viewport-Größe, Overlay-Position, Farben, Zeichenformate und Informationen zum Ziel des angewendeten Overlays anzuzeigen. 

Interaktionshervorhebungen

Halten Sie die Umschalttaste gedrückt, um die Interaktionshervorhebungen anzuzeigen. Um sie auszuwerten, klicken Sie im Bereich Interaktionen auf das angezeigte Artefakt oder klicken Sie bei gedrückter Umschalttaste auf die Interaktionshervorhebungen.  

CSS-Codefragmente

  • Um den CSS-Code zu generieren, wählen Sie im Fenster „Für Entwickler freigeben“ das Ausgabeziel „Web“ aus und veröffentlichen Sie die Design-Spezifikation.
  • Sie können CSS-Code aus Ihrem Design im Bereich „CSS“ anzeigen und kopieren.
  • Um das Codefragment zu kopieren, ziehen Sie das Codefragment auf Ihren Code-Editor, um es dort einzufügen.

Komponentenzustände

Komponentenzustände in Design-Spezifikationen
Komponentenzustände in Design-Spezifikationen

  • Wählen Sie ein Objekt auf der Zeichenfläche aus. Wenn es sich bei dem ausgewählten Objekt um eine Komponente handelt, können Sie seine verschiedenen Zustände überprüfen. 
  • Um die verschiedenen Zustände der ausgewählten Komponente auf der Zeichenfläche anzuzeigen, klicken Sie im Eigenschafteninspektor auf die Optionen in der Liste „Komponente“.  

  • Im Bereich „Interaktionen“ können Sie alle Interaktionen anzeigen, die mit dem aktiven Zustand der ausgewählten Komponente verbunden sind. 
  • Klicken Sie auf den inaktiven Zustand der Komponente in der Liste, um die Zustände auf der Zeichenfläche und ihre Interaktionen anzuzeigen.

Wenn Sie eine Komponente für den Export markieren, steht zurzeit nur der aktive Zustand der Komponente zum Herunterladen zur Verfügung. Sie können stattdessen auch die Elemente aus XD exportieren und freigeben.

Weitere Informationen

Das folgende Video zeigt, wie sich in XD Design-Spezifikationen auswerten lassen.
Dauer: 8 Minuten

Wie geht’s weiter?

Sie wissen jetzt, wie Sie Design-Spezifikationen anzeigen und auswerten. Lernen Sie als Nächstes, wie Sie Design-Spezifikationen überprüfen und Elemente aus Design-Spezifikationen extrahieren.

Noch Fragen oder Ideen?

Fragen Sie die Community

Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.

Adobe-Logo

Bei Ihrem Konto anmelden