Hoe maak je een raster in Figma – lay-out eenvoudig gemaakt

Leer hoe je rasters maakt in Figma met behulp van layoutrasters voor kolommen, rijen of vierkanten. Perfect voor UI-ontwerp, tussenruimte en pixelperfecte uitlijning.

Maak indrukwekkende productvideo’s en documentatie met AI

Deze tutorial is gemaakt met Trupeer in minder dan 5 minuten

Gratis creëren

Deze gids leidt je door het proces van het toevoegen en aanpassen van rasterlijnen in Figma, zodat je ontwerpindeling overzichtelijk blijft.
Volg de onderstaande stappen om efficiënt rasterlijnen toe te voegen aan je Figma-projecten.

Figma stelt je in staat om lay-out rasters op frames toe te passen, waardoor het eenvoudiger wordt om ontwerpelementen uit te lijnen en te ordenen.

1. Selecteer een frame

Klik op het frame waarop je het raster wilt toepassen. Lay-outrasters zijn alleen beschikbaar voor frames — niet voor afzonderlijke elementen.

2. Voeg een lay-outraster toe

Ga naar de rechterzijbalk (deelvenster Ontwerp), scroll naar de sectie Lay-outraster en klik op het pictogram "+".

3. Kies een type raster

Figma biedt drie rastertypen:

Raster (uniforme vierkantjes)
Kolommen (handig voor responsieve lay-outs)
Rijen (goed voor horizontale uitlijning)

Gebruik de vervolgkeuzelijst om het gewenste rastertype te selecteren.

4. Pas de rasterinstellingen aan

Aantal kolommen/rijen: Stel het aantal kolommen of rijen in.
Gutter: Pas de tussenruimte tussen kolommen/rijen aan.
Marge: Stel de opvulling tussen het frame en het raster in.
Uitlijning: Kies hoe kolommen of rijen worden uitgelijnd:
- Kolommen: Links, Midden, Rechts of Uitrekken
- Rijen: Boven, Midden, Onder of Uitrekken
Kleur & dekking: Wijzig de kleur en transparantie van de rasterlijnen zodat het bij je ontwerp past.

5. Schakel rasterweergave in/uit

Gebruik de sneltoets Shift + G om de lay-outraster op elk moment te tonen of te verbergen.

Stapsgewijze handleiding: Hoe je een raster maakt in Figma

Stap 1

Laten we beginnen met het leren van 'Hoe je rasterlijnen toevoegt in Figma'. Open je Figma-bestand. Selecteer de frame-optie om een nieuw frame te maken.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Stap 2

Als je nog geen frame hebt gemaakt, zorg dan dat je er een maakt en de afmetingen dienovereenkomstig instelt. Navigeer naar de instellingen voor het raster van de laag.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Stap 3

Ga naar de instellingen voor het raster van de laag. Kies in de rasterinstellingen het rastertype dat je verkiest, zoals een vierkant raster, en pas het aan je behoeften aan.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Stap 4

Pas de kolommen en rijen binnen de rasterinstellingen aan zodat ze passen bij de vereisten van je ontwerp.

Adjust the columns and rows within the grid settings to suit your design requirements.

Stap 5

Nadat je het aantal rijen en kolommen hebt ingesteld, ga je verder om je rasteraanpassing te voltooien.

After setting the number of rows and columns, proceed to finalize your grid customization.

Stap 6

Klik op 'Stijl maken' om je raster op te slaan als een bestand, waarbij de rasterinstellingen intact blijven. Sla het op met de naam van een bepaalde stijl, zodat het logisch is voor het project en je het later kunt gebruiken.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Pro-tips om een raster in Figma te maken

Gebruik lay-outrasters voor consistentie:
Selecteer het frame of tekengebied waaraan je rasterlijnen wilt toevoegen. Klik in het rechterpaneel, onder de sectie Layoutrasters, op het + pictogram om een raster toe te voegen. Dit zorgt voor consistentie in je ontwerp en helpt elementen nauwkeurig uit te lijnen.
Pas het rastertype aan:
Figma laat je kiezen tussen Raster, Kolommen en Rijen voor je lay-out. Kies Raster voor een uniform raster, Kolommen voor een op kolommen gebaseerde lay-out, of Rijen voor een horizontale structuur. Pas de tussenruimte, het aantal en de marge aan volgens je behoeften.
Stel meerdere rasters in:
Je kunt meerdere rasters aan één frame toevoegen. Gebruik verschillende rastertypen om aan verschillende aspecten van je ontwerp te werken, zoals een kolomraster voor tekst en een standaardraster voor de algehele uitlijning.
Gebruik een raster voor responsief ontwerp:
Voor responsief web- of mobiel ontwerp gebruik je een kolomraster en pas je de breedte en de tussenruimte van het raster aan zodat het past bij verschillende schermformaten. Dit helpt de verhoudingen en leesbaarheid op meerdere apparaten te behouden.
Schakel de rasterweergave in of uit:
Schakel de zichtbaarheid van rasters in of uit door op Shift + G te drukken. Hiermee kun je rasters snel bekijken en verbergen zonder het ontwerp te wijzigen.

Veelvoorkomende valkuilen en hoe je ze kunt vermijden bij het toevoegen van rasterlijnen in Figma

Onjuiste rasterafstand:
Oplossing: Controleer je rasterinstellingen dubbel en zorg ervoor dat de tussenruimte en kolommen/rijen geschikt zijn voor je ontwerp. Gebruik consistente metingen om de uitlijning te behouden.
Het frame te veel vullen met rasters:
Oplossing: Voeg niet te veel rasters toe en gebruik geen rasters die niet bij de inhoud passen. Houd je aan één rasterstijl (bijv. kolommen), tenzij je een specifieke behoefte hebt aan verschillende rasters.
Niet goed uitgelijnde designelementen:
Oplossing: Gebruik het raster om je elementen uit te lijnen, maar zorg ervoor dat je designelementen volledig met het raster zijn uitgelijnd. Zoom in om zeker te weten dat alles correct op de rasterlijnen vastklikt.
Onduidelijke lay-out voor kijkers:
Oplossing: Als je ontwerpt zodat anderen het kunnen bekijken, zorg er dan voor dat je rasters het ontwerp niet rommelig maken. Gebruik rasters alleen als leidraad en schakel ze uit voor de uiteindelijke export.
Verwarring over rasterzichtbaarheid:
Oplossing: Als rasters te afleidend zijn, gebruik dan de schuifregelaar voor transparantie in het paneel Layoutrasters om de zichtbaarheid van het raster te verminderen terwijl ze bruikbaar blijven voor uitlijning.

Veelgestelde vragen over het toevoegen van rasterlijnen in Figma

Kan ik rasterlijnen toevoegen aan een specifiek deel van mijn ontwerp, zoals een afbeelding?
Rasters worden toegepast op frames en artboards in Figma. Om het raster op een specifiek deel te richten, maak je een frame rond het gewenste gebied en pas je het raster toe op dat frame.
Hoe pas ik de rastergrootte aan?
Je kunt de rastergrootte, tussenruimte en goot aanpassen door de waarden in de sectie Indelingsrasters in het rechterpaneel te wijzigen wanneer je een frame hebt geselecteerd.
Hoe verberg ik de rasterlijnen tijdens presenteren of exporteren?
Schakel de rasterlijnen eenvoudig uit door op Shift + G te drukken of het selectievakje bij de optie Indelingsrasters in het rechterpaneel uit te vinken om ze uit de weergave en export te verwijderen.
Zijn rasterlijnen afdrukbaar in Figma?
Nee, rasterlijnen worden standaard niet afgedrukt of geëxporteerd. Je kunt de zichtbaarheid ervan uitschakelen voordat je je ontwerp exporteert, zodat ze niet in de uiteindelijke uitvoer verschijnen.
Kan ik rasterlijnen gebruiken voor mobiel of webdesign?
Ja, rasterlijnen zijn uiterst nuttig voor web- en mobiel ontwerp. Je kunt kolomrasters gebruiken om elementen uit te lijnen, zodat je ontwerp goed schaalt op verschillende schermformaten.
Dit is de stapsgewijze handleiding voor het toevoegen van rasterlijnen in Figma.
Hoe neem ik het scherm op op een Mac?
Om het scherm op een Mac op te nemen, kun je Trupeer AI gebruiken. Het stelt je in staat het volledige scherm vast te leggen en biedt AI-mogelijkheden zoals het toevoegen van AI-avatars, voice-over toevoegen en in- en uitzoomen in de video. Met de AI-videotranslatiefunctie van Trupeer kun je de video vertalen naar meer dan 30 talen.
Hoe voeg ik een AI-avatar toe aan een schermopname?
Om een AI-avatar aan een schermopname toe te voegen, moet je een AI-tool voor schermopnames gebruiken. Trupeer AI is een AI-tool voor schermopnames, waarmee je video's met meerdere avatars kunt maken; het helpt je ook bij het maken van je eigen avatar voor de video.
Hoe neem ik het scherm op in Windows?
Om het scherm op te nemen in Windows, kun je de ingebouwde Game Bar gebruiken (Windows + G) of een geavanceerde AI-tool zoals Trupeer AI voor meer geavanceerde functies zoals AI-avatars, voice-over, vertaling enz.
Hoe voeg ik voice-over toe aan een video?
Om voice-over aan video's toe te voegen, download je de Trupeer AI Chrome-extensie. Nadat je je hebt aangemeld, upload je je video met geluid, kies je de gewenste voice-over van Trupeer en exporteer je je bewerkte video.
Hoe zoom ik in op een schermopname?
Om tijdens een schermopname in te zoomen, gebruik je de zoomeffecten in Trupeer AI, waarmee je op specifieke momenten kunt in- en uitzoomen en zo de visuele impact van je videocontent vergroot.