Freigeben von Designs und Prototypen

  1. Adobe XD Benutzerhandbuch
  2. Einführung
    1. Neue Funktionen in Adobe XD
    2. Häufige Fragen
    3. Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
    4. Systemanforderungen
      1. Hardware- und Softwareanforderungen
      2. Adobe XD, Big Sur und Apple silicon | macOS 11
    5. Arbeitsbereich – Grundlagen
    6. Ändern der in Adobe XD angezeigten Sprache
    7. Zugriff auf UI-Design-Kits
    8. Barrierefreiheit in Adobe XD
    9. Tastaturbefehle
    10. Tipps und Tricks
    11. Änderungen am XD Starter-Abo
  3. Design erstellen
    1. Zeichenflächen, Hilfslinien und Ebenen
      1. Erste Schritte mit Zeichenflächen
      2. Verwenden von Hilfslinien und Rastern
      3. Bildlauffähige Zeichenflächen erstellen
      4. Arbeiten mit Ebenen
      5. Erstellen von Bildlaufgruppen
    2. Formen, Objekte und Pfade
      1. Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
      2. Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
      3. Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
      4. Festlegen von Strichen, Flächen und Schlagschatten für Objekte
      5. Erstellen sich wiederholender Elemente
      6. Perspektivisches Design mit 3D-Transformationen
      7. Bearbeiten von Objekten mithilfe boolescher Operationen
    3. Text und Schriften
      1. Arbeiten mit Zeichen- und Textwerkzeugen
      2. Schriften in XD
    4. Komponenten und Zustände
      1. Arbeiten mit Komponenten
      2. Arbeiten mit verschachtelten Komponenten
      3. Hinzufügen mehrerer Zustände zu Komponenten
    5. Maskierung und Effekte
      1. Erstellen einer Maske mit Formen
      2. Arbeiten mit Weichzeichnen-Effekten
      3. Erstellen und Ändern von Farbverläufen
      4. Fülleffekte anwenden
    6. Layout
      1. Responsive Resize und Bedingungen
      2. Festlegen fester Innenabstände für Komponenten und Gruppen
      3. Erstellen dynamischer Designs mit Stapeln
    7. Videos und Lottie-Animationen
      1. Arbeiten mit Videos
      2. Arbeiten mit Lottie-Animationen
  4. Prototypen erstellen
    1. Erstellen interaktiver Prototypen
    2. Animieren von Prototypen
    3. Für Auto-Animate unterstützte Objekteigenschaften
    4. Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
    5. Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
    6. Erstellen zeitgesteuerter Übergänge
    7. Hinzufügen von Overlays
    8. Sprachprototypen erstellen
    9. Erstellen von Ankerlinks
    10. Testen von Designs und Prototypen
    11. Erstellen von Prototypen mithilfe von Videos
  5. Freigeben, Exportieren und Review
    1. Ausgewählte Zeichenflächen freigeben
    2. Freigeben von Designs und Prototypen
    3. Zugriffsberechtigungen für Links festlegen
    4. Arbeiten mit Prototypen
    5. Prototyp-Review
    6. Arbeiten mit Design-Spezifikationen
    7. Freigeben von Design-Spezifikationen
    8. Auswerten von Design-Spezifikationen
    9. Navigation in Design-Spezifikationen
    10. Reviews und Kommentarfunktion zu Design-Spezifikationen
    11. Exportieren von Design-Assets
    12. Exportieren und Herunterladen von Assets aus Design-Spezifikationen
  6. Design-Systeme
    1. Design-Systeme mit Creative Cloud-Bibliotheken
    2. Arbeiten mit Dokumentelementen in Adobe XD
    3. Arbeiten mit Creative Cloud-Bibliotheken in Adobe XD
    4. Von verknüpften Elementen zu Creative Cloud-Bibliotheken migrieren
    5. Arbeiten mit Designtoken 
    6. Verwenden von Elementen aus Creative Cloud-Bibliotheken
  7. Cloud-Dokumente
    1. Cloud-Dokumente in Adobe XD
    2. Zusammenarbeit und Co-Editing
    3. Co-Editing bei für Sie freigegebenen Dokumenten
  8. Integrationen und Plug-ins
    1. Arbeiten mit externen Elementen
    2. Arbeiten mit Design-Elementen aus Photoshop
    3. Kopieren und Einfügen von Elementen aus Photoshop
    4. Importieren oder Öffnen von Photoshop-Designs
    5. Arbeiten mit Illustrator-Elementen in Adobe XD
    6. Öffnen oder Importieren von Illustrator-Designs
    7. Vektordateien aus Illustrator nach XD kopieren
    8. Plug-ins für Adobe XD
    9. Erstellen und Verwalten von Plug-ins
    10. Jira-Integration für Adobe XD
    11. Slack-Plug-in für XD
    12. Zoom-Plug-in für XD
    13. Designs von XD aus auf Behance freigeben
  9. XD für iOS und Android
    1. Testen der Prototypen auf iOS/Android
    2. Adobe XD unter iOS/Android – Häufige Fragen
  10. Fehlerbehebung
    1. Bekannte und behobene Probleme
      1. Bekannte Probleme
      2. Behobene Probleme
    2. Installation und Updates
      1. XD scheint unter Windows nicht kompatibel zu sein
      2. Fehlercode 191
      3. Fehlercode 183
      4. Probleme beim Installieren von XD Plug-ins
      5.  Aufforderung zur Deinstallation und erneuten Installation von XD | Windows 10
      6. Probleme mit der Migration von Einstellungen
    3. Absturz beim Programmstart
      1.  Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
      2.  XD wird beendet, wenn Sie sich von Creative Cloud abmelden
      3. Problem mit dem Abonnementstatus unter Windows
      4. Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
      5. Generierung von Absturzbildern auf Windows
      6. Sammlung und Freigabe von Absturzprotokollen
    4. Cloud-Dokumente
      1. Probleme mit XD Cloud-Dokumenten
    5. Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
      1. Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
      2. Probleme mit Arbeitsabläufen für die Veröffentlichung
      3. Veröffentlichte Links werden in Browsern nicht angezeigt
      4. Prototypen werden in Browsern nicht korrekt dargestellt
      5. Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
      6. Bibliotheken können nicht veröffentlicht werden
    6. Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
      1. Import und Export in XD
      2. Photoshop-Dateien in XD
      3. Illustrator-Dateien in XD
      4. Von XD nach After Effects exportieren
      5. Sketch-Dateien in XD
      6. Apps von Drittanbietern sind im Export nicht sichtbar

