Figma MCP vs. Screenshots: Was funktioniert besser mit Claude Code?

Lohnt sich der Figma MCP? Ich habe ihn in Claude Code gegen meinen detaillierten Screenshot Prompt getestet, und das Ergebnis hat mich überrascht.

In meinem letzten Video hat Claude Code aus meinen Figma Screenshots in 48 Minuten eine komplexe Website gebaut, inklusive Infinite Slider, animierter Artist Overlays und Preloader. Allein der Prompt hatte aber 2.646 Wörter. Deshalb habe ich diesmal drei Workflows direkt miteinander verglichen: Screenshots mit einem detaillierten Master Prompt, den Figma MCP mit einem minimalen Prompt und den Figma MCP mit einem kurzen Prompt mit Fokus auf Animationen.

Das lernst du:

• Wie sich der Figma MCP vom Arbeiten mit Screenshots unterscheidet
• Wie du Links zu Figma Artboards im Dev Mode kopierst
• Geschwindigkeit, Designgenauigkeit und Animationsqualität aller drei Workflows
• Was der Figma MCP kostet und wie viele Tool Calls du wirklich brauchst

Figma MCP oder Screenshots: Was funktioniert mit Claude Code besser?

In meinem letzten Video hat Claude Code eine komplette Website aus meinem Figma Design gebaut: einen Infinite Slider, animierte Artist Profile, einen Preloader und eine Hover Interaktion für eine Genre Liste. Das erste Ergebnis hat mit Claude Opus 5.5 auf High etwa 48 Minuten gedauert, dazu kam ein Feedback Prompt für ein paar kleinere Fehler.

Der Haken: Mein ursprünglicher Prompt hatte 2.646 Wörter. Den Großteil habe ich diktiert und Claude die finale Version schreiben lassen. Trotzdem brauchst du einen detaillierten, gut strukturierten Prompt, um mit Screenshots solche Ergebnisse zu bekommen.

In den Kommentaren haben mich einige gefragt, warum ich nicht einfach den Figma MCP Server nutze. Gute Frage. Mit dem MCP liest Claude die echten Designdaten direkt aus Figma. Theoretisch musst du dann in deinem Prompt viel weniger beschreiben. Aber funktioniert das wirklich, und lohnt es sich, dafür zu bezahlen? Genau darum geht es in diesem direkten Vergleich.

Screenshots vs. Figma MCP: Der Unterschied

In meinen bisherigen Tests habe ich die Figma Layouts als Bilder exportiert und in das Claude Code Projekt gelegt, auch eine Version mit sichtbarem 12 Spalten Grid. Zusammen mit meinen Anweisungen hat Claude die Designs fast pixelgenau nachgebaut.

Aus einem Screenshot muss Claude aber Abstände, Schriftgrößen und die Positionierung der Elemente selbst herausfinden. Außerdem erkennt es nicht immer, ob ein Element eine reduzierte Deckkraft hat oder einfach eine andere Farbe nutzt. Das alles kannst du im Prompt erklären, bei größeren Projekten wird das aber schnell zeitaufwendig.

Mit dem Figma MCP hat Claude Zugriff auf die echte Designstruktur:

• Maße und Layoutinformationen
• Typografie und Variablen
• Assets, die es herunterladen, in WebP umwandeln und in einem Ordner für dich speichern kann
• Screenshots direkt aus deinen Figma Artboards, sodass du nichts mehr selbst exportieren musst

Eins ist mir aber wichtig: Du brauchst den Figma MCP nicht, um mit Claude Code Websites zu bauen. Screenshots funktionieren richtig gut, und du kannst deine Designs sogar in ganz anderen Tools erstellen.

Der Testaufbau

Für dieses Experiment habe ich die EDDY Website aus meinem letzten Video genutzt und drei Ansätze verglichen:

1. Referenz: Screenshots, ein detaillierter Master Prompt und ein Feedback Prompt. Etwa 48 Minuten bis zum ersten Ergebnis.
2. Figma MCP mit minimalem Prompt: nur die Links zu den Figma Layouts und ein paar grundlegende Hinweise, wie sie zusammenhängen. Keine Anweisungen zu Animationen.
3. Figma MCP mit kurzem Prompt: das technische Setup und die Animationsanweisungen, aber keine detaillierten Layoutvorgaben wie Farben, Abstände oder Typografie.

Beide MCP Tests liefen mit demselben Modell und frischen Projektordnern.

So kopierst du den Link zu einem Figma Artboard

Wähle in Figma ein Artboard aus und drücke Shift + D, um in den Dev Mode zu wechseln. Auf der rechten Seite findest du ein kleines Link Icon, das die URL genau dieses Artboards kopiert. Diesen Link kannst du direkt in deinen Prompt in Claude Code einfügen.

Test 1: Figma MCP mit minimalem Prompt

Claude war nach etwa 10 Minuten fertig, also deutlich schneller als die 48 Minuten mit dem Screenshot Workflow. Natürlich fehlen dieser Version die komplexeren Interaktionen, ganz fair ist der Vergleich also nicht. Die Umsetzung war trotzdem gut.

Bilder und Texte saßen fast genau dort, wo sie hingehören. Das habe ich geprüft, indem ich einen Screenshot des Ergebnisses mit dem Blend Mode Difference über das originale Figma Artboard mit 1728px gelegt habe. Schwarze Bereiche zeigen übereinstimmende Pixel, alles andere macht die Unterschiede sichtbar.

Ein Problem zeigte sich beim Skalieren des Browsers: Die ganze Website wuchs mit der Viewport Breite mit. Claude hat für die Texte rem genutzt, was grundsätzlich gut ist, die Root Schriftgröße aber aus der Viewport Breite berechnet. Auf großen Bildschirmen wird so alles immer größer, und beim Zoomen mit der Tastatur wird der Text nicht mehr größer. Für die Barrierefreiheit ist das ein echtes Problem.

Die Interaktionen waren eher einfach:

• Der Preloader blendet nur das Logo ein und schiebt den Screen nach oben.
• Der Slider lässt sich ziehen, wirkt aber steif, ist nicht smooth und nicht infinite.
• Das Artist Overlay öffnet sich mit einem einfachen Fade statt mit dem Bildübergang.
• Der Genre Hover war überraschend gut, inklusive einer kleinen Scale und Fade Animation, obwohl ich ihn gar nicht erwähnt hatte. Die Bilder verschwinden aber sofort, wenn du einen Namen verlässt, was zu Flackern führt.

Test 2: Figma MCP mit kurzem Prompt

Diesmal habe ich das technische Setup und die Animationsanweisungen ergänzt. Claude brauchte etwa 21 Minuten, also immer noch deutlich weniger als die Referenz.

Der Preloader mit der Buchstabe für Buchstabe Animation hat funktioniert, aber der Buchstabenabstand änderte sich plötzlich, als das Logo in seine finale Position wanderte. Tatsächlich war der Buchstabenabstand auf der ganzen Website leicht daneben, obwohl Claude Zugriff auf die Figma Werte hatte.

Der Slider hatte jetzt Autoplay, sprang aber von Artist zu Artist, statt sich kontinuierlich zu bewegen. Außerdem hatte er dieselben Probleme wie mein erstes Ergebnis: Er ging nicht über die volle Bildschirmbreite und die Parallax Bilder sprangen nach dem Ziehen.

Die größte Überraschung war das Artist Overlay. Das Bild ging nicht smooth aus dem Slider über und sprang beim Schließen. Mit dem detaillierten Screenshot Prompt hat Claude das direkt beim ersten Versuch richtig umgesetzt. Der Genre Hover sah gut aus, aber das Bild folgte dem Cursor, statt links zu bleiben, und alle Artist Namen wurden ausgeblendet statt nur die in derselben Zeile.

Alle drei Ergebnisse im Vergleich

Beim Design kamen alle drei Versionen ziemlich nah an das originale Figma Layout heran. Bei den Interaktionen hat der detaillierte Screenshot Prompt klar besser funktioniert, vor allem beim Infinite Slider und beim smoothen Übergang ins Artist Overlay.

Bei der Geschwindigkeit waren die MCP Versionen eindeutig schneller. Denk aber daran, dass das nur die ersten Ergebnisse sind und alle drei noch ein paar Feedback Runden bräuchten.

Was kostet der Figma MCP?

Du kannst den Remote Figma MCP kostenlos nutzen, bist dann aber auf 20 Tool Calls pro Monat begrenzt. In meinem Test hat Claude für einen einzigen Prompt fünf Tool Calls verbraucht. Das Limit ist also schnell erreicht.

Für die regelmäßige Nutzung brauchst du wahrscheinlich einen bezahlten Plan. Einen vollen Seat brauchst du aber nicht: Ein Dev Seat im Professional Plan kostet etwa 15 Dollar pro Monat und bietet dir bis zu 200 Tool Calls pro Tag, was für die meisten Projekte reichen sollte.

Mein Fazit

Claude direkten Zugriff auf meine Designdateien zu geben, hat nicht automatisch zu einem besseren Ergebnis geführt. Mein Screenshot Workflow kam mit den komplexen Animationen deutlich besser zurecht. Der größte Vorteil des MCP ist die Zeit, und das wird vor allem bei größeren Websites mit mehreren Seiten interessant.

Der Test hat aber auch gezeigt, dass ein guter Prompt nach wie vor extrem wichtig ist, besonders beim responsiven Verhalten, bei Animationen und all den kleinen Details, die eine Website gut anfühlen lassen. Für mich ist der Figma MCP kein Ersatz für einen guten Prompt. Er ist ein weiteres Tool, das den Prozess etwas einfacher machen kann.