Constraints in Figma: Responsief Ontwerp Eenvoudig Gemaakt

Beperkingen 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 kindobjecten genoemd, terwijl het frame zelf het bovenliggende frame is.

Beperkingen hebben horizontale (x-as) en verticale (y-as) instellingen. Standaard zijn objecten beperkt tot de bovenkant en linkerkant van hun bovenliggende frame.

Horizontale beperkingen

• 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 beperkingen

• 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.

Beperkingen kunnen ook visueel worden ingesteld met behulp van het beperkingenvak in het ontwerppaneel.

Beperkingen gebruiken voor responsief ontwerp

• Objecten (zoals tekst, knoppen, afbeeldingen) uitlijnen met layoutraster voor nauwkeurige positionering;
• Beperkingen 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 nesten en beperkingen opnieuw toe te passen. Sneltoets is CTRL + ALT + G (Windows), of Command + Option + G (Mac);
• Responsiviteit testen door het bovenliggende frame te vergroten of verkleinen om te controleren of er geen vervorming of verkeerde uitlijning optreedt.