Vorgaben verwenden, um Ihre Designs und Prototypen für Stakeholder, Entwickler oder Designer-Kollegen freizugeben

Im Freigabemodus in XD werden verschiedene Freigabefunktionen in XD an einem zentralen Ort zusammengefasst. Auf diese Weise können Sie Ihre Designs freigeben und problemlos mit Stakeholdern und anderen Designern zusammenarbeiten.

Sie können mithilfe integrierter Vorgaben wie Design-Review, Entwicklung, Präsentation, User Testing und Benutzerdefiniert Ihre Dokumente freigeben und Freigabelinks verwalten.

Freigeben

Im Folgenden wird erläutert, wie Sie Ihre Designs für die Freigabe vorbereiten und mit Vorgaben arbeiten – für ein einfaches Erstellen, Ändern, Freigeben und Verwalten von Freigabelinks.

Designs für die Freigabe vorbereiten

Sie können Ihre Designs organisieren und die richtigen Steuerelemente hinzufügen, um sie für Ihre Stakeholder freizugeben. Sicher würden Sie manchmal gerne verschiedene Versionen eines Designs erstellen und für verschiedene Stakeholder-Gruppen freigeben. In solchen Fällen können Sie anhand mehrerer Flows in demselben Dokument verschiedene Versionen eines Designs erstellen und freigeben. 

Mehrere Flows werden am häufigsten beim Erstellen von Oberflächen verwendet, die verschiedene Flows umfassen, etwa Anmeldebildschirme, Registrierungsbildschirme, Playlists usw.

Beispiel: Beim Gestalten von Landing Pages, Posts für soziale Medien, E-Mails und Werbeanzeigen können Sie in XD in ein- und demselben Dokument verschiedene Versionen Ihres Designs erstellen und freigeben.

Lesen Sie weiter, um zu erfahren, wie Sie in Ihrem Design-Dokument mehrere Flows definieren und dadurch Freigabelinks besser verwalten und erstellen können.

Mehrere Flows freigeben

Sobald Ihre Flows im Design-Dokument definiert und miteinander verbunden sind, können Sie sie mithilfe von Freigabelinks auf verschiedenen Zieloberflächen freigeben.

