Figma Design Systems (UI-arkitektur)

Hvad bruges Figma Design Systems og UI-arkitektur til? Figma Design Systems bruges til at bygge et fælles system af genanvendelige UI-elementer til apps, websites og andre digitale produkter. I stedet for at hver designer tegner knapper, formularfelter, navigation og kort på ny, bygges elementerne én gang og genbruges på tværs af produktet.

Et design system er mere end en samling flotte komponenter. Det indeholder også regler for farver, typografi, afstande, størrelser, tilstande, responsivt layout og brugen af de enkelte komponenter.

I Figma organiseres systemet typisk med components, component properties, variants, styles, variables og libraries. En hovedkomponent kan eksempelvis definere en knap. Designerens forskellige skærmbilleder bruger derefter instances af den samme komponent. Når hovedkomponenten opdateres og ændringen publiceres, kan de filer der bruger komponenten modtage opdateringen.

Variables bruges blandt andet som design tokens. I stedet for at skrive en bestemt farve direkte på hvert element kan systemet bruge et token som eksempelvis en primær baggrundsfarve. Det gør det lettere at ændre et helt produkt eller understøtte forskellige temaer, brands og visningstilstande uden at rette hvert skærmbillede manuelt.

Modes kan bruges til eksempelvis forskellige temaer eller produktkontekster. Det gør det muligt at lade de samme komponenter reagere forskelligt uden at bygge parallelle designs fra bunden.

UI-arkitektur handler om at beslutte, hvordan systemet skal opdeles. En specialist vurderer blandt andet, hvad der skal være en selvstændig komponent, hvilke variationer komponenten skal have, hvilke værdier der skal være tokens, og hvordan bibliotekerne skal organiseres.

Et godt Figma Design System bliver dermed et fælles arbejdssprog mellem designere og udviklere. Målet er ikke kun visuel ensartethed, men også at reducere dobbeltarbejde og gøre digitale produkter lettere at videreudvikle.

Hvem bruger Figma Design Systems og UI-arkitektur? Figma Design Systems bruges især af product designers, UI-designere, UX-designere, design system designers, DesignOps-specialister og frontend-udviklere.

Kompetencen er særlig relevant i virksomheder med større digitale produkter, hvor mange skærmbilleder og funktioner skal vedligeholdes over tid. Det gælder blandt andet banker, fintech, forsikring, SaaS, e-commerce, offentlige digitale løsninger, sundhedsteknologi og virksomheder med større kunde- eller medarbejderplatforme.

Danske designroller viser samme mønster. Figma-designsystemer bruges blandt andet til skalerbare komponentbiblioteker, dokumentation, accessibility og samarbejde mellem designere og UI-udviklere. Det er især vigtigt i organisationer med flere produktteams, fordi lokale designbeslutninger ellers hurtigt udvikler sig i forskellige retninger.

Startups og scaleups bruger også design systems. Her handler arbejdet ofte om at skabe nok struktur til, at produktet kan vokse uden at gøre designprocessen unødigt tung.

I store organisationer kan et særskilt design system-team eje komponenterne og de fælles foundations. Product designers bruger systemet i deres produktteams, mens frontend-udviklere implementerer de tilsvarende komponenter i kode.

Figma Dev Mode kan bruges i overleveringen til udviklere. Mere modne organisationer kan desuden bruge Code Connect til at forbinde komponenter i Figma med de faktiske komponenter i kodebasen. Det reducerer risikoen for, at designbiblioteket og produktets implementering udvikler sig til to forskellige systemer.

Typiske opgaver for en specialist i Figma Design Systems og UI-arkitektur En meget almindelig opgave er at bygge et design system fra eksisterende produkter. Virksomheden har måske allerede en app eller et website, men knapper, formularer, farver og afstande er blevet lavet forskelligt gennem flere år. Specialisten kortlægger variationerne og samler dem i et mere konsekvent system.

En anden opgave er komponentarkitektur. Specialisten bygger eksempelvis buttons, inputs, dropdowns, navigation, cards, modals og tabeller som genanvendelige komponenter. Component properties, variants og nested components konfigureres, så designerne kan ændre relevante egenskaber uden at detach'e komponenten.

Variables og design tokens er et andet specialistområde. Farver, spacing, radius, typografi og andre værdier organiseres, så de kan genbruges konsekvent. Hvis virksomheden har flere brands, temaer eller produkter, kan variables og modes bruges til at styre forskellene systematisk.

