Constraints ist eine der leistungsstärksten Funktionen in Figma, mit der Sie adaptive Layouts erstellen können, die sich automatisch an die Bildschirmgrößen anpassen. Wenn Sie professionelle und moderne Designs über behance erstellen möchten, ohne lange und komplexe Prozesse zu verwenden, sollten Sie constraints unbedingt kennen und verwenden.
Führen Sie die folgenden Schritte aus, um Constraints in der Figur zu aktivieren:
- Wählen Sie eine Ebene aus
Wählen Sie am Anfang die Ebene oder Gruppe aus, auf die Sie Constraints anwenden möchten. - Öffnen Sie den Bereich constraints
Um den Bereich "Constraints" zu öffnen, gehen Sie zur rechten Symbolleiste und wählen Sie die Registerkarte "Constraints" aus. - Constraints einrichten
Nach dem Öffnen des Constraints-Bereichs werden Sie aufgefordert, auszuwählen, wie viele und welche Constraints Sie anwenden möchten. Sie können beispielsweise vertikale und horizontale Constraints auswählen, um ein adaptives Layout zu erstellen. - Wenden Sie Constraints an
Wenn Sie Constraints konfiguriert haben, klicken Sie einfach auf die Schaltfläche Anwenden oder drücken Sie die Eingabetaste, und Figma wendet die Constraints automatisch auf die ausgewählten Layer oder Gruppen an. - Konfigurieren von Constraints für andere Layer
Wiederholen Sie die Schritte 1 bis 4, um die Constraints für andere Ebenen oder Gruppen in Ihrem Design einzurichten.
Jetzt haben Sie eine grundlegende Vorstellung davon, wie Sie Constraints in einem Figma einschließen können. Erkunden Sie als Nächstes die verschiedenen Arten von Constraints und deren Möglichkeiten, um komplexere und interessantere adaptive Layouts zu erstellen.
Wie aktiviere ich Constraints in Figma
Mit Constraints in Figma können Sie adaptive Designs erstellen, die automatisch skaliert und an verschiedene Bildschirmgrößen angepasst werden. Wenn Sie constraints aktivieren, können Sie Layouts erstellen, die auf jedem Gerät gut aussehen.
Führen Sie die folgenden Schritte aus, um Constraints in der Figur zu aktivieren:
- Objekte auswählen: Wählen Sie alle Objekte aus, auf die Sie Constraints anwenden möchten. Sie können mehrere Objekte auswählen, indem Sie die Umschalttaste oder die Strg-Taste (Cmd auf dem Mac) gedrückt halten und auf die Objekte klicken.
- Öffnen Sie die Konstanten-Leiste: Suchen Sie im rechten Fensterbereich im Bild den Abschnitt "Constraints" und klicken Sie darauf, um das Constraints-Panel zu öffnen.
- Wenden Sie Constraints an: Innerhalb des Constraints-Panels sehen Sie horizontale und vertikale Constraints. Wählen Sie die gewünschten Optionen aus, um festzulegen, wie Objekte skaliert und auf verschiedenen Geräten positioniert werden sollen.
Nachdem Sie die constraints angewendet haben, können Sie sehen, wie sich die Objekte automatisch an die Größenänderung des Layouts oder Ansichtsfensters anpassen. Sie können auch zusätzliche Constraints-Parameter konfigurieren, z. B. feste Einrückung oder maximale und minimale Objektgrößenwerte.
Constraints sind ein leistungsfähiges Werkzeug in Figma, mit dem Sie ansprechende und flexible Designs erstellen können. Verwenden Sie diese Funktion, um einfach Layouts zu erstellen, die auf jedem Gerät gut aussehen.
Schritt 1. Öffnen Sie die Figur und wählen Sie das Projekt aus
Um mit constraints in Figma zu beginnen, müssen Sie die App auf Ihrem Gerät öffnen und das Projekt auswählen, in dem Sie diese Funktionen verwenden möchten. Wenn Sie bereits ein Projekt haben, öffnen Sie es einfach in der Abbildung. Wenn nicht, erstellen Sie ein neues Projekt, indem Sie im Hauptmenü der Figur auf die Schaltfläche "Neues Projekt erstellen" klicken.
Wählen Sie ein Projekt aus der Liste der verfügbaren Projekte aus, oder geben Sie den Dateipfad an, wenn es sich auf Ihrem Computer oder im Cloud-Speicher befindet.
Stellen Sie sicher, dass das ausgewählte Projekt zur Bearbeitung geöffnet ist, damit Sie Constraints in Ihrem Design hinzufügen und verwenden können.
Schritt 2. Wählen Sie das Element aus, auf das Constraints angewendet werden sollen
Nachdem Sie den Rahmen erstellt haben, wählen Sie im nächsten Schritt das Element aus, auf das Sie Constraints anwenden möchten. Dies kann ein beliebiges Objekt oder eine Gruppe von Objekten in Ihrem Dokument sein. Klicken Sie dazu auf das Element, das Sie auswählen möchten, damit es aktiv wird.
Wenn Sie ein Element auswählen, sehen Sie, dass am oberen Rand des Arbeitsbereichs der Figur verschiedene Optionen und Einstellungen für das ausgewählte Element angezeigt werden. Hier können Sie constraints anwenden, um bestimmte Regeln für die Position des ausgewählten Elements in Ihrem Layout festzulegen.
Schritt 3. Öffnen Sie das Menü Eigenschaften und konfigurieren Sie constraints
Nachdem Sie Objekte auf Ihrer Layoutseite in Figma erstellt und platziert haben, können Sie constraints so konfigurieren, dass sie beim Ändern der Bildschirmgröße ihr Verhalten bestimmen.
Um zu beginnen, wählen Sie das Objekt aus, für das Sie Constraints konfigurieren möchten, indem Sie darauf klicken. Öffnen Sie dann das Menü "Eigenschaften", das sich in der rechten Spalte von Figma befindet.
Im Menü "Eigenschaften" werden verschiedene Einstellungsfenster angezeigt, einschließlich des Bedienfelds "Constraints". In diesem Bereich können Sie constraints für das ausgewählte Objekt festlegen.
Constraints können entlang der horizontalen Achse (links/rechts) und entlang der vertikalen Achse (oben/unten) installiert werden. Je nachdem, wie sich das Objekt beim Ändern der Bildschirmgröße verhalten soll, können Sie für jede Achse unterschiedliche Werte auswählen.
Die Constraints-Einstellungen werden als Selektoren dargestellt, mit denen Sie aus verschiedenen Optionen auswählen können, z. B. "Fester Wert", "Proportionaler Wert" oder "Referenzlinie". Wählen Sie für jede Achse eine geeignete Einstellung aus, und legen Sie die gewünschten Werte fest.
Sobald Sie constraints für das ausgewählte Objekt festgelegt haben, wird es automatisch ausgerichtet und seine Größe angepasst, wenn die Bildschirmgröße basierend auf den angegebenen Constraints geändert wird.
Wiederholen Sie diesen Schritt für jedes Objekt in Ihrem Layout, dem Sie Constraints hinzufügen möchten. Sie können dann selbstbewusst adaptive Layouts erstellen, die perfekt auf Bildschirmen unterschiedlicher Größe und Auflösungen angezeigt werden.