Um mehrere Flows für Ihre Stakeholder freizugeben, führen Sie die folgenden Schritte aus:

  1. Wechseln Sie in den Freigabemodus.
  2. Alle im Dokument definierten Flows werden im Freigabemodus angezeigt. 
  3. Wählen Sie im Freigabemodus einen der festgelegten Flows aus und legen Sie die erforderlichen Zugriffseinstellungen fest, bevor Sie ihn als Freigabelink veröffentlichen.
  4. Visualisieren Sie die verschiedenen Flows, die Sie auf der Arbeitsfläche erstellt haben. Wenn Sie einen Flow auswählen, hebt XD automatisch alle Zeichenflächen in diesem Flow hervor.
  5. Klicken Sie auf Link erstellen, um einen Freigabelink für Ihren Flow zu generieren. Zu einem bestimmten ausgewählten Flow werden im Freigabemodus automatisch die Details des zuletzt veröffentlichten Links angezeigt, z. B. Datum und Uhrzeit der letzten Änderung. 

Bei veröffentlichten Flows wird auf der Design-Arbeitsfläche das Symbol  angezeigt. Auf diese Weise können Sie den zuletzt veröffentlichten Link visuell identifizieren und den zugehörigen Link schnell in Ihre Zwischenablage einfügen.

Designs vorbereiten

A. Startzeichenfläche für Android-Flow B. Symbol zum Kopieren veröffentlichter Flows C. Nicht verdrahtete Zeichenflächen in Android D. Name für den iPad-Flow 

Mit Vorgaben arbeiten

XD stellt Vorgaben für verschiedene Szenarios bereit, mit denen Sie mühelos Freigabelinks für Ihre Designs erstellen können. Wenn Sie beispielsweise einen Design-Link für Reviewer erstellen, müssen Sie nur die entsprechende Vorgabe auswählen, die Zugriffsberechtigung für den Link festlegen und den Link für Ihre Stakeholder freigeben. Um die Einstellungen für Kommentare und Navigation brauchen Sie sich an dieser Stelle keine Gedanken mehr zu machen. 

Im Folgenden wird erläutert, wie Sie anhand dieser Vorgaben die Zugriffsberechtigung für den Link aktualisieren und  Links für Design- oder Prototyp-Reviews erstellen.

Design-Review Entwicklung Präsentation User Testing Benutzerdefiniert
Holen Sie Feedback zu Ihrem Design oder Ihrem Prototyp ein Geben Sie Design-Spezifikationen für Entwickler frei Optimieren Sie die Präsentation Ihres Designs für Stakeholder Laden Sie Ihre Benutzer ein, Ihr Design zu testen Passen Sie das Anwendererlebnis Ihres Designs an
 Standardeinstellungen für Vorgaben
  • Kommentieren
  • Hotspot-Hints
  • Steuerelemente für die Navigation

  • Kommentieren
  • Hotspot-Hints
  • Steuerelemente für die Navigation
  • Design-Spezifikationen
  • Hotspot-Hints
  • Steuerelemente für die Navigation
  • Vollbild

  • Vollbild
  • Kommentieren
  • Hotspot-Hints
  • Steuerelemente für die Navigation
  • Vollbild
  • Design-Spezifikationen

Sobald Ihre Zeichenflächen festgelegt und verdrahtet sind, können Sie folgende Aktionen durchführen:

  • Einzelne Zeichenfläche freigeben: Wählen Sie im Prototypmodus die Zeichenfläche aus und legen Sie sie als Startzeichenfläche fest. Stellen Sie sicher, dass alle Interaktionen mit anderen Zeichenflächen entfernt werden.
  • Alle Zeichenflächen freigeben: Wählen Sie im Prototypmodus die Zeichenflächen aus. Stellen Sie sicher, dass alle Zeichenflächen mit der Startzeichenfläche verbunden sind, bevor Sie sie freigeben.

Verschiedene Möglichkeiten zum Freigeben von Design-Spezifikationen oder Prototypen

Sobald die Zeichenflächen und Interaktions-Flows im Prototypmodus festgelegt sind, ist Ihre Design-Spezifikation bzw. Ihr Prototyp bereit für die Freigabe. Der Titel Ihres festgelegten Interaktions-Flows wird im Bereich Titel angezeigt. Sie können den Titel je nach Design-Anforderung ändern.

