Figma beskriver problemet slik: når en KI-kodingsagent ser en Figma-design uten kontekst, jobber den fra et skjermbilde. Den velger en blånyanse som ligner din brand-farge, men uten å vite at den er koblet til et spesifikt token. Den bygger et kort fra bunnen av i stedet for å hente det du har brukt på dusinvis av flater. Resultatet ser riktig ut ved første øyekast, men avviker fra systemet ditt på måter som akkumuleres.
MCP-serveren lukker dette gapet ved å eksponere to verktøy: generate_figma_design oversetter HTML fra kjørende applikasjoner til redigerbare Figma-lag — nyttig når design og kode har driftet fra hverandre. use_figma lar KI-agenter opprette og redigere designs direkte på canvas med faktiske komponenter og variabler fra designsystemet ditt.
Figma-ingeniør Thariq Shihipar fra Anthropic demonstrerte nylig en ende-til-ende-arbeidsflyt mellom Claude Code og Figma der kontekst flyter begge veier. Det er akkurat dette som gjør dette annerledes enn tidligere integrasjoner — ikke bare kode fra design, men design oppdatert fra kode.
For å få best mulig utbytte anbefaler Figma at du navngir lag meningsfullt («card» fremfor «Frame 1337»), bruker faktiske komponenter og tokens fra bibliotekene, og legger til annotations for interaksjonsintensjon som KI ikke kan utlede fra statiske rammer.
Hva bør du gjøre?
- Legg til kode-syntaks på variabler i Figma — «color-brand-blue» fremfor «brand-blue» — slik at MCP-serveren sender eksakt kodevariabelnavn til agenten
- Invester tid i Skills-filer (markdown-dokumenter) som forteller agenten hvilke komponenter som brukes til hva — uten dem vil agenten bruke riktige komponenter på feil måte
- Test
use_figma-verktøyet med Claude Code for å verifisere at generert kode faktisk importerer fra designsystemet ditt fremfor å opprette nye komponenter