Som alle kjente merkevarer, legger også TV 2 stor vekt på sin visuelle identitet. Vi har veldefinerte designregler for grunnelementene i TV 2s visuelle profil, samt retningslinjer for hvordan disse skal brukes.

Skrevet av Artur Gosan, Fullstack-utvikler i Team Coretech

Jeg har alltid vært fascinert av design, kanskje fordi jeg som gammel metalhead vokste opp med episke albumcovere og et hav av bandlogoer fulle av ekstrem, grenseløs kreativitet. Og som utvikler brenner jeg for å lage verktøy som støtter og implementerer designsystemer, for å generere visuelle elementer som skaper helhet og en tydelig merkevareopplevelse. 

Her er historien om hvordan vi i TV 2 fikk disse to verdene til å møtes, og til og med snakke samme språk.

Prolog: Hvorfor bry seg om "design-to-code"?

I TV 2 sto vi overfor en veldig typisk utfordring: å sikre enhetlig implementering av våre fantastiske grensesnitt på tvers av alle applikasjoner. Den største haken var at implementeringen måtte skje manuelt, med masse repetitive operasjoner – noe som var tidkrevende og ga rom for feil. Dette førte til et felles mål om å effektivisere denne delen av samarbeidet mellom designere og utviklere.

I fjor startet vi en arbeidsgruppe med mål om å automatisere design-til-kode leveransen. Gruppa bestod av både designere og utviklere fra ulike team, med engasjement fra Nyhets- og Sportsprodukter (NSP) og TV 2 Play. Vår single source of truth for design er Figma-biblioteker som definerer farger, fonter, dimensjoner, ikoner og mer komplekse elementer som knapper, etiketter og former.

Jeg var fra starten veldig optimistisk om dette, for Figma er jo et kjempeflott og fleksibelt verktøy med mange muligheter for å kommunisere med eksterne systemer – både gjennom plugins, utvidelser og API-er. Derfor var det en stor fordel å kunne velge mellom en rekke ulike løsninger for å bygge en bro fra Figma til koden, slik at endringer i design automatisk reflekteres i produktet. Det eneste spørsmålet var å finne den løsningen som passer oss og organisasjonen vår best.

Akt 1: TV 2 DSM – Jakten på den automatiske design-til-kode-broen

Etter noen spennende runder med arbeidsgruppa begynte vi å konkretisere hva vår Design System Manager (DSM) egentlig skulle være. Målet var å skape en slags 'Figma-tolk', et system som kunne automatisk trekke ut designvariabler fra Figma-bibliotekene og konvertere dem til kodevennlige formater.

Bakgrunn og utfordringer

Vårt første forsøk på å automatisere design-til-kode-leveransen dreide seg om å bygge et system som kunne løse følgende utfordringer:

Arkitektur og implementasjon

For å løse utfordringene vi hadde identifisert, falt valget på StyleDictionary – et verktøy som er skapt for nettopp dette: å transformere design tokens mellom ulike formater.

Det som gjensto, var å skrive en liten kodebit som oversatte Figma-variabler til W3C Design Tokens Format.

GitHub Actions-pipeline

For å automatisere prosessen ytterligere – og virkelig knytte design og kode sammen – rigget vi opp en GitHub Actions-pipeline. Tanken var enkel: Hver gang en designer gjorde endringer i Figma...

Transformasjoner og formater

Systemet støttet flere transformasjoner for ulike platformer:

Utfordringer og lærdommer

Denne første runden var en skikkelig lærepenge – vi støtte på flere uforutsette hindringer som ga oss verdifull innsikt. Blant de viktigste lærdommene var:

Men viktigst av alt: Vi endte opp med en fungerende pipeline som genererer bruksklare stilartifakter på under ett minutt!

Akt 2: MCP Server – Når KI kommer på banen

I dagens verden er det umulig å ignorere kunstig intelligens. Både design og utvikling opplever en revolusjon, drevet av nye verktøy, standarder og prosesser som endrer tankesett og arbeidsflyter – fra enkeltteam til hele organisasjoner.

Også vi i TV 2 utforsker ivrig nye muligheter der KI kan hjelpe oss med å skrive kode, ikke minst basert på designsystemet vårt. Nylig lanserte Figma støtte for MCP (Model Context Protocol), og vi har selvsagt undersøkt hva dette kan tilby oss i TV 2.

MCP er en standard som lar oss beskrive konteksten til en språkmodell. Se for deg at vi kan "mate" en KI med informasjon om designsystemet vårt, slik at den forstår hvordan ting skal se ut og oppføre seg.

TV 2 DSM – MCP Server-arkitektur

Figma MCP åpner for spennende muligheter for å generere kode direkte fra designskisser. Men for å virkelig utnytte kraften i MCP, trengte vi en måte å gi språkmodeller tilgang til TV 2s spesifikke designregler og definisjoner fra vårt DSM.

Dette førte oss raskt til behovet for å bygge vår egen MCP-server. En server som kunne:

Det viste seg å være relativt enkelt å legge til et ekstra trinn i TV 2 DSM-genereringsprosessen: å produsere strukturerte metadata med all informasjonen som vår MCP-server trenger for å bygge konteksten for språkmodellen. Agenten måtte ha mulighet til å be om et spesifikt fargetema eller en bestemt DSM-versjon.

Og det fungerer utmerket! Vår MCP-server kan enkelt definere TV 2 DSM-konteksten som språkmodeller kan bruke for å legge til DSM-støtte i både nye og eksisterende komponenter. Dette åpner for muligheten til å bygge theme-changere og gi detaljert informasjon om TV 2 DSM-innhold for alle platformer og rammeverk.

Figma MCP integrasjonsvarianter

Det siste steget var å koble sammen vår DSM-MCP med Figma MCP, i et forsøk på å generere kode direkte fra Figma-skisser med full TV 2 DSM-støtte.

Dessverre oppdaget vi at Figma MCP har en del begrensninger. For det første kan du kun kjøre det lokalt fra din Figma desktop-applikasjon. Dermed er det for eksempel tilgjengelig i Cursor som:

For det andre genererer Figma MCP React-kode med Tailwind-støtte – noe som krever ytterligere transformasjon dersom du for eksempel trenger Svelte med SCSS.

Vi forsøkte å tilpasse Figma MCP-responsen på to ulike måter, siden vår DSM-MCP kan kjøres både lokalt med STDIO-transport og over HTTP fra en sentral server.

Lokalt kunne vi kommunisere med Figma MCP direkte gjennom MCP-klienten implementert i DSM-MCP. Dette ga oss full kontroll over Figma-responsen og åpnet for transformasjoner som kunne gjøres i en direkte dialog mellom DSM-MCP og språkmodeller – før hele svaret ble returnert til agenten. Denne metoden ligner nesten på en RAG (Retrieval Augmented Generation)-løsning, men kan fortsatt tilbys som et MCP-verktøy.

Med DSM-MCP over HTTP mister vi muligheten til å kommunisere direkte med Figma MCP. I stedet kan vi instruere agenten til å hente kode fra Figma og videresende den tilbake til DSM-MCP.

Agenten fungerer da som en mellommann som henter data fra Figma på våre vegne. Hvis dette lykkes, kan DSM-MCP transformere Figma-responsen og legge til DSM-støtte.

Epilog: TV 2s reise mot automatiserte design-til-kode-leveranser

Vår reise mot å automatisere design-til-kode-leveranser i TV 2 har vært en transformativ opplevelse som har endret måten vi tenker på samarbeidet mellom design og utvikling. Fra de første utfordringene med manuell implementering av designsystemer til dagens avanserte MCP-integrasjon er vi nå godt på vei mot å bygge et robust økosystem som sikrer konsistens, effektivitet og skalerbarhet.

Vi startet med å bygge en Design System Manager (DSM) som automatisk henter designvariabler fra Figma-bibliotekene våre og transformerer dem til kodevennlige formater. Dette eliminerte ikke bare behovet for manuell stilgenerering, men sikret også effektiv distribusjon via CDN og NPM for alle design tokens.

Med introduksjonen av Model Context Protocol (MCP) tok vi et stort steg videre mot AI-assistert utvikling. Vår egen MCP-server fungerer nå som en dedikert TV 2 DSM-ekspert, som gir språkmodeller den konteksten de trenger for å generere kode direkte fra Figma-skisser – enten gjennom direkte MCP-integrasjon eller en agent-mediert tilnærming.

Hva venter rundt neste sving?

Vi er ikke ferdige ennå! Fremtiden byr på enda større muligheter.

Vi ser for oss en fremtid med AI-assistert komponentgenerering, avanserte theming-muligheter og et utvidet DSM-scope som inkluderer alle definerte komponenter som komplekse design tokens. Dette representerer ikke bare en teknisk bragd, men en fundamental endring i hvordan vi tenker på design-til-kode-leveranser – fra manuelle, adskilte oppgaver til en kontinuerlig og automatisert prosess.

Konklusjon: Design og kode i harmoni

Vår reise med design-til-kode-automatisering har vist oss at det er fullt mulig å bygge et robust system som:

MCP-integrasjonen har åpnet døren for spennende muligheter innen AI-assistert utvikling, hvor språkmodeller kan forstå og bruke TV 2 sitt designsystemet direkte i kodegenereringen.

Lærdommer fra frontlinjen

Design-til-kode-leveranser er ikke lenger en fremtidsvisjon, men en realitet som kan transformere måten vi skaper digitale produkter på. Med de rette verktøyene og prosessene kan vi skape en verden hvor design og kode lever i perfekt harmoni – og hvor kreative ideer raskt og effektivt blir til virkelighet.