Monica Beate Tvedt i Forte Digital har testet Figma MCP server. 📸: Monica Beate Tvedt / LinkedIn

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.

Publisert

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.

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:

  1. 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.
  2. 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.
  3. 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.

Powered by Labrador CMS