Prototyping — Figma

It A · STX · A-niveau · Frontend og UX

💻 Prototyping — Figma

Prototyping = konkretisere design-idéer i fysisk eller digital form. Figma = den dominerende UI/UX-design-tool 2020+. Cloud-baseret, realtids-samarbejde. Gratis tier til studerende.

Hvorfor Figma: erstatter Sketch (Mac-only), Adobe XD. Multi-platform (web + Mac + Windows). Kollaborativt (som Google Docs).

Figma-koncepter: Frames (svarer til artboards): containere for design — typisk størrelser som iPhone (390×844), iPad, desktop (1440×900).

Components (master + instances): genbruges på tværs af design. Ændr master → alle instanser opdateres.

Variants: forskellige tilstande af komponent (button: default, hover, pressed, disabled).

Auto Layout: dynamisk layout der reagerer på indhold. Bruges til knapper, kort, lister.

Design tokens: konsistente farver, typografi, afstande.

Prototype-mode: forbind frames med interaktive overgange (klik, hover, drag). Animér med smart animate (mellem ens elementer).

Plugins: Iconify (ikoner), Unsplash (billeder), Lorem Ipsum (tekst), Figma to Code.

Forskellige fidelity-niveauer: Lo-fi: papir-skitser, wireframes (kasse-stil, ingen detaljer). Hurtige, billige, opfordrer til feedback uden distraktion af farver.

Mid-fi: digitale wireframes med basis-stil.

Hi-fi: tæt på endeligt produkt — fuld farve, billeder, fonts, animationer.

Prototype vs. wireframe vs. mockup: wireframe = struktur (kasser). Mockup = visuelt design. Prototype = interaktiv.

Andre tools: Adobe XD, Sketch (Mac), Marv

Læringsmål

• Designe en interaktiv prototype i Figma
• Anvende prototypen til at teste brugerflow
• Iterere på designet baseret på feedback

Sådan kan du arbejde med emnet

• Lav en lo-fi-wireframe til en mobilapp med Figma med mindst 3 skærme og navigationsflow
• Forklar, hvad der er forskellen på en lo-fi og hi-fi-prototype
• Diskutér, hvad der er formålet med prototyping tidligt i udviklingsprocessen

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.