{"id":482,"date":"2026-02-18T08:23:14","date_gmt":"2026-02-18T06:23:14","guid":{"rendered":"https:\/\/vittrup-graversen.dk\/?p=482"},"modified":"2026-03-28T12:10:57","modified_gmt":"2026-03-28T10:10:57","slug":"figma-og-claude-code-bygger-bro-mellem-kode-og-design","status":"publish","type":"post","link":"https:\/\/vittrup-graversen.dk\/index.php\/2026\/02\/18\/figma-og-claude-code-bygger-bro-mellem-kode-og-design\/","title":{"rendered":"Figma og Claude Code bygger bro mellem kode og design"},"content":{"rendered":"\n

N\u00e5r en udvikler prompter Claude Code til at bygge en brugergr\u00e6nseflade, har resultatet typisk v\u00e6ret en fungerende prototype \u2014 men designm\u00e6ssigt et stykke fra noget, et designteam ville nikke til. Det problem adresserer Figma nu med en ny feature kaldet Code to Canvas<\/strong>, udviklet i partnerskab med Anthropic.<\/p>\n\n\n\n

Fra kode til redigerbart design<\/h2>\n\n\n\n

Code to Canvas tager kode genereret af AI-v\u00e6rkt\u00f8jer som Claude Code og konverterer den til fuldt redigerbare designkomponenter inde i Figma. Id\u00e9en er enkel: I stedet for at designe f\u00f8rst og kode bagefter \u2014 eller omvendt \u2014 kan teams nu starte med en AI-genereret prototype og forfine designet visuelt.<\/p>\n\n\n\n

Konkret betyder det, at en udvikler kan prompte Claude Code til at bygge en React-komponent, eksportere resultatet til Figma via Code to Canvas, og derfra kan designteamet sammenligne varianter side om side og justere layout, farver og spacing \u2014 uden at r\u00f8re koden.<\/p>\n\n\n\n

Hvorfor det er vigtigt for udviklere<\/h2>\n\n\n\n

Partnerskabet afspejler en vigtig erkendelse: Agentic coding-v\u00e6rkt\u00f8jer som Claude Code har ikke elimineret behovet for design \u2014 de har gjort det mere<\/em> essentielt. N\u00e5r enhver udvikler kan generere en fungerende UI p\u00e5 minutter, bliver den designm\u00e6ssige kvalitet den afg\u00f8rende differentiator.<\/p>\n\n\n\n

For udviklere, der arbejder med agentic workflows, l\u00f8ser Code to Canvas et reelt problem. Mange teams har oplevet, at AI-genererede prototyper er sv\u00e6re at overlevere til designere, fordi de kun eksisterer som kode. Nu f\u00e5r designerne et visuelt udgangspunkt at arbejde videre fra.<\/p>\n\n\n\n

Konteksten: Sonnet 4.6 og SaaS-panikken<\/h2>\n\n\n\n

Lanceringen kommer samtidig med, at Anthropic har udgivet Claude Sonnet 4.6 \u2014 blot 12 dage efter Opus 4.6. Sonnet 4.6 er nu standardmodellen for alle Claude-brugere og bringer if\u00f8lge Anthropic “Opus-niveau performance” til hverdagens opgaver, is\u00e6r inden for kodning og databehandling.<\/p>\n\n\n\n

Figma-partnerskabet kommer dog p\u00e5 et interessant tidspunkt. SaaS-aktier er i frit fald \u2014 branchen kalder det “SaaSpocalypse” \u2014 og Figmas egen aktie er faldet 85% fra toppunktet. Ironisk nok bygger Figma nu en bedre onramp til en motorvej, de m\u00e5ske ikke l\u00e6ngere kontrollerer.<\/p>\n\n\n\n

Perspektiv<\/h2>\n\n\n\n

Code to Canvas er et pragmatisk svar p\u00e5 den nye virkelighed, hvor AI-genereret kode er allestedsn\u00e6rv\u00e6rende. I stedet for at k\u00e6mpe imod str\u00f8mmen, fors\u00f8ger Figma at g\u00f8re sig uundv\u00e6rlig i den del af processen, som AI endnu ikke mestrer fuldt ud: det visuelle h\u00e5ndv\u00e6rk og designbeslutningerne.<\/p>\n\n\n\n

Sp\u00f8rgsm\u00e5let er, hvor l\u00e6nge det forspring holder. Hvis AI-v\u00e6rkt\u00f8jer forts\u00e6tter med at forbedre deres designkvalitet, risikerer teams at springe forfiningstrinnet helt over. Men lige nu er Code to Canvas pr\u00e6cis det bindeled, mange agentic workflows mangler.<\/p>\n\n\n

Denne artikel er skrevet i samarbejde med AI, og efterf\u00f8lgende redigeret af et rigtigt menneske \ud83d\ude42<\/em><\/p>","protected":false},"excerpt":{"rendered":"

Figma og Claude Code bygger bro mellem kode og design. AI-agenter kan nu overs\u00e6tte designfiler direkte til fungerende kode.<\/p>\n","protected":false},"author":1,"featured_media":481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[23],"class_list":["post-482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-agentic-engineering","tag-claudecode"],"acf":[],"_links":{"self":[{"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/posts\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/comments?post=482"}],"version-history":[{"count":2,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/posts\/482\/revisions"}],"predecessor-version":[{"id":1049,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/posts\/482\/revisions\/1049"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/media\/481"}],"wp:attachment":[{"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/media?parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/categories?post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vittrup-graversen.dk\/index.php\/wp-json\/wp\/v2\/tags?post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}