Prototyping — Figma

Kommunikation og IT A · HTX · A-niveau · Frontend og UX

💻 Prototyping med Figma

Figma er det mest brugte UI-designværktøj — gratis for studerende.

Prototypingsniveauer:

• Lo-fi: papirskitser eller wireframes — hurtigt, billigt, tidlig fase
• Mid-fi: digitale wireframes (grå kasser) — Figma wireframes
• Hi-fi: fuld visuel prototype med interaktivitet — Figma med prototype-links

Figma workflow:

1. Frames: tilsvarer skærme/sider

2. Auto Layout: fleksibel placering der tilpasser sig indhold

3. Components: genanvendelige UI-elementer (knapper, kort, navigation)

4. Variants: komponenter med tilstande (aktiv/inaktiv, hover)

5. Prototype mode: klik-flows mellem frames

Design tokens: farver, typografi og spacing defineret centralt → brugt overalt.

Handoff til developer: Figma's Inspect-panel viser CSS-værdier, spacing, fonts.

Figma-tips: Brug eksisterende UI-kits (Material Design, Ant Design). Gratis Community-ressourcer.

Læringsmål

• Oprette wireframes og hi-fi prototyper i Figma
• Bruge Components og Auto Layout til konsistent design
• Bygge klik-flows til brugertest i Prototype mode
• Eksportere designspecifikationer til developer handoff

Sådan kan du arbejde med emnet

• Lav en simpel wireframe i Figma for forsiden af en app
• Forklar forskellen på en lo-fi og en hi-fi prototype
• Beskriv hvordan en interaktiv prototype kan bruges til at teste brugerflow før kodning

Træningsforslag

• Design en mobilapp i Figma (mindst 5 skærme med prototype-flows)
• Del din Figma-prototype med klassekammerater og få feedback
• Genimplementer en eksisterende app i Figma som øvelse