Constraints in Figma: Responsief Ontwerp Eenvoudig Gemaakt

Constraints bepalen hoe lagen reageren wanneer je hun bovenliggende frames vergroot of verkleint, waardoor responsieve ontwerpen voor verschillende schermformaten en apparaten mogelijk zijn. Objecten binnen een frame worden child-objecten genoemd, terwijl het frame zelf het parent-frame is.

Constraints hebben horizontale (x-as) en verticale (y-as) instellingen. Standaard zijn objecten vastgezet aan de bovenkant en linkerkant van hun parent-frame.

Horizontale constraints

• Links: houdt het object gepositioneerd ten opzichte van de linkerkant;
• Rechts: positie ten opzichte van de rechterkant;
• Links + Rechts: de grootte van het object past zich aan met het frame langs de x-as;
• Midden: houdt het object horizontaal gecentreerd;
• Schaal: past de grootte en positie van het object proportioneel aan het frame aan.

Verticale constraints

• Boven: positie ten opzichte van de bovenrand;
• Onder: positie ten opzichte van de onderrand;
• Boven + Onder: de grootte van het object past zich aan met het frame langs de y-as;
• Midden: houdt het object verticaal gecentreerd;
• Schaal: vergelijkbaar met horizontaal schalen, maar dan voor de y-as.

Constraints kunnen ook visueel worden ingesteld met behulp van het constraints-vak in het ontwerppaneel.

Constraints gebruiken voor responsief ontwerp

• Objecten (zoals tekst, knoppen, afbeeldingen) uitlijnen met layoutraster voor nauwkeurige positionering;
• Constraints voor elk object aanpassen op basis van het gewenste gedrag bij het wijzigen van het frameformaat;
• Zorgen dat groepen of gemaskeerde objecten correct werken door ze in frames te plaatsen en constraints opnieuw toe te passen. Sneltoets is CTRL + ALT + G (Windows), of Command + Option + G (Mac);
• Responsiviteit testen door het parent-frame te vergroten of verkleinen om te controleren op vervorming of verkeerde uitlijning.