Über dieses Video
Die meisten Entwickler erstellen Apps völlig verkehrt herum. Mit dem neuen Figma Code to Canvas MCP können Sie Ihre Anwendung nun zunächst per „Vibe Coding“ entwickeln und sich erst später um das Design kümmern. Claude überbrückt nahtlos die Lücke zwischen Ihrer Live-Codebasis und Ihrer Figma-Arbeitsfläche, unabhängig davon, ob Sie Tailwind oder reines CSS verwenden. Die wichtigsten Punkte: * Vibe Coding First: Erstellen Sie funktionsfähige Prototypen, bevor Sie mit dem Design beginnen. * Universelle Übersetzung: Claude übersetzt Figma-Designs automatisch in jedes beliebige CSS-Framework. * Zwei MCP-Typen: Wählen Sie zwischen einem schnellen lokalen Desktop-Server oder einem Remote-Cloud-Server. * Strenge Beschränkungen in der kostenlosen Version: Kostenlose Nutzer sind auf nur 6 Tool-Aufrufe pro Monat beschränkt, sodass ein kostenpflichtiger Tarif für ernsthafte Arbeit fast unverzichtbar ist. * UX braucht immer noch Menschen: Die KI bewältigt die Benutzeroberfläche gut, aber die Benutzererfahrung erfordert nach wie vor eine menschliche Note.
Die Zeiten, in denen man erst mit der Gestaltung der Pixel beschäftigt war, bevor man auch nur eine einzige Zeile Code geschrieben hatte, sind offiziell vorbei.
Ich habe mit der neuen Figma-Funktion „Code to Canvas“ experimentiert, die im Internet für viel Aufsehen gesorgt hat. Im Wesentlichen handelt es sich dabei um ein umfangreiches Update des Figma Model Context Protocol (MCP), mit dem man seinen Code direkt in eine Figma-Datei exportieren und anschließend Änderungen aus Figma zurück in die Codebasis übertragen kann.
Dieser Arbeitsablauf verändert unsere Herangehensweise an die Entwicklung von Anwendungen grundlegend. Anstatt mit akribisch ausgearbeiteten Wireframes zu beginnen, treten wir nun in das Zeitalter des „Vibe-Codings“ ein.
Was ist Vibe Coding?
Beim „Vibe-Coding“ werden mithilfe von KI schnell funktionsfähige Prototypen erstellt, wobei die anfängliche Designphase vollständig übersprungen wird. Man überlässt es der KI, das grundlegende Layout und die Benutzererfahrung festzulegen, um das Produkt so schnell wie möglich auf den Markt zu bringen.
Sobald die Anwendung läuft, können Sie mithilfe des Figma MCP den Live-Code direkt in eine Figma-Arbeitsfläche einbinden. Von dort aus können Sie Ihre Markenfarben anwenden, die Typografie verfeinern und diese Änderungen wieder mit Ihrem Repository synchronisieren. Für Claude spielt es keine Rolle, ob Ihre App Tailwind, Sass oder reines CSS verwendet. Es fungiert als universeller Übersetzer, der die Designanpassungen interpretiert und nahtlos auf Ihr spezifisches Framework anwendet.
Die lokale vs. die Remote-MCP-Konfiguration
Wenn Sie dies selbst ausprobieren möchten, müssen Sie die beiden verschiedenen Arten von MCP-Servern kennen:
- Desktop-Server (lokal): Dieser läuft direkt auf Ihrem Rechner (localhost:3845) und ist unglaublich schnell. Er steht jedoch nur Nutzern mit einem kostenpflichtigen Figma-Tarif zur Verfügung.
- Remote-Server (Cloud): Diese Funktion ist für alle Lizenzen verfügbar, auch für kostenlose Tarife. Die Verbindung erfolgt über einen HTTP-Transport in Claude.
Der große Vorbehalt
Bevor Sie sich zu sehr freuen: Es gibt einen Haken. Wenn Sie den kostenlosen Figma-Tarif nutzen, unterliegen Sie erheblichen Einschränkungen. Sie erhalten nur 6 Tool-Aufrufe pro Monat. Das ist kein Tippfehler. Sechs Aufrufe pro Monat reichen kaum aus, um ein einziges Tutorial abzuschließen, geschweige denn eine Produktionsanwendung zu entwickeln. Wenn Sie diesen Workflow ernsthaft nutzen möchten, ist ein Upgrade auf einen kostenpflichtigen Tarif praktisch unerlässlich, um die 200 täglichen Tool-Aufrufe freizuschalten.
Zudem ist KI zwar hervorragend darin, Layouts zu erstellen, trifft dabei jedoch oft schlechte Entscheidungen hinsichtlich der Benutzererfahrung (UX). Sie benötigen nach wie vor die menschliche Note, um sicherzustellen, dass Ihre Anwendung für Ihre Nutzer tatsächlich logisch sinnvoll ist.
Trotz dieser Hürden war die Kluft zwischen Entwicklern und Designern noch nie so gering wie heute. Die Möglichkeit, Daten zwischen Code und Arbeitsfläche hin und her zu übertragen, ist bahnbrechend, und ich werde diese Funktion auf jeden Fall in meinen zukünftigen Projekten nutzen.