Virksomheder hyrer også hjælp, når et eksisterende Figma-bibliotek er blevet svært at bruge. Symptomerne kan være hundredvis af næsten ens komponenter, uklare navne, meget store variantkombinationer, mange detached instances eller komponenter som kun virker i ét bestemt layout.

Specialisten kan her forenkle komponentstrukturen, indføre klare naming conventions og flytte variationer fra separate komponenter til relevante properties eller variables.

Migrering er en anden typisk opgave. Et ældre system kan være bygget med lokale styles og traditionelle komponenter og skal flyttes til en nyere struktur med variables, modes og bedre bibliotekshierarki. Migreringen skal gennemføres uden unødigt at bryde de designfiler, der allerede bruger systemet.

Library-arkitektur bliver vigtig i større organisationer. Specialisten vurderer, om foundations, produktkomponenter, ikoner og brands skal ligge i samme bibliotek eller opdeles. Strukturen skal være enkel nok til at forstå, men samtidig kunne håndtere flere produkter og teams.

Design-to-code er også en konkret specialistopgave. Komponenten i Figma skal have samme begreber som komponenten i frontend-koden. Hvis designeren eksempelvis vælger størrelse, state eller variant, bør begreberne så vidt muligt svare til de egenskaber udvikleren arbejder med.

Figma Code Connect kan bruges til at forbinde design-systemets Figma-komponenter med de tilsvarende komponenter i kodebasen. Det er især relevant i organisationer med etablerede React-, React Native-, web component-, SwiftUI- eller Jetpack Compose-biblioteker.

Dokumentation er en vigtig del af arbejdet. En specialist beskriver ikke kun, hvordan komponenten ser ud, men også hvornår den skal bruges, hvilke states den har, hvilke kombinationer der bør undgås, og hvilke accessibility-regler der gælder.

Virksomheder hyrer desuden hjælp til governance. Det skal besluttes, hvem der må ændre systemet, hvordan nye komponenter foreslås, hvordan ændringer publiceres, og hvordan gamle komponenter udfases uden at ødelægge eksisterende designfiler.

I større organisationer kan library analytics bruges til at se, hvilke komponenter, styles og variables der faktisk bliver anvendt. Data om brug og detachment kan hjælpe design system-teamet med at finde komponenter, som er svære at bruge eller ikke længere giver værdi.

Hvordan lærer man Figma Design Systems og UI-arkitektur? Den bedste start er Figmas egne læringsmaterialer. Figma Learn har et officielt forløb med navnet Introduction to design systems. Det gennemgår blandt andet foundations, components, styles, libraries, dokumentation og processen omkring at bygge og vedligeholde et design system.

Derefter bør man lære Figmas officielle funktioner til components, variants, component properties, variables, modes og libraries i dybden. Det er de centrale byggeklodser i et moderne Figma Design System.

Auto Layout er også grundlæggende. Genanvendelige UI-komponenter skal kunne håndtere forskellige tekstlængder, skærmstørrelser og indhold uden at falde fra hinanden. Derfor er fleksibelt layout mindst lige så vigtigt som det visuelle design.

Næste trin er design tokens. Man bør forstå forskellen mellem rå værdier og semantiske tokens og kunne opbygge en struktur, hvor eksempelvis farvevalg beskriver deres funktion frem for blot deres konkrete farvekode.

For mere tekniske design system-roller er Figma Dev Mode og Code Connect relevante. Her lærer man at skabe en tydelig forbindelse mellem designkomponenter og komponenterne i kodebasen. Kendskab til Storybook og grundlæggende frontend-begreber er nyttigt, fordi mange professionelle design systems eksisterer både som et Figma-bibliotek og som et kodebibliotek.

Praktisk træning er afgørende. En god øvelse er at tage en eksisterende app og lave et interface-audit. Find alle varianter af knapper, formularfelter, farver og spacing. Reducer dem til et sammenhængende system, byg komponenterne og test dem derefter på rigtige skærmbilleder.

Det næste niveau er at lade andre designere bruge systemet. Et design system kan teknisk være korrekt og stadig være dårligt, hvis brugerne ofte detach'er komponenterne eller ikke kan finde den rigtige variant. Feedback, dokumentation og løbende forenkling er derfor en del af selve kompetencen.

Figma tilbyder officielle læringsforløb og har certificerede servicepartnere, men der er ikke en almindelig individuel Figma Design Systems-certificering, som fungerer som branchestandard for denne specialistrolle. Praktisk erfaring med komponentarkitektur, tokens, libraries, governance og samarbejde med udviklere er derfor den vigtigste dokumentation.