Møt Figma

Figma er designverktøyet som bor i nettleseren — og mesteparten av grensesnittdesign i dag tegnes der. I denne leksjonen lager du en konto, finner deg rundt i filer og sider, og lærer de fire områdene alt arbeidet skjer i. Ingen installasjon: åpne en fane, så er du i gang.

Ett verktøy, null installasjon

Gå til figma.com, lag kontoen din og klikk New design file. Filen åpner seg i nettleseren, og arbeidet lagres i skyen mens du jobber — ser du «Saving» bli «Saved» øverst, er alt trygt. Lukker du fanen, forsvinner ingenting: filen ligger i Drafts, og du åpner den igjen fra figma.com. Det finnes en skrivebordsapp også, men nettleseren er nok for dette kurset.

• Filen er dokumentet ditt — for eksempel «Bakkanten — app». Den deler du med en lenke, ikke ved å sende kopier rundt.
• Sider (Pages, øverst i venstre panel) er filens kapitler: en side for mobil, en for desktop, en for komponentene. Bytt side i rullegardinmenyen.
• Lerretet er uendelig — det har ingen kant og ingen fast størrelse. Det er rammenes jobb å gi designet mål, og det er neste leksjons tema.

1Fil («Bakkanten — app»)      ← én delbar lenke, lagres i skyen2├── Side: Cover              ← forsida — hva filen inneholder3├── Side: Mobil              ← skjermene i mobilstørrelse4├── Side: Desktop            ← samme innhold, store rammer5└── Side: UI-kit             ← komponenter og stiler teamet gjenbruker

Grensesnittet: fire områder

Første gang filen åpner seg, ser det mye ut. Det er fire områder — kjenner du dem, forsvinner størsteparten av forvirringen:

• Verktøylinjen (øverst): flytt-verktøyet, frame, former, tekst og kommentar. Snarveien du vil bruke mest er Ctrl+/ — quick actions-søket som finner enhver kommando.
• Venstre panel: Pages og Layers — laglisten din. Hver ting du tegner blir et lag her, nestet slik du har gruppert det.
• Lerretet (midten): selve designet. Klikk på noe — og høyre panel forteller deg hva det er.
• Høyre panel (Design): egenskapene for det du har valgt — størrelse, fyll (Fill), tekst, auto layout og eksport. Panelet endrer seg med valget, akkurat som en innstillingslinje i et bildeprogram.

Prøv nå: trykk T, klikk på lerretet og skriv noe — og se hva høyre panel viser. Trykk Ctrl+Z og V for å komme tilbake til flytt-verktøyet. *Velge → se egenskaper → endre → angre* er hele arbeidssyklusen du gjentar i åtte leksjoner.

Hvorfor alle jobber i samme fil

Det revolusjonerende med Figma var aldri bare verktøyene — det var at hele teamet åpner samme fil samtidig. Du ser kollegas markør med navnet hennes, kommenterer med C rett på designet, og blar i versjonshistorikken hvis noe forsvant. Utvikleren får lenken i stedet for et skjermbilde på epost, og ser alltid den nyeste versjonen. Én fil = én kilde til sannhet.