Um Ihre Design-Spezifikationen oder Prototypen freizugeben, wählen Sie in der Dropdown-Liste Anzeigeeinstellung eine der Vorgaben aus und legen die Zugriffsberechtigungen für den Link fest. Klicken Sie auf Link erstellen. Die URL wird im Bedienfeld Linkeinstellungen angezeigt.

Sie können die Zugriffsberechtigung einer freigegebenen Design-Spezifikation oder eines Prototyps auf öffentlich oder privat setzen oder durch ein Kennwort schützen.

Beim Freigeben eines Prototyps oder einer Design-Spezifikation können Sie entweder einen öffentlichen oder einen sicheren privaten Link veröffentlichen und seine Zugriffseinstellung jederzeit ändern. 

Festlegen von Zugriffsberechtigungen für einen Link
Zugriffsberechtigungen für einen Link festlegen

Wenn Sie die Einstellung für den Linkzugriff von öffentlich in privat oder von privat in öffentlich ändern:

  • Die Link-URL bleibt gleich.
  • Eingeladene Personen, die zu dem Link hinzugefügt wurden, bleiben erhalten.

Nach der Veröffentlichung von Kennwortlinks können Sie die Einstellung für den Linkzugriff nicht mehr ändern. Wenn Sie die Zugriffseinstellungen ändern möchten, müssen Sie einen neuen Link erstellen.

Nein, Sie brauchen keinen neuen Link für ein XD Dokument zu erstellen. Wenn Sie Ihr Design oder Ihre Vorgabe ändern, können Sie einen vorhandenen Link, den Sie bereits fürs Review freigegeben haben, aktualisieren.

Beispiel 1: Wenn Sie in Ihren Prototypen mehrere Flows erstellt und fürs Review freigegeben haben, werden alle erstellten Links in der URL-Auswahl angezeigt. Sie können nun einen beliebigen Link zum Aktualisieren auswählen, indem Sie auf Link aktualisieren klicken.

Link aktualisieren

Beispiel 2: Wenn Sie einen Prototyplink erstellt und für das Einholen von Feedback freigegeben haben und nun den Prototyp für Ihren Entwickler freigeben möchten, navigieren Sie zu Anzeigeeinstellung, wechseln Sie zu Entwicklung und klicken Sie auf Link aktualisieren.

Vorgabe ändern

Sobald Sie den Link aktualisiert haben, wird dieselbe URL mit den neuesten Informationen hinsichtlich der Vorgabe aktualisiert, wobei vorherige Kommentare, Änderungen und Unterhaltungen beibehalten werden.

Sie können veröffentlichte Links Ihres XD Dokuments verwalten, indem Sie von XD aus zur Website Links verwalten navigieren. 

Links verwalten

2. Auf der Creative Cloud-Website können Sie einen veröffentlichten Link kopieren oder löschen. 

1. Wählen Sie in der URL-Auswahl Links verwalten.

Durchgehendes Nutzererlebnis bei Freigabe-Arbeitsabläufen

Als Designer können Sie beim Freigeben von Flows in Ihren Designs und Prototypen eine der verfügbaren Beispielvorgaben verwenden und Berechtigungen für die erneute Freigabe festlegen. Reviewer können Anforderungen von anderen Reviewer-Gruppen, die auf den sicheren privaten Link zugreifen oder diesen öffnen möchten, hinzufügen, entfernen oder annehmen.
Die folgende Animation zeigt Ihnen, wie Sie Ihre Designs fürs Review freigeben und Reviewern das Weitergeben der Designs und Prototypen ermöglichen.

Arbeitsablauf der Designer

Als Reviewer können Sie per E-Mail auf die Review-Einladung zugreifen und Kommentare zu den freigegebenen Designs und Prototypen abgeben.

Die folgende Animation zeigt Ihnen, wie Sie auf eine Review-Einladung zugreifen und Kommentare zu einem freigegebenen Design abgeben können.

Reviewer

Weitere Informationen

Im folgenden Video erfahren Sie mehr über Prototypen in XD.
Dauer: 5 Minuten

Wie geht’s weiter?

Sie wissen jetzt, wie Sie Ihre Designs und Prototypen für Ihre Stakeholder freigeben. Lernen Sie als Nächstes, wie Sie Kommentare zu Prototypen und Design-Spezifikationen hinterlassen können.

Noch Fragen oder Ideen?

1

Treten beim Freigeben Ihrer Designs oder Prototypen Probleme auf? Dieser Artikel hilft Ihnen bei der Lösung. 

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