Beim Entwickeln von Designs für verschiedene Geräte müssen Sie auf die verschiedenen Bildschirmgrößen achten, die auf Smartphones, Tablets und Desktops verwendet werden. Da nicht alle Anwender die gleichen Geräte verwenden, müssen Designer berücksichtigen, wie Inhalte auf Bildschirmen unterschiedlicher Größe dargestellt werden. 

Um dieses Benutzerproblem zu lösen, wurde für Adobe XD eine Funktion mit dem Namen „Responsive Resize“ entwickelt, mit der Objekte zur optimalen Anpassung an mehrere Bildschirmgrößen skalieren werden, während bei unterschiedlicher Größe die relativen räumlichen Positionen beibehalten werden.

Mit Responsive Resize arbeiten

Mit Responsive Resize prognostiziert XD, welche Bedingungen Sie wahrscheinlich anwenden werden, und wendet diese Bedingungen beim Skalieren von Objekten automatisch an. 

Zum Erzielen eines responsiven Verhaltens mussten Designer bisher Bedingungen manuell auf mehrere Objekte anwenden, um das Objektverhalten bei Größenänderungen zu definieren. Dieses eintönige und zeitintensive Verfahren beruhte eher auf Vermutungen und sich wiederholenden Bewegungen, die den kreativen Aspekt der Designentwicklung in den Hintergrund drängte.

XD wendet Bedingungen automatisch an, indem die von Ihnen ausgewählten Objekte, ihre Gruppierungsstruktur und die Nähe zu den Kanten der übergeordneten Gruppe sowie die Layoutinformationen analysiert werden.

Markierungen für Responsive Resize

Beim Skalieren werden auf dem zu skalierenden Objekt rosa Markierungen angezeigt. Diese Markierungen zeigen an, welche Bedingungsregeln auf eine Gruppe angewendet werden. XD bietet eine visuelle und kontextbezogene Methode, um zu ermitteln, wie sich die Responsive Resize-Bedingungen in Kombination mit den manuellen Bedingungen auswirken.

Responsive Resize und Gruppen

Vor dem Skalieren können Sie ähnliche Objekte gruppieren, um Beziehungen zwischen ihnen herzustellen. XD behält die Gruppierung der Objekte standardmäßig bei und ermöglicht es Ihnen, mit einem Anordnungsverfahren, das Sie bereits verwenden, eine Hierarchie in den Projekten herzustellen. Die Gruppierung von Objekten bleibt nach der Skalierung erhalten.

Bedingungen manuell bearbeiten

Wenn Sie mit den Ergebnissen des Responsive Resize nicht zufrieden sind, können Sie die Bedingungsregeln manuell bearbeiten. Durch Definieren manueller Bedingungen können Sie explizit festlegen, wie sich Objekte verhalten, wenn Sie eine Komponente, eine Zeichenfläche oder eine Gruppe mit den darin enthaltenen Ebenen skalieren.

Wählen Sie Manuell, um die Bedingungen manuell zu bearbeiten, die von Responsive Resize für Objekte festgelegt wurden. Manuelle Bedingungen haben immer Vorrang vor Bedingungen, die von XD automatisch festgelegt wurden. Mithilfe der folgenden Bedingungen können Sie die Regeln festlegen und das Verhalten der verschiedenen Komponenten steuern.

• Feste/variable Breite
• Feste/variable Höhe
• Fester/variabler linker Rand
• Fester/variabler rechter Rand
• Fester/variabler oberer Rand
• Fester/variabler unterer Rand

Responsives Skalieren von Zeichenflächen

Standardmäßig ist Responsive Resize für Zeichenflächen deaktiviert. Sie können die Funktion jedoch aktivieren, damit Zeichenflächen responsiv skaliert werden.

So aktivieren Sie Responsive Resize:

Andere Skalierverhalten für Gruppen verwenden

Responsive Resize ist das Standardverhalten beim Skalieren einer Mehrfachauswahl oder Gruppe. Um die Aktivierung von Responsive Resize aufzuheben, haben Sie folgende Möglichkeiten: 

• Verwenden Sie für eine skalierte Größenänderung die Umschalttaste, um das Responsive-Verhalten vorübergehend zu überschreiben. Ziehen Sie einen der Auswahlziehpunkte an den Ecken, um beim Skalieren das Seitenverhältnis der Gruppe beizubehalten.
• Deaktivieren Sie die Option „Responsive Resize“ im Eigenschafteninspektor.