Opbygning af et skalerbart Flutter-designsystem til virksomhedsprodukter
Designede et skalerbart Flutter-designsystem baseret på Material Design 3 og virksomhedens UI-fundament. Det genbrugelige komponentbibliotek gjorde produktudviklingen hurtigere og sikrede ensartethed på tværs af fremtidige mobilapps.
Branche Virksomhedssoftware
Tjenester Designsystemer · Design Engineering
Designede et omfattende Flutter-designsystem med afsæt i virksomhedens eksisterende fundament og Material Design 3. Det muliggjorde ensartet, skalerbar UI-udvikling på tværs af fremtidige mobilapps.
Udfordring
En virksomhedskunde havde brug for et dedikeret designsystem til fremtidige Flutter-applikationer. Der fandtes allerede et designsprog, men det var hverken optimeret til Flutter-udvikling eller afstemt med de nyeste principper i Material Design 3. Målet var at skabe et skalerbart fundament, som udviklere og designere kunne bygge ensartet videre på på tværs af flere produkter.
Mål
Skab et designsystem med Flutter i centrum, der udvider virksomhedens eksisterende designsprog og fuldt ud anvender Material Design 3. Sørg for ensartethed, forbedr effektiviteten i udviklingen, og lever et genbrugeligt komponentbibliotek, der kan understøtte fremtidige produkter.
Research og strategi
Projektet begyndte med en grundig analyse af Material Design 3, inklusive designtokens, adaptivt farvesystem, komponentadfærd, dybdemodel, typografi, afstande og interaktionsmønstre.
Vi gennemgik det eksisterende virksomhedsdesignsystem for at finde genbrugelige grundelementer og områder, der skulle tilpasses Flutter. Arkitekturen balancerede Material-standarder med produktspecifikke krav og skabte et fleksibelt system, der kunne udvikle sig sammen med fremtidige apps.
Løsning
Et dedikeret Flutter-designsystem blev skabt fra bunden med en kombination af UI-standarder til virksomheder og bedste praksis fra Material Design 3. Frem for blot at kopiere Material-komponenter udvidede systemet dem til kundens produktøkosystem og bevarede samtidig ensartethed, tilgængelighed og effektiv implementering.
Biblioteket omfattede genbrugelige komponenter, designtokens, adaptive farveskemaer, typografi, afstande, ikoner, dybderegler og interaktionstilstande, alt sammen dokumenteret til smidigt samarbejde mellem design- og udviklingsteams.
Resultat
Det færdige designsystem skabte et skalerbart UI-fundament til fremtidige Flutter-produkter, forbedrede ensartetheden på tværs af grænseflader, gjorde design- og udviklingsarbejdet hurtigere og mindskede indsatsen ved lancering af nye applikationer.