Figma Auto Layout voor flexibel, responsief design

Figma Auto Layout is de snelste manier om te stoppen met het tekenen van statische kaders en componenten te bouwen die zich als echte interfaces gedragen. Wil je knoppen, kaartlijsten en formulieren die met hun inhoud meegroeien en -krimpen, dan moet je de inhoudgevoelige regels van Auto Layout leren in plaats van elk element handmatig opnieuw uit te lijnen. In deze gids leggen we de logica uit met een CSS Flexbox-analogie en werken we stap voor stap een echt knop- en kaartvoorbeeld uit.

Wat doet Auto Layout precies?

Wanneer je Auto Layout op een frame toepast, beheert Figma dat frame als een flex-container. Onderliggende elementen zijn niet langer vrij versleepbare kaders; het zijn items die langs een as zijn geordend, met een vaste tussenruimte, die de padding van de container respecteren. Verwijder een element en de rest verschuift automatisch; verleng de tekst en de container groeit mee. In de praktijk krijg je:

Richting: horizontaal of verticaal stapelen — het equivalent van CSS flex-direction.
Gap: een vaste ruimte tussen elementen — gelijk aan gap.
Padding: de binnenruimte van de container, per zijde instelbaar.
Uitlijning: een 3x3-raster dat elementen op de hoofd- en kruisas positioneert.

Selecteer een frame en druk op Shift + A om Auto Layout direct toe te voegen; druk nogmaals op dezelfde sneltoets om het te verwijderen.

Richting, gap en padding instellen

Auto Layout toevoegen opent een nieuwe sectie in het rechterpaneel. De eerste instelling is de richting: horizontaal (→) of verticaal (↓). Staan het icoon en het label van een knop naast elkaar, kies dan horizontaal; stapelen de titel en beschrijving van een kaart, kies dan verticaal.

De tweede instelling is de gap, de ruimte tussen elementen. Je kunt een vaste pixelwaarde invoeren, of "Auto" kiezen om elementen naar beide uiteinden van de container te duwen (de gedachte van CSS justify-content: space-between). Voor padding kun je één waarde voor alle zijden invoeren, aparte horizontale/verticale waarden, of elke van de vier zijden afzonderlijk instellen.

Tot slot is er de uitlijningsregeling: klik op een punt in het 3x3-raster om elementen links/midden/rechts en boven/midden/onder uit te lijnen. Een verticale kaart wil meestal "boven-links", terwijl een knop "midden" verkiest.

Resizing: de instelling die een component echt flexibel maakt

Het krachtigste maar meest verwarrende deel van Auto Layout is het resizing-gedrag. Zowel het containerframe als elk onderliggend element heeft drie opties per as, horizontaal en verticaal:

Fixed (vast): de grootte wordt handmatig ingesteld en verandert niet.
Hug contents (inhoud omvatten): de container krimpt om precies om de inhoud te passen — zoals een knop die zich tot zijn label samentrekt.
Fill container (container vullen): het element neemt de beschikbare ruimte in de ouder in — vergelijkbaar met CSS flex-grow: 1.

De juiste combinatie verandert alles. Zet bijvoorbeeld een knopcontainer horizontaal op Hug en hij groeit naarmate het label langer wordt; zet het tekstelement erin op Fill en de container op Fixed, en de knop houdt een vaste breedte met de tekst gecentreerd. "Fill" kan alleen gekozen worden voor elementen binnen een Auto Layout-frame; op het buitenste frame verschijnt deze optie niet.

Stap voor stap: een flexibele knop

Laten we een echt responsieve knop bouwen:

Maak een tekstlaag en typ "Versturen".
Met de tekst geselecteerd, druk op Shift + A — Figma wikkelt de tekst in een Auto Layout-frame.
Laat de richting horizontaal, zet de padding op 16 horizontaal en 10 verticaal.
Zet de resizing van het frame op beide assen op Hug contents.
Voeg een hoekradius en een vulkleur toe.

Verander je het label nu van "Versturen" in "Formulier versturen", dan wordt de knop vanzelf breder en blijft de padding constant. Maak er een Component van (Ctrl/Cmd + Alt + K) en elke instantie behoudt dit flexibele gedrag. Dit komt netjes overeen met CSS:

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
}

Kaartlijsten en geneste Auto Layout

In echte projecten komt de kracht uit geneste Auto Layout. Een typische kaart bouw je zo:

Buitenste verticale Auto Layout: het kaartlichaam (padding 24, gap 12).
Daarbinnen een titeltekst en een beschrijvingstekst — beide horizontaal op Fill container.
Onderaan een horizontale Auto Layout voor knoppen, gap 8.

Plaats deze kaart in een buitenste verticale Auto Layout met een gap, en de kaart dupliceren maakt automatisch een lijst. Verwijder een kaart en de lijst sluit de ruimte zonder een gat te laten. Voor een raster met meerdere kolommen zet je de optie Wrap aan: een horizontale Auto Layout schuift elementen die niet passen naar de volgende regel — net als CSS flex-wrap: wrap.

Veelgemaakte fouten en tips

Verkeerde resizing: groeit een element onverwacht, dan staat het waarschijnlijk op "Fixed" waar het "Fill" zou moeten zijn, of andersom. Controleer dit als eerste.
Tekst breekt niet af: loopt lange tekst op één regel over, zet de tekstlaag dan horizontaal op Fill en verticaal op Auto/Hug; zorg dat de tekst in de modus "Auto height" staat in plaats van "Auto width".
Negatieve ruimte: Figma ondersteunt een negatieve gap, handig voor overlappende avatarstapels.
Absolute positie: wil je een item uit de Auto Layout-flow halen (bijvoorbeeld een badge in de hoek), selecteer het dan en schakel absolute positie in.

Veelgestelde vragen

Is Auto Layout hetzelfde als CSS Flexbox?

Niet identiek, maar de logica is bijna gelijk. Richting, gap, padding en uitlijning komen direct overeen met Flexbox-concepten; "Fill container" is ruwweg flex-grow, en "Hug contents" is het inkrimpen tot de inhoud. Daarom wordt de overdracht naar frontend veel schoner.

Hoe verwijder ik Auto Layout?

Selecteer het frame en druk opnieuw op Shift + A, of gebruik de verwijderoptie naast de Auto Layout-sectie in het rechterpaneel. De elementen blijven vrij op hun laatste positie staan.

Hoeveel geneste lagen kan ik gebruiken?

Er is geen praktische harde limiet; 3 tot 4 niveaus geneste Auto Layout zijn normaal in complexe componenten. Benoem je lagen toch betekenisvol en vermijd overbodige wrappers, anders wordt onderhoud lastiger.

Wil je een design system vanaf nul bouwen of je bestaande Figma-bestand omzetten naar responsieve componenten? Ik ontwerp Auto Layout-gebaseerde interfaces die eenvoudig aan ontwikkelaars over te dragen zijn. Laten we het over je project hebben: neem contact op.