Nå kan Figma prate med editoren – Monica har testet
– Designeren ville ikke gitt meg en high five, sier Monica Beate Tvedt om Figmas Dev Mode MCP Server.
Figma lanserte nylig betaversjonen av Dev Mode MCP Server – en ny løsning som gjør det mulig for Figma å "snakke med" agentiske kodeassistenter som Copilot i VS Code, Cursor eller Windsurf.
– Som en beta, er dette bare begynnelsen. I løpet av de neste månedene har vi planer om å lansere en masse oppdateringer, skriver Figma.
- MCP – Model Context Protocol – er en forholdsvis ny standard for hvordan AI-assistenter og store språkmodeller (LLM-er) kan kommunisere med eksterne data og tjenester.
- Løsningen ble laget av Anthropic, men raskt tatt i bruk av veldig mange andre.
Ifølge Figma fungerer Figma Dev Mode MCP Server ved å gi språkmodellene detaljert informasjon om designene i Figma, ikke bare visuell informasjon om hvordan designet ser ut. Det kan for eksempel være referanser til variabler, komponenter, stiler eller kode. Ting LLM-en ellers måtte "funnet opp" selv.
Monica Beate Tvedt er teknologidirektør i Forte Digital og har testet løsningen litt for å se hvor god den er i praksis.
Testet løsningen
I et LinkedIn-innlegg skriver Tvedt at hun har sett imponerende videoer, men at resultatene hun selv oppnådde kanskje ikke var like imponerende som skrytevideoene.
«Den implementerte faktisk designet – akkurat slik en ekte backendutvikler ville gjort det (de som vet, de vet)» skriver Tvedt.
Se videoen hennes her:
– Designeren ville ikke gitt meg en high five, selv om de – i rettferdighetens navn – sjelden gjør det uansett.
Til kode24 sier hun at har lest at man får best resultater om man bruker Figmas Code Connect-funksjonalitet sammen med et fullspekket designsystem med komponenter.
– Men det har jeg ikke fått testet ut selv ennå, forteller hun.
Tok en time
Tvedt skriver at hun ofte ser innlegg om hvor mye tid man kan spare på å bruke "copiloter" og agenter. Men selv om det ofte kan være sant, er det viktig å vite hvor du virkelig kan få utbytte av disse løsningene.
– For eksempel brukte jeg nylig over en uke på å prøve å få en agent til å sette opp en ålreit CI/CD-pileline. Det var vanskelig – for øyeblikket er det bedre å overlate slike oppgaver til senior-utviklerne, skriver hun.
- For å teste ut ulike AI-agenter og MCP-servere satte Tvedt opp et React/Vite-prosjekt som du finner git-repoet til her.
- Først startet hun med å prøve å få Copilot Agent Mode til å fikse opp i en enkel UI-feil, før hun ga Copilot en mer avansert oppgave der den på egen hånd skulle implementere et design fra Figma-skisser.
– Det tok over en time å bli ferdig, så inntil videre gir den deg kanskje ikke den produktivitetsøkningen du forventer. Men med den raske utviklingen på området, hvem vet – den kan være vesentlig bedre neste uke!
Monicas tre tips
Etter å ha prøvd Figma MCP Server, har Monica Beate Tvedt tre råd til andre utviklere som har lyst til å teste det ut.
– Min korte erfaring er at man får bedre resultater om man:
- Tar små implementeringsjobber om gangen. Det vil si å ikke gi den større designskisser, men selektere/gi den id-en til minst nødvendig scope for hver implementeringsjobb.
- Husker å be copilot eller agenten din om å gjenbruke eksisterende komponenter, variabler for styling osv., samt at den skal implementere designet «nøyaktig» slik som skissen viser. Den liker å lage det meste selv, og kun bruke skissen som «inspirasjon» og da får man gjerne dobbelt opp i kodebasen og noe som bare ligner på skissen.
- Er nøye med hvordan Figma-skissen er organisert med tanke på gruppering av layers og navngivning (bruk f.eks. eksisterende klassenavn på de ulike lagene type: card, row, col-6) og mest mulig gjenbruk av komponenter.
– Copilot er veldig glad i å lage sine egne klassenavn – så pass på at den følger dine egne prinsipper for styling, det være seg modul-basert, component-basert eller utility-basert. Skriv gjerne noe om dette i instruksfilen din.
