Produkteksempel · Design

Figma

Designværktøjet der flyttede hele disciplinen ind i browseren: realtidssamarbejde på ét delt canvas, hvor et link er alt, der skal til for at være med.

Analyseret Juli 20268 min læsning4 principper
UX-scorecard9.1 /10
  • Navigation8.9
  • Visuelt design9.2
  • Performance9.0
  • Onboarding8.6
  • Tilgængelighed8.6
figma.com
Figma — produktskærmbillede

Executive summary

Figma scorer 9,1, fordi produktet løste et problem, ingen bad om, og gjorde det til branchestandard: da Figma byggede sin realtids-multiplayer-teknologi, var det ifølge selskabets egen tekniske gennemgang ikke et svar på brugerønsker — "no one was clamoring for a multiplayer design tool" — men en overbevisning om, at alle produktivitetsværktøjer på nettet burde fungere sådan. Den beslutning definerer stadig produktet.2

Det browser-baserede fundament er en selvstændig UX-pointe: værktøjet "lever i browseren" og kræver ingen installation for at bruge eller dele filer, hvilket flytter delingsbarrieren fra "download og log ind" til "åbn et link". Kombineret med et komponentsystem, hvor ændringer i en hovedkomponent automatisk forplanter sig til alle instanser, får Figma både samarbejdet og designkonsistensen til at ske som en naturlig del af arbejdsgangen frem for som ekstra trin.15

Prisen for dybden er en brantere læringskurve på selve redigeringsfladen, og Figma er selv ærlig om, at det generelle produkt endnu kun "arbejder hen imod" WCAG 2.2 AA snarere end er fuldt certificeret. Det holder scoren lige under toppen, men på de kategorier, produktet definerede for branchen — samarbejde, deling og et skalerbart komponentsystem — er Figma stadig referencepunktet, andre måles op imod.6

Kort fortalt

  • Realtidssamarbejde var et bevidst designvalg, ikke et brugerønske — Figma byggede det, fordi det "føltes forkert" ikke at tilbyde det på nettet.
  • Browser-baseret adgang uden installation flytter delingsbarrieren fra "download og log ind" til "åbn et link".
  • Komponenter med hovedkomponent/instans-kobling holder designsystemer konsistente på tværs af hele filbiblioteket.
  • Dev Mode binder design og kode sammen med kontekst, kodesnippets og linkede udvikler-ressourcer.
  • Produktet er selv ærligt om, at det kun "arbejder hen imod" fuld WCAG 2.2 AA-tilgængelighed.

Hvad gør siden rigtig godt?

  1. Multiplayer som filosofi, ikke funktion

    Figma bygger sit eget udsagn om, at samarbejde ikke skal være en add-on, ind i selve arkitekturen: dokumentet synkroniseres løbende over en delt forbindelse, så flere kan redigere samme fil samtidig uden at eksportere eller maile kopier frem og tilbage.2

  2. Nul-friktion deling via link

    Fordi værktøjet lever i browseren og ikke kræver installation for at se eller dele en fil, kan alle med det rette link følge status på et projekt uden at forstyrre den, der arbejder — adgang er et link, ikke en konto-oprettelse.1

  3. Kommentarer forankret direkte på designet

    Alle med mindst "kan se"-rettigheder kan kommentere, og kommentarerne vises på det præcise sted på canvas, de blev tilføjet — feedback er knyttet til det konkrete element, ikke en løsrevet tråd i en anden app.4

  4. Komponentsystem der skalerer

    Instanser er koblet til deres hovedkomponent og arver automatisk ændringer — én rettelse forplanter sig til hver anvendelse, hvilket er selve fundamentet for at kunne drive et konsistent designsystem i stor skala.5

  5. Dev Mode lukker hullet til udvikling

    Kodesnippets, komponentegenskaber og linkede GitHub- eller Jira-ressourcer direkte på laget betyder, at handoff til udvikling foregår i samme fil som designet blev skabt i, i stedet for i et separat specifikationsdokument.3

Forbedringsmuligheder

  1. Dybden har en indlæringspris

    Paneler, auto-layout-regler og komponentvarianter giver stor kontrol, men det tager tid at mestre som ny bruger — en afvejning, der er typisk for professionelle værktøj, men som stiller krav til onboardingen.4

  2. Tilgængelighed er en igangværende proces, ikke et opnået mål

    Figma formulerer det selv som at "arbejde hen imod" WCAG 2.2 AA-compliance — en ærlig, men også tydelig indrømmelse af, at et grafisk, canvas-baseret værktøj stadig har et stykke vej igen sammenlignet med tekstbaserede interfaces.6

  3. Performance-tal fra egne, ældre målinger

    Det mest konkrete performance-tal, der er tilgængeligt fra Figma selv (3x hurtigere indlæsning efter skiftet til WebAssembly), stammer fra en historisk teknisk gennemgang og er ikke en uafhængig, aktuel måling af den oplevelse, brugere har i dag.7

Gennemgang af hver kategori

Navigation

8.9

Figma organiserer arbejdet omkring ét delt lærred i stedet for adskilte sider: filer, sider og lag ligger i samme rum, og Dev Mode giver udviklere en direkte vej fra det enkelte lag til kode-kontekst, kodesnippets og linkede Jira- eller GitHub-ressourcer uden at forlade filen.3

Visuelt design

9.2

Konsistensen bæres af komponent-systemet: en instans er koblet til sin hovedkomponent og arver automatisk opdateringer, så et redesign ét sted forplanter sig til hver eneste brug af komponenten på tværs af filer.5

Performance

9.0

Figma har historisk investeret tungt i selve renderingsmotoren — dokumenteret i egne tekniske blogindlæg, blandt andet skiftet til WebAssembly, som ifølge Figma selv skar indlæsningstiden med mere end 3x uafhængigt af dokumentstørrelse. Det er en ældre, virksomhedsrapporteret måling og ikke en uafhængig test af den nuværende oplevelse, men den afspejler en vedvarende prioritering af hastighed i et browser-baseret canvas-værktøj.7

Onboarding

8.6

Adgangen er friktionsfri for dem, der blot skal se eller kommentere — et link og "kan se"-rettigheder er nok — men selve redigeringsfladen har stor dybde (paneler, auto-layout, komponentvarianter), og den fulde produktivitet kommer først, når man har investeret i at lære systemet.4

Tilgængelighed

8.6

Figma oplyser selv, at produktet arbejder hen imod WCAG 2.2 AA og har indbygget tastaturnavigation samt skærmlæser-understøttelse på mobil (VoiceOver/TalkBack) — men formuleringen "arbejder hen imod" er en ærlig indrømmelse af, at et grafisk canvas-værktøj endnu ikke er fuldt ud tilgængeligt.6

Top 5 anbefalinger

  1. Introducer komponent-tankegangen tidligere i onboardingen

    Da komponentsystemet er så centralt for både konsistens og skalerbarhed, kunne princippet med fordel præsenteres proaktivt for nye brugere, før de selv støder på behovet for at genbruge elementer.

  2. Gør status på tilgængelighedsarbejdet mere synlig

    En løbende, offentligt opdateret status for WCAG 2.2 AA-fremdriften ville gøre det lettere for teams med tilgængelighedskrav at vurdere, om værktøjet allerede dækker deres behov.

  3. Suppler ældre performance-tal med aktuelle feltdata

    Et tal som "3x hurtigere" fra WebAssembly-skiftet er flere år gammelt — en opdateret, offentlig sammenligning ville give et mere retvisende billede af dagens indlæsningstider.

  4. Fasthold den lave friktion i deling, efterhånden som funktioner vokser

    Efterhånden som Figma udvides med flere produkter (FigJam, Slides, Dev Mode, AI-funktioner), er risikoen, at "åbn et link"-enkelheden fortyndes af flere adgangsniveauer og indstillinger at forholde sig til.

  5. Fremhæv Dev Mode tidligere i design-workflowet

    Fordi Dev Mode binder design og kode sammen, kunne det med fordel introduceres allerede i designfasen frem for kun ved handoff, så udviklere kan følge med undervejs.

Hvad kan andre lære?

  1. Byg til et princip, ikke en efterspørgsel

    Figma byggede multiplayer, før nogen bad om det, ud fra en overbevisning om, hvordan webværktøjer burde fungere — nogle gange er det rigtige designvalg ikke det, brugerne selv efterspørger.2

  2. Fjern login-barrieren for at sænke deltagelsestærsklen

    Ved at lade et link (frem for en konto) være adgangsbilletten til at se og kommentere, sænker Figma tærsklen for, hvem der reelt deltager i designprocessen.1

  3. Progressive disclosure gælder også komplekse professionelle værktøjer

    Avancerede funktioner som komponentvarianter og auto-layout kan holdes bag mere specialiserede paneler, så standardfladen forbliver tilgængelig, mens dybden stadig er der for dem, der har brug for den.8

  4. Ærlighed om ufuldendt tilgængelighed er bedre end tavshed

    At formulere tilgængelighed som et mål, man "arbejder hen imod", er mere troværdigt end at hævde fuld compliance — og det giver teams et ærligt grundlag at planlægge ud fra.6

Afslutning

Figma er eksemplet på, at et enkelt arkitektonisk valg — at gøre samarbejde til udgangspunktet frem for en tilføjelse — kan omdefinere en hel faggren. Den browser-baserede, linkbaserede tilgang til deling og det sammenhængende komponentsystem hænger sammen og forstærker hinanden på tværs af design og udvikling.

Scoren holdes lige under topkarakter af den indlæringskurve, der følger med et professionelt værktøjs dybde, og af, at Figma selv beskriver sin tilgængelighed som et mål under fortsat udvikling snarere end en opnået standard. Begge dele er værd at følge, efterhånden som produktet vokser ud over sit kerne-publikum af designere.

Ofte stillede spørgsmål

Hvorfor er Figma kendt for sit samarbejde?

Fordi flere brugere kan redigere den samme fil i realtid over en delt forbindelse — en teknisk og designmæssig beslutning, Figma selv har beskrevet som et bevidst valg om, hvordan webværktøjer bør fungere, snarere end et svar på en konkret brugerefterspørgsel.

Skal man oprette en konto for at se eller kommentere et Figma-design?

Nej — alle med mindst "kan se"-adgang via et link kan se filen og tilføje kommentarer direkte på designet, uden at installere noget program.

Er Figma fuldt tilgængeligt efter WCAG?

Ikke endnu efter Figmas egne oplysninger: selskabet beskriver det som et mål, man "arbejder hen imod" (WCAG 2.2 AA), med indbygget tastaturnavigation og skærmlæser-understøttelse på mobil som delvise skridt undervejs.

Hvad gør Dev Mode anderledes end almindelig designhandoff?

Dev Mode giver udviklere kodesnippets, komponentegenskaber og linkede ressourcer (fx GitHub eller Jira) direkte på laget i selve designfilen, i stedet for at kræve et separat specifikationsdokument.

Anvendte principper

  • Realtidssamarbejde
  • Nul-friktion deling
  • Direkte manipulation
  • Konsistent komponentsystem

Relaterede mønstre

Kilder

  1. Free Online UI Design Tool & Software for TeamsFigma · Beskriver browser-baseret adgang uden installation og multiplayer-redigering
  2. How Figma's multiplayer technology worksFigma Blog
  3. Dev Modefigma.com
  4. Guide to comments in FigmaFigma Learn — Help Center
  5. Guide to components in FigmaFigma Learn — Help Center
  6. Accessibility at FigmaFigma Learn — Help Center
  7. WebAssembly cut Figma's load time by 3xFigma Blog · Historisk teknisk blogindlæg — ikke en aktuel, uafhængig performance-måling
  8. Progressive DisclosureNielsen Norman Group