Begränsningar i Figma: Responsiv Design Gjord Enkelt

Begränsningar definierar hur lager reagerar när du ändrar storlek på deras överordnade ramar, vilket möjliggör responsiva designer för olika skärmstorlekar och enheter. Objekt inom en ram kallas underordnade objekt, medan ramen själv är överordnad ram.

Begränsningar har horisontella (x-axel) och vertikala (y-axel) inställningar. Som standard är objekt begränsade till övre och vänstra kanterna av deras överordnade ram.

Horisontella begränsningar

• Vänster: håller objektet positionerat relativt till vänster sida;
• Höger: positionerar relativt till höger sida;
• Vänster + Höger: objektets storlek justeras med ramen längs x-axeln;
• Centrera: håller objektet horisontellt centrerat;
• Skala: justerar objektets storlek och position proportionellt till ramen.

Vertikala begränsningar

• Topp: positionerar relativt till övre kanten;
• Botten: positionerar relativt till nedre kanten;
• Topp + Botten: objektets storlek justeras med ramen längs y-axeln;
• Centrera: håller objektet vertikalt centrerat;
• Skala: liknande horisontell skalning men för y-axeln.

Begränsningar kan också ställas in visuellt med hjälp av begränsningsrutan i designpanelen.

Använda begränsningar för responsiv design

• Justera objekt (t.ex. text, knappar, bilder) med layoutnät för exakt placering;
• Anpassa begränsningar för varje objekt baserat på hur det ska bete sig när ramen ändras i storlek;
• Säkerställ att grupper eller maskerade objekt beter sig som avsett genom att kapsla in dem i ramar och återapplicera begränsningar. Genväg är CTRL + ALT + G (Windows), eller Command + Option + G (Mac);
• Testa responsivitet genom att ändra storlek på den överordnade ramen för att säkerställa att ingen förvrängning eller feljustering uppstår.