Hoe automatische lay-out te gebruiken in Figma

Auto Layout is een essentieel hulpmiddel voor elke ontwerper en Figma-gebruiker. Met deze functie kunt u wijzigingen aanbrengen, zoals het wijzigen van de grootte of het verplaatsen van kaders en objecten. Met Auto Layout kunt u bijvoorbeeld de hoogte en het gewicht van een element aanpassen met een automatische instelling, waardoor uw werk wordt gehalveerd.

Omdat de schermgrootte verandert op basis van het apparaat of de browser die de gebruiker zal gebruiken om toegang te krijgen tot de website, zorgt Auto Layout ervoor dat de elementen binnen de frames zich aanpassen aan die veranderingen. Hierdoor oogt de indeling en structuur preciezer en in synergie. Lees verder om te leren hoe u Auto Layout in Figma en de functies ervan kunt gebruiken.

Automatische lay-out gebruiken

Als u Automatische lay-out en al zijn functies wilt gebruiken, moet u deze eerst toevoegen aan een frame waaraan u werkt. Dit kan een nieuw frame zijn of een frame met inhoud, objecten en componenten. Nadat u het frame of de objecten hebt geselecteerd, kunt u als volgt Automatische lay-out eraan toevoegen:

• Druk op "Alt + A" op uw toetsenbord (werkt op Mac en Windows).
• Klik met de rechtermuisknop op de objecten of componenten en klik op Automatische lay-out (u moet deze functie aan elke component toevoegen omdat dit onmogelijk is in bulk).
• Tik op het pluspictogram naast de optie “Auto Layout” in het menu op Figma.

Naast het toevoegen van Automatische lay-out aan uw frame, kunt u verschillende dingen doen, van het stapelen van frames tot het dupliceren, rangschikken en verwijderen van objecten.

Objecten toevoegen en verwijderen

Het toevoegen van objecten aan uw frame is vrij eenvoudig. U hoeft alleen maar het object te pakken dat u wilt toevoegen en de indicator te volgen. En als u er een wilt verwijderen, sleept u deze weer naar buiten en drukt u op delete. Als u ervoor kiest om een ​​groter object toe te voegen dan het bovenliggende frame, moet u de standaardinstellingen van Figma vermijden om dit te kunnen doen. U kunt dit doen door de knop "Ctrl" voor Windows en "Command" voor Mac ingedrukt te houden.

Objecten dupliceren

Als u twee of meer identieke objecten aan het frame wilt toevoegen, kunt u ze dupliceren, wat een handige Auto Layer-functie is. Dit is hoe je het kunt doen:

1. Tik op het object dat u wilt dupliceren.
   
2. Houd de knoppen "Ctrl" en "D" tegelijkertijd ingedrukt als u Windows heeft.
   
3. Voor Mac: dupliceer door de knoppen "Command" en "D" ingedrukt te houden.
   

Objecten rangschikken

Als het uiterlijk van uw frame en de organisatie van de objecten en componenten daarin u niet bevallen, kunt u deze opnieuw rangschikken. Als u twee lagen heeft samengevoegd, moet u de standaardinstellingen van Figma omzeilen door op “Ctrl” voor Windows en “Command” voor Mac te drukken om toegang te krijgen tot de diepe selectieoptie en de component van de initiële laag te verplaatsen. Als het echter om één frame gaat, kunt u een object selecteren en naar een andere plek verplaatsen, vergelijkbaar met het toevoegen van objecten, of de pijltjestoets gebruiken.

Automatische lay-outniveaus

Een ander kenmerk van Automatische lay-out is het combineren van meer frames in één om een ​​ingewikkeldere interface te creëren waarin u verschillende niveaus van Automatische lay-out kunt over elkaar heen leggen, zoals knoppen en knoprijen, een bericht en een tijdlijn. Op elk niveau kunt u nog een object aan uw frame toevoegen. De niveaus van knoppen en knoppenrijen zijn horizontaal, terwijl een bericht een verticale laag is waarin u beschrijvingen, afbeeldingen, enz. kunt invoeren.

Wanneer u twee frames op elkaar stapelt, worden ze samengevoegd en krijgen ze de eigenschappen van een ouderframe. Hierdoor kan de gebruiker verstelbare objecten implementeren. Je kunt er één pakken en op een andere plaatsen om twee frames met elkaar te verbinden. Om dit te doen, moet u:

1. Kies één frame en alles wat je eraan wilt toevoegen.
   
2. Druk op "Shift + A" om een ​​Auto Layout-frame toe te voegen.
   

Automatische lay-outfuncties

De optie Automatische lay-out in Figma heeft veel waardevolle eigenschappen of functies, van richting en stapelvolgorde tot afstand, formaatwijziging en uitlijning. In dit gedeelte wordt elk van deze functies gedetailleerder besproken.

Richting

Zoals de naam al doet vermoeden, verwijst richting naar de volgorde van objecten in een frame. Bij gebruik van Auto Layout kunnen de objecten worden geplaatst:

• Verticaal – Objecten worden op de y-as geplaatst. Deze optie is geschikt voor lijsten, menu's, nieuwsfeeds, etc.
• Horizontaal – Objecten en componenten op de x-as (knoppen, pictogrammen, enz.).
• Omlooppositie – Objecten worden in meerdere kolommen en rijen geplaatst.

Stapelvolgorde

Je kunt zelf kiezen welke stapelvolgorde het beste bij jouw frame past. Dit is alleen een visuele verandering omdat de stapelvolgorde hetzelfde blijft (als deze 1,2,3 is, blijft deze 1,2,3 maar met visuele aanpassingen). Wanneer objecten op elkaar worden gestapeld, kun je kiezen welke er bovenop komt. Dus als je bijvoorbeeld drie dingen hebt gemarkeerd met 1, 2 en 3, kun je 1 of 3 gebruiken. Zo kun je dit doen:

1. Kies het kader Automatische lay-out.
   
2. Navigeer naar de optie Automatische lay-out aan de rechterkant van uw scherm.
   
3. Tik op de drie horizontale stippen om geavanceerde opties te openen.
   
4. Zoek de optie "Canvas stapelen".
   
5. Kies 'Eerste bovenaan' of 'Laatste bovenaan'.
   

Absolute positie

Een andere “Layer Flow”-eigenschap is een absolute positie, afgezien van de stapelvolgorde en -richting. Met deze functie kunt u een object plaatsen waar u maar wilt, waarbij u de framegrenzen negeert. Zo schakel je het in:

1. Pak een voorwerp en plaats het in het frame.
   
2. Tik in het menu aan de rechterkant, naast de waarden voor 'X' en 'Y', op het pictogram dat lijkt op een vierkant zonder randen met een plus erin.
   
3. Verplaats het object langs de lijnen van het kader.
   

Tussenruimte-instelling

Er zijn een paar functies die u kunt aanpassen als het gaat om de afstand, zoals de tussenruimte. U kunt de opening op twee manieren wijzigen: automatisch en door een specifieke opening in te typen. Als je wilt dat je tussenruimte zo groot mogelijk is, dan moet je de automatische instelling selecteren in het Auto Layout-menu. Maar als u uw waarden gaat invoeren, typ ze dan in de toegewezen vakken.

Bovendien kan de spleetinstelling voor alle richtingen worden ingesteld. Als uw pictogrammen alleen horizontaal en verticaal zijn, kunt u een horizontale opening ertussen selecteren. Als ze zich echter in een wikkelpositie bevinden, kunt u de instellingen voor de verticale en horizontale opening aanpassen.

Uitlijningsinstelling

Nadat u de functies voor richting, opvulling en tussenruimte hebt ingesteld, kunt u de uitlijning van het onderliggende object in uw frame aanpassen, aangezien deze functie afhankelijk is van de instellingen voor de afstand. U kunt de uitlijning van elk object niet wijzigen, maar u kunt een patroon kiezen dat wordt aangeboden in het menu van Automatische lay-out. U kunt in het menu op het 3×3-raster klikken en selecteren welke uitlijning u wilt. Dit kan gedaan worden met de pijltjestoetsen of WSAD-knoppen op uw toetsenbord.

Bovendien kunt u hier de automatische instelling kiezen om de horizontale en verticale uitlijning als rij te wisselen. Met specifieke waarden kunt u over alle negen opties beschikken (linksboven, linksonder, links, rechts links, rechtsonder, enz.).

U kunt de tekstuitlijning ook aanpassen door deze optie in het menu in te schakelen en de knop "B" ingedrukt te houden.

Formaat wijzigen

De opties voor het wijzigen van de grootte van Auto Layout hebben veel extra eigenschappen, zoals knuffelinhoud, optie voor het vullen van containers, het aanpassen van de breedte en hoogte, afmetingen, enz. U kunt de automatische optie selecteren als u wilt dat uw waarden worden vastgelegd, maar dat beperkt de mogelijkheden. Voor het wijzigen van de grootte is het raadzaam uw waarden in te stellen.

U kunt een vaste waarde selecteren of deze instellen op de maximaal of minimaal mogelijke afmetingen voor breedte en hoogte. Met knuffelinhoud kunt u de grootte van een frame aanpassen op basis van het onderliggende object, terwijl de optie voor het vullen van containers de grootte van een object aanpast aan de hand van het bovenliggende frame.

Unieke frames maken met automatische lay-out

Auto Layout, als een van de essentiële functies van Figma, kan uw frame en de objecten en compartimenten erin naar uw voorkeur aanpassen. De eigenschappen en kenmerken zijn talrijk, waardoor u een goed en net product kunt creëren. Automatische lay-out is een fundamenteel hulpmiddel dat u moet beheersen voordat u in Figma gaat werken.

Welke Auto Layout-functie gebruikt u het meest? Laat het ons weten in de opmerkingen hieronder.