Summary  
This chapter covers the concept of grid‐based layout systems for structuring elements—customizing columns, rows, margins, gutters—and using rulers and guides for precise alignment and responsive resizing.

General domain of usage  
Digital interface design (UI/UX)

### Legg til et rutenett
Velg en ramme og klikk på **plussikonet** i Layout Grid-delen av designpanelet for å legge til et rutenett. Som standard er rutenettet satt til et 10-piksel ensartet rutenett.

### Tilpass rutenettinnstillinger
   - **Rutenettype**: velg mellom kolonner, rader eller rutenett;
   - **Antall**: juster antall kolonner eller rader;
   - **Utseende**: endre farge og opasitet;
   - **Typeinnstillinger**: sett kolonner til å strekke seg eller fest til venstre, midten eller høyre;
   - **Marg og mellomrom**: definer avstand mellom rammekanter (marg) og kolonner/rader (mellomrom).

### Avanserte alternativer
   - Legg til flere rutenett i én ramme ved å klikke på **plussikonet** igjen.
   - Endre eller slett rutenett ved å bruke **innstillingspanelet** eller **minusikonet**.
   - Bruk forhåndsinnstilte rutenettstiler via **firepunktsikonet** eller importer rutenett fra team-biblioteket.

## Bruke linjaler og hjelpelinjer i Figma

### Aktiver linjaler
Linjaler kan nås via **Vis > Linjaler** eller ved å bruke snarveien **Shift + R**. De vises øverst og til venstre for rammen, med enheter målt i piksler.

### Legg til hjelpelinjer
For å opprette hjelpelinjer, dra fra linjalen og plasser dem for justering. Hjelpelinjer kan fjernes ved å dra dem tilbake til linjalen.

### Beste praksis
Kombiner **rutenett og hjelpelinjer** for presisjon og for å opprettholde organiserte oppsett. Ryddige justeringer forbedrer designens klarhet og gir en bedre brukeropplevelse.

Lær alt fra det grunnleggende innen utforming av brukergrensesnitt til avanserte prototypings- og samarbeidsteknikker. Utforsk hvordan du lager wireframes, designer visuelt imponerende oppsett, og samarbeider effektivt med utviklingsteam ved hjelp av Figmas kraftige funksjoner. Perfekt for både nybegynnere og profesjonelle, denne læringsreisen kombinerer praktiske prosjekter, eksperttips og virkelige applikasjoner for å hjelpe deg å lykkes i det konkurranseutsatte designmiljøet.

Lær hva Figma er, hvilken rolle det har i UI/UX-design, og hvordan du navigerer i grensesnittet og verktøyene. Utforsk FigJam-tavlen for idémyldring og samarbeid, sammen med sider og rammer i Figma, som danner grunnlaget for å organisere og strukturere designene dine effektivt.

Utforsk hvordan lag i Figma holder designet ditt organisert.
Undersøk hvordan grupperte former bidrar til å skape imponerende visuelle elementer.
Lær å formatere tekst ved hjelp av typografiverktøy.

Lær å plassere bilder og videoer, bruke masker og anvende blandingsmoduser for dynamiske design. Bli ekspert på farger, graderinger, knapper, automatiske oppsett, komponenter og stiler. Utnytt kraften i plugins og widgets for å øke kreativiteten og effektivisere arbeidsflyten.

Utforsk kolonner, rutenett, tillegg og foreldre-barn-komponentstruktur for å effektivisere designprosessen.

Utvikling av lavoppløselige wireframes, opprettelse av interaktive prototyper, animasjon av design og effektiv presentasjon av arbeid til kunder.

Layout-Rutenett, Rader og Kolonner i Figma: Strukturering av Dine Design

Legg til et rutenett

Tilpass rutenettinnstillinger

Avanserte alternativer

Bruke linjaler og hjelpelinjer i Figma

Aktiver linjaler

Legg til hjelpelinjer

Beste praksis

Awesome!