Benutzerhandbuch Abbrechen

Erstellen sich wiederholender Elemente

Suchen
  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. Adobe XD-Abo-Varianten
    12. Ä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. Erstellen von Prototypen mit Videos
      3. 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. Erstellen von Hyperlinks
    11. Testen von Designs und Prototypen
  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
    13. Gruppenfreigabe für Unternehmen
  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 sowie Creative Cloud-Bibliotheken.
      1. Probleme mit XD Cloud-Dokumenten
      2. Probleme mit verknüpften Komponenten
      3. Probleme mit Bibliotheken und Links
    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

Anhand eines Wiederholungsrasters Elemente erstellen, die sich wiederholen

Beim Entwerfen von Seiten für das Web oder für mobile Apps müssen oft Elemente, die sich wiederholen, oder Inhaltslisten definiert werden. Solche Elemente zu erstellen oder bei Design-Änderungen zu aktualisieren, kann jedoch recht zeitaufwendig sein.

Die Funktion Wiederholungsraster macht aus einer Gruppe von Elementen ein sich wiederholendes Element. Sie ziehen das Element einfach in eine beliebige Richtung und das Raster wird wiederholt. Wenn Sie den Stil eines Elements ändern, wird die Änderung in allen anderen Elementen des Rasters ausgeführt. Angenommen, Sie ändern in einem der Elemente die Bildgröße, so wird die Größe aller Bilder im Raster automatisch angepasst.

Wenn sich ein Textelement im Raster befindet, wird nur der Stil des Textelements repliziert und nicht der Inhalt. Auf diese Weise können Sie Textelemente schnell formatieren, obwohl der Inhalt in den einzelnen Rasterelementen unterschiedlich ist.

Sie können Platzhaltertext in einem Wiederholungsraster ersetzen, indem Sie eine Textdatei auf das Raster ziehen.

Wiederholungsraster erstellen

Im Grunde ist ein Wiederholungsraster eine spezielle Art von Gruppe. Sie erstellen ein Wiederholungsraster, indem Sie ein Objekt oder eine Objektgruppe auswählen und sie in ein Wiederholungsraster konvertieren.

  1. Erstellen Sie das Grundelement, das wiederholt werden soll, z. B. eine Kombination aus Miniaturbildern und Text.

  2. Wählen Sie die Elemente aus, die wiederholt werden sollen.

  3. Konvertieren Sie die Auswahl in ein Wiederholungsraster, indem Sie im Eigenschafteninspektor auf die Schaltfläche „Wiederholungsraster“ klicken oder Cmd + R (macOS) bzw. Strg + R (Windows) drücken.

    An der Elementbegrenzung werden große Griffe angezeigt.

    Griffe zum Wiederholen eines Elements oder einer Elementgruppe
    Griffe zum Wiederholen eines Elements oder einer Elementgruppe

  4. Um das Element in einem vertikalen Raster zu wiederholen, ziehen Sie den Griff am unteren Rand des Elements. Um das Element in einem horizontalen Raster zu wiederholen, ziehen Sie den Griff am rechten Rand des Elements.

    Vertikales Wiederholungsraster

    Horizontales Wiederholungsraster

  5. Um Elemente in einem Raster für die Bearbeitung auszuwählen, doppelklicken Sie auf das Raster.

Um die Gruppierung der Rasterelemente aufzuheben und diese einzeln zu bearbeiten, wählen Sie das Raster aus und klicken im Eigenschafteninspektor auf „Gruppierung des Wiederholungsrasters aufheben“.

Um auf einzelne Komponenten des Wiederholungsrasters zuzugreifen, doppelklicken Sie in die Gruppe.

Nachdem Sie alle Änderungen vorgenommen haben, schließen Sie den Bearbeitungsmodus, indem Sie die Esc-Taste drücken.

Hinweis:

Sie können auch auf einzelne Komponenten zugreifen, indem Sie im Bedienfeld Ebene das betreffende Element ansteuern oder es direkt auswählen.

Abstand zwischen zwei Elementen in einem Wiederholungsraster anpassen

Um den Abstand zwischen zwei Elementen im Raster anzupassen, führen Sie den Mauszeiger über die Lücke zwischen den Elementen. Wenn der Cursor die Form eines Doppelpfeils annimmt, ziehen Sie, um den Abstand zu erhöhen bzw. zu verringern.

Vertikales Raster mit sich wiederholenden Elementen
Vertikales Raster mit sich wiederholenden Elementen

Text in einem Wiederholungsraster

In einem Wiederholungsraster haben Sie verschiedene Möglichkeiten, um Text einzufügen oder zu bearbeiten. Sie können entweder jede einzelne Instanz eines Textobjekts in einem Wiederholungsraster aktualisieren oder Sie ziehen ein bereits ausgefülltes TXT-Dokument auf ein Wiederholungsraster, sodass der Inhalt der Textdatei automatisch auf die Instanzen des Textobjekts im Wiederholungsraster verteilt wird. 

Einzelne Textelemente in einem Wiederholungsraster aktualisieren

  1. Klicken Sie bei gedrückter Cmd- (macOS) bzw. Strg-Taste (Windows) auf ein Textobjekt, um es auszuwählen. 

  2. Um das Textelement zu bearbeiten, doppelklicken Sie darauf und ändern den Text.

Hinweis:

Änderungen am Inhalt werden nicht auf die anderen Textobjekte in einem Wiederholungs-Raster angewendet. Allerdings wird jedes Format, das auf ein Textobjekt angewendet wird, auch auf alle anderen Textobjekte übertragen.

Textdatei mit Zeilenumbruchzeichen auf ein Textobjekt im Wiederholungsraster ziehen

Sie können den Platzhaltertext in einem Wiederholungsraster ersetzen, indem Sie eine Textdatei auf das Raster ziehen.

  1. Erstellen Sie eine Textdatei mit der Erweiterung „.txt“. Sie können die Textdatei mit TextEdit für Mac oder dem Windows-Editor oder jedem sonstigen Texteditor erstellen (und mit der Endung „.txt“ speichern). Stellen Sie sicher, dass die Kodierung auf UTF-8 festgelegt ist. Trennen Sie die einzelnen Datenzeilen durch Zeilenumbruchzeichen. 

  2. Ziehen Sie die Textdatei auf das Wiederholungsraster.

    Die Textdatei wird auf ein Objekt in einem Wiederholungsraster gezogen
    Die Textdatei wird auf ein Objekt in einem Wiederholungsraster gezogen - Muss noch aktualisiert werden

    Das Wiederholungsraster wird mit dem Text aus der Textdatei aufgefüllt, und zwar in derselben Reihenfolge wie in der Textdatei. Wenn mehr Rasterbereiche als Textzeilen vorhanden sind, wird die Sequenz wiederholt.

Bilder in einem Wiederholungsraster

Mit Bildern können Sie sich wiederholende Muster von Objekten erstellen, wobei die Bildfläche eines Objekts in einem Muster wiederholt wird, das Sie selbst festlegen können.

Sie können das Muster, nach dem die Bildfläche gefüllt wird, festlegen, indem Sie ein Bild nach dem andern auf ein Objekt ziehen oder indem Sie mehrere Bilder auswählen und sie zusammen auf ein Objekt im Wiederholungsraster ziehen.

Die Bilddateien werden auf ein Objekt in einem Wiederholungsraster gezogen
Die Bilddateien werden auf ein Objekt in einem Wiederholungsraster gezogen - Muss noch aktualisiert werden

Bilder in einem Wiederholungsraster ersetzen

Wenn Sie die Bilder im Raster ersetzen möchten, öffnen Sie den Finder oder Windows-Explorer und öffnen das Verzeichnis, in dem Sie die Bilder für Ihr Projekt gespeichert haben. Wählen Sie alle Bilder aus, die in dem Raster angezeigt werden sollen, und ziehen Sie sie auf das Zielobjekt innerhalb des Wiederholungsrasters.

Die älteren Bilder werden durch die neuen ersetzt, deren Größe automatisch angepasst wird.

Interaktionen aus einem Wiederholungsraster heraus erstellen

Im Prototypmodus haben Sie verschiedene Möglichkeiten, um in einem Wiederholungsraster Verdrahtungen mit anderen Zeichenflächen zu definieren:

Das gesamte Wiederholungsraster einer einzigen Interaktion zuordnen

  1. Erstellen Sie im Designmodus mithilfe des Werkzeugs „Zeichenfläche“ eine zweite Zeichenfläche.

  2. Wechseln Sie zum Prototypmodus, indem Sie die Registerkarte „Prototyp“ öffnen oder Ctrl + Tab (macOS) bzw. Strg + Tab (Windows) drücken.

  3. Wählen Sie auf der ersten Zeichenfläche das Wiederholungsraster aus. Rechts vom Objekt wird eine Verbindungslinie mit einem Pfeil in der Mitte angezeigt.

  4. Ziehen Sie die Verbindungslinie zur nächsten Zeichenfläche. Wählen Sie im Popup-Menü die Optionen für den Übergang aus und drücken Sie die Esc-Taste oder klicken Sie auf eine Stelle außerhalb des Popup-Menüs, damit es wieder geschlossen wird.

  5. Testen Sie die Interaktion, indem Sie oben rechts im Anwendungsrahmen auf die Wiedergabeschaltfläche klicken oder Cmd + Eingabe (macOS) bzw. Strg + Eingabe (Windows) drücken. Klicken Sie auf eine beliebige Stelle über dem Wiederholungsraster, um die Interaktion abzuspielen.

Ein bestimmtes Element aus einem Wiederholungsraster einer Interaktion zuordnen

  1. Wählen Sie ein Objekt innerhalb des Wiederholungsrasters aus.

  2. Ziehen Sie die Verbindungslinie auf der rechten Seite des Rechtecks auf die Zeichenfläche, die damit verdrahtet werden soll. Wählen Sie im Popup-Menü die Optionen für den Übergang aus und drücken Sie die Esc-Taste oder klicken Sie auf eine Stelle außerhalb des Popupmenüs, damit es wieder geschlossen wird.

  3. Testen Sie die Interaktion, indem Sie oben rechts im Anwendungsrahmen auf die Wiedergabeschaltfläche klicken oder Cmd + Eingabe (macOS) bzw. Strg + Eingabe (Windows) drücken. Klicken Sie auf das Objekt, um die Interaktion zu überprüfen.

Innerhalb des Wiederholungsrasters eine Gruppe von Elementen erstellen und die gesamte Gruppe der Interaktion zuordnen

Sie können auch innerhalb des Wiederholungsrasters eine Objektgruppe definieren und dann von dieser Gruppe ausgehend Interaktionen erstellen.

  1. Wählen Sie im Wiederholungsraster ein Objekt aus und klicken Sie dann bei gedrückter Umschalttaste auf andere Objekte, um sie zu Ihrer Auswahl hinzuzufügen.

  2. Nach Auswahl der Objekte klicken Sie mit der rechten Maustaste und wählen im Kontextmenü die Option Gruppe. Sie können diese Objekte auch mit dem Tastaturbefehl Cmd + G (macOS) bzw. Strg + G (Windows) gruppieren.

  3. Wechseln Sie in den Prototypmodus. Ziehen Sie die Verbindungslinie von der Gruppe zu der Zeichenfläche, mit der Sie sie verdrahten wollen.

  4. Testen Sie die Interaktion, indem Sie oben rechts im Anwendungsrahmen auf die Wiedergabeschaltfläche klicken oder Cmd + Eingabe (macOS) bzw. Strg + Eingabe (Windows) drücken. Klicken Sie auf die Gruppe, um die Interaktion zu überprüfen.

Inhalte mit Wiederholungsraster importieren

Es folgt ein 3-minütiges Beispielvideo zum Einstieg in Wiederholungsraster. 

Ähnliche Themen

Adobe-Logo

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie