Einschränkungen
Einschränkungen definieren, wie Ebenen reagieren, wenn Sie ihre übergeordneten Rahmen ändern, und ermöglichen so responsive Designs für verschiedene Bildschirmgrößen und Geräte. Objekte innerhalb eines Rahmens werden als Kindobjekte bezeichnet, während der Rahmen selbst der übergeordnete Rahmen ist.
Einschränkungen haben horizontale (x-Achse) und vertikale (y-Achse) Einstellungen. Standardmäßig sind Objekte an den oberen und linken Kanten ihres übergeordneten Rahmens ausgerichtet.
Horizontale Einschränkungen
- Links: hält das Objekt relativ zur linken Seite positioniert;
- Rechts: positioniert relativ zur rechten Seite;
- Links + Rechts: Die Größe des Objekts passt sich mit dem Rahmen entlang der x-Achse an;
- Zentrum: hält das Objekt horizontal zentriert;
- Skalieren: passt die Größe und Position des Objekts proportional zum Rahmen an.
Vertikale Einschränkungen
- Oben: positioniert relativ zur oberen Kante;
- Unten: positioniert relativ zur unteren Kante;
- Oben + Unten: die Größe des Objekts passt sich mit dem Rahmen entlang der y-Achse an;
- Zentrum: hält das Objekt vertikal zentriert;
- Skalieren: ähnlich wie horizontales Skalieren, aber für die y-Achse.
Einschränkungen können auch visuell mit dem Einschränkungsfeld im Design-Panel festgelegt werden.
Verwendung von Einschränkungen für responsives Design
- Richten Sie Objekte (z.B. Text, Schaltflächen, Bilder) mit Layout-Rastern für präzise Positionierung aus;
- Passen Sie die Einschränkungen für jedes Objekt basierend darauf an, wie es sich verhalten soll, wenn der Rahmen geändert wird;
- Stellen Sie sicher, dass Gruppen oder maskierte Objekte wie beabsichtigt funktionieren, indem Sie sie in Rahmen verschachteln und Einschränkungen erneut anwenden. Die Verknüpfung ist CTRL + ALT + G (Windows) oder Command + Option + G (Mac);
- Testen Sie die Responsivität, indem Sie den übergeordneten Rahmen ändern, um sicherzustellen, dass keine Verzerrungen oder Fehlausrichtungen auftreten.
1. Was steuern Einschränkungen in Figma hauptsächlich?
2. Was passiert, wenn Sie die "Skalieren"-Einschränkung auf ein Objekt anwenden?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.78
Einschränkungen
Swipe um das Menü anzuzeigen
Einschränkungen definieren, wie Ebenen reagieren, wenn Sie ihre übergeordneten Rahmen ändern, und ermöglichen so responsive Designs für verschiedene Bildschirmgrößen und Geräte. Objekte innerhalb eines Rahmens werden als Kindobjekte bezeichnet, während der Rahmen selbst der übergeordnete Rahmen ist.
Einschränkungen haben horizontale (x-Achse) und vertikale (y-Achse) Einstellungen. Standardmäßig sind Objekte an den oberen und linken Kanten ihres übergeordneten Rahmens ausgerichtet.
Horizontale Einschränkungen
- Links: hält das Objekt relativ zur linken Seite positioniert;
- Rechts: positioniert relativ zur rechten Seite;
- Links + Rechts: Die Größe des Objekts passt sich mit dem Rahmen entlang der x-Achse an;
- Zentrum: hält das Objekt horizontal zentriert;
- Skalieren: passt die Größe und Position des Objekts proportional zum Rahmen an.
Vertikale Einschränkungen
- Oben: positioniert relativ zur oberen Kante;
- Unten: positioniert relativ zur unteren Kante;
- Oben + Unten: die Größe des Objekts passt sich mit dem Rahmen entlang der y-Achse an;
- Zentrum: hält das Objekt vertikal zentriert;
- Skalieren: ähnlich wie horizontales Skalieren, aber für die y-Achse.
Einschränkungen können auch visuell mit dem Einschränkungsfeld im Design-Panel festgelegt werden.
Verwendung von Einschränkungen für responsives Design
- Richten Sie Objekte (z.B. Text, Schaltflächen, Bilder) mit Layout-Rastern für präzise Positionierung aus;
- Passen Sie die Einschränkungen für jedes Objekt basierend darauf an, wie es sich verhalten soll, wenn der Rahmen geändert wird;
- Stellen Sie sicher, dass Gruppen oder maskierte Objekte wie beabsichtigt funktionieren, indem Sie sie in Rahmen verschachteln und Einschränkungen erneut anwenden. Die Verknüpfung ist CTRL + ALT + G (Windows) oder Command + Option + G (Mac);
- Testen Sie die Responsivität, indem Sie den übergeordneten Rahmen ändern, um sicherzustellen, dass keine Verzerrungen oder Fehlausrichtungen auftreten.
1. Was steuern Einschränkungen in Figma hauptsächlich?
2. Was passiert, wenn Sie die "Skalieren"-Einschränkung auf ein Objekt anwenden?
Danke für Ihr Feedback!