So konvertieren Sie Figma in WordPress (4 einfache Wege, einschließlich KI)

Unser Designteam plant Seitenlayouts in Figma, bevor es sie in WordPress erstellt. Erstes Design ermöglicht es Ihnen, sich auf das genaue Layout festzulegen und es dann auf Ihrer Website nachzubilden.

In diesem Leitfaden zeigen wir Ihnen vier Möglichkeiten, Figma in WordPress zu konvertieren, beginnend mit der KI-Methode, die wir selbst getestet haben.

Bevor Sie beginnen: Bereiten Sie Ihren Figma-Frame vor

Ein Frame ist eine einzelne, fest dimensionierte Leinwand in Figma, die einen Bildschirm oder eine Seite Ihres Designs enthält.

Die KI-Methode und Konverter-Plugins lesen Ihren Frame direkt. Ein sauberer Frame erspart Ihnen später eine Korrekturschleife.

Figma's kostenloser Starter-Plan reicht für alles in dieser Anleitung aus, sodass Sie kein kostenpflichtiges Figma-Konto benötigen, um mitzumachen.

Wählen Sie zuerst Ihren Frame aus und drücken Sie Umschalt + A oder klicken Sie im rechten Bedienfeld auf die Schaltfläche "Auto Layout".

Auto Layout weist Figma an, Elemente nach Regeln und nicht nach festen Positionen zu verteilen und zu stapeln. Es hilft Ihrem Design, später für mobile Geräte konvertiert zu werden.

Benennen Sie als Nächstes Ihre Ebenen so um, dass sie ihren Inhalt beschreiben, z. B. "Hero-Bild" oder "CTA-Schaltfläche" anstelle von "Rechteck 47".

KI-Tools und Konverter-Plugins verwenden diese Namen, um jede Ebene zu verstehen. Klare Namen bedeuten weniger Korrekturen danach.

Wenn Sie Zeit haben, entwerfen Sie einen mobilen Frame neben Ihrem Desktop-Frame. Das gibt jedem Tool eine echte Referenz dafür, wie die Seite auf einem Telefon gestapelt werden soll, anstatt es zu erraten.

Schließlich benötigen Sie den Link zu diesem bestimmten Frame. Klicken Sie mit der rechten Maustaste auf den Frame, gehen Sie zu "Kopieren/Einfügen als" und wählen Sie "Link zur Auswahl kopieren".

Der Link, den Sie erhalten, enthält node-id=, was dem Tool mitteilt, welchen Frame es lesen soll. Ein einfacher Dateilink ohne node-id= verweist auf die gesamte Datei anstelle Ihres ausgewählten Frames und funktioniert nicht mit den unten gezeigten KI- oder Konverter-Plugins.

Methode 1: Figma mit KI in WordPress konvertieren

Der schnellste Weg, ein Figma-Design in eine WordPress-Seite umzuwandeln, ist, die KI Ihren Frame lesen zu lassen und ihn für Sie neu zu erstellen. Sie benötigen drei Dinge, und alle drei haben kostenlose Pläne.

Das erste ist Claude, der KI-Assistent, der die Arbeit erledigt. Das zweite ist Figmas offizieller Connector, das Teil, das Claude die Berechtigung gibt, Ihre Figma-Datei zu lesen.

Das dritte ist WPVibe, ein kostenloses Plugin, das Ihre WordPress-Site mit Claude verbindet und die Seite direkt auf Ihrer Site erstellt.

Auf Figmas kostenlosem Starter-Plan erhalten Sie bis zu 20 KI-Lesevorgänge pro Monat. Das reicht für eine Handvoll Seiten. Kostenpflichtige Pläne geben Dev- und Full-Sitze bis zu 200 Lesevorgänge pro Tag, während View- und Collab-Sitze bei 20 pro Monat bleiben.

Um loszulegen, müssen Sie zuerst Figma verbinden. Gehen Sie in der Claude-App zu Einstellungen » Connectors, suchen Sie Figma und melden Sie sich mit Ihrem Figma-Konto an.

Wenn Sie Claude Code verwenden, führen Sie den Befehl /mcp aus und wählen Sie Figma aus der Liste aus.

Installieren und aktivieren Sie als Nächstes WPVibe auf Ihrer WordPress-Site auf die gleiche Weise, wie Sie jedes Plugin installieren. Schritt-für-Schritt-Anleitungen finden Sie in unserer Anleitung zum Installieren eines WordPress-Plugins.

Sobald es aktiv ist, führt Sie der WPVibe-Bildschirm durch drei kurze Schritte. Kopieren Sie die MCP-Server-URL, die er anzeigt, fügen Sie sie als Connector zu Claude hinzu und verifizieren Sie Ihre E-Mail-Adresse mit dem sechsstelligen Code, den das Plugin Ihnen sendet.

Bitten Sie dann Claude, Ihre Website zu verbinden, und genehmigen Sie dies mit einem Klick aus dem Inneren von wp-admin. Sie kopieren in diesem Prozess niemals ein Passwort.

Sobald Sie WPVibe erfolgreich mit Claude verbunden haben, fügen Sie Ihren Frame-Link mit dieser Eingabeaufforderung in Claude ein.

Read this Figma frame: [paste your link]. Rebuild it as a new DRAFT page using native WordPress blocks only (group, columns, heading, paragraph, buttons, image). Upload the images to the media library. Match the colors, fonts and spacing. Do not publish.

Der Ausdruck „Native Blöcke“ in der Eingabeaufforderung bedeutet die Standardblöcke, die mit WordPress geliefert werden. Die Seite, die Sie erhalten, bleibt also im normalen Block-Editor bearbeitbar und benötigt kein zusätzliches Plugin zur Anzeige.

Das Wort ENTWURF ist ebenfalls wichtig, da es die Seite von Ihrer Live-Website fernhält, bis Sie sie überprüft haben.

Als wir dies auf unserer Testseite ausführten, gab eine einzige Lesung des Frames Claude die exakten Hex-Farben, Schriftgrößen, Zeilenhöhen, Abstände und Eckradien aus dem Design.

Der erste Entwurf kam in 3 Minuten und 20 Sekunden an, und diese Werte kamen in nativen Blöcken durch.

Das Layout war das, was behoben werden musste, bevor die Seite wie unser Figma-Frame aussah. Claude lud auch unsere Bilder mit dem Medien-Upload-Tool von WPVibe hoch.

Dies funktioniert nur, wenn Ihr Design echte Bilder enthält. Ein Platzhalterrechteck in Figma erzeugt überhaupt kein Bild, und Sie erhalten keine Warnung dazu.

Vier Dinge gingen bei unserem Test schief. Zwei Button-Blöcke wurden in einem Zustand gespeichert, den WordPress als ungültig behandelte, und der Editor zeigte eine Benachrichtigung „Blockwiederherstellung versuchen“ an.

Das Klicken auf diese Benachrichtigung behob beide Buttons, aber es sieht beunruhigend aus, wenn man es nicht erwartet.

Das zweite Problem trat auf dem Desktop auf. Claude baute unsere Abschnitte mit der normalen Inhaltsbreite des Themes.

Das Design saß in einer schmalen Spalte in der Mitte des Bildschirms, und die drei Feature-Karten brachen ein Wort pro Zeile. Es sah überhaupt nicht wie der Figma-Frame aus.

Wir baten Claude, den Abschnitt zu reparieren, und das funktionierte. Das Ändern der vollen Breite allein reichte jedoch nicht aus, und die innere Inhaltsbreite musste ebenfalls verbreitert werden.

Sie können auch einen Screenshot des Bereichs machen, der behoben werden muss, und Claude bitten, die Breite anzupassen.

Das dritte Problem war kosmetischer Natur. Abgerundete Ecken bei Bildern wurden in unserem Test nicht übernommen. Sie müssen diese selbst nachträglich einstellen.

Das vierte Problem war die Mobile Ansicht, bei der Claude den festen Seitenabstand von 120 Pixeln des Designs übernommen hatte, ohne ihn zu ändern.

Auf einem 390 Pixel breiten Telefon blieben nur 150 Pixel für den Inhalt übrig.

Eine Nachfassnachricht behob die Telefonansicht. Wir baten darum, dass sich der Seitenabstand und die Hero-Überschrift mit dem Bildschirm skalieren, anstatt feste Größen beizubehalten, und es funktionierte.

Bevor Sie veröffentlichen, öffnen Sie den Entwurf auf einem Desktop und auf Ihrem Telefon. Wenn etwas nicht stimmt, beschreiben Sie die Korrektur Claude in einfachen Worten und überprüfen Sie dann beide Ansichten erneut.

Wenn alles richtig aussieht, veröffentlichen Sie die Seite aus dem WordPress-Editor.

Wenn Ihr Design mehrere Seiten oder komplexe Layouts hat, müssen Sie diese Schritte möglicherweise mehrmals wiederholen, um alles richtig zu machen.

Methode 2: Erstellen Sie es in SeedProd

Wenn Sie Ihre Figma-Datei nicht lieber einem Tool übergeben möchten, können Sie das Design direkt in WordPress mit SeedProd, dem besten WordPress-Theme- und Landing-Page-Builder auf dem Markt, neu erstellen.

Die kostenlose Version enthält den Drag-and-Drop-Builder, den diese Methode benötigt, und sie läuft auf über 600.000 Websites.

SeedProd hat keinen Figma-Import. Das bedeutet, dass Sie das Design selbst nachbilden und jedes Element von Anfang an kontrollieren.

Öffnen Sie Ihren Figma-Frame auf einer Seite Ihres Bildschirms und den SeedProd-Builder auf der anderen, ziehen Sie dann Blöcke auf die Leinwand, um sie mit dem übereinzustimmen, was Sie sehen.

Sie können Bilder, Überschriften, Videos, Schaltflächen, Optin-Formulare und Absatzblöcke aus der linken Spalte ziehen.

Wenn Sie auf einen hinzugefügten Block klicken, öffnen sich dessen Einstellungen, wo Sie Schriftgröße, Farbe, Ausrichtung und Abstände an Ihr Design anpassen können.

Wir haben unsere Test-Landingpage auf diese Weise in der kostenlosen Version von SeedProd neu erstellt, und der obige Screenshot zeigt das Ergebnis.

Den vollständigen Prozess finden Sie in unserem Tutorial zum Thema Erstellen einer Landingpage in WordPress.

Wenn Ihr Design recht standardmäßig ist, bietet SeedProd auch einen KI-Website-Builder, der eine ganze Website aus einer kurzen Beschreibung Ihres Unternehmens generieren kann, was Ihnen einen Ausgangspunkt zum Abgleich mit Ihrem Figma-Design gibt.

Sie können bis zu drei Websites kostenlos generieren und jede als Theme-Datei herunterladen. Um das Ergebnis in WordPress zu bearbeiten, benötigen Sie einen SeedProd Pro Plan.

Sie passen dieses Ergebnis dann an Ihr Figma-Design an, anstatt von einer leeren Leinwand aus zu beginnen. Details finden Sie in unserem Leitfaden zum Thema Erstellen einer Website mit KI.

Methode 3: Verwenden Sie ein Figma-zu-WordPress-Konverter-Plugin

Wenn Sie in Figma bleiben und Ihr Design konvertieren möchten, ohne dass die KI den Aufbau übernimmt, ist ein Konverter-Plugin die beste Option.

UiChemy ist das beste Figma-zu-WordPress-Konverter-Plugin, das wir gefunden haben, und es ist auf über 8.000 Websites aktiv.

Was uns an UiChemy am besten gefällt, ist, dass es mit Page Buildern wie Elementor und Bricks funktioniert und nicht nur mit dem Block-Editor. Die meisten Figma-Plugins, die für WordPress entwickelt wurden, geben nur Block-Editor-Code aus.

Um es zu verwenden, installieren Sie zwei Teile: das UiChemy-Plugin auf Ihrer WordPress-Website und das UiChemy-Plugin in Figma. Es benötigt WordPress 6.9 oder neuer, prüfen Sie also, ob Ihre Website diese Anforderung erfüllt, bevor Sie beginnen.

Öffnen Sie in Ihrem WordPress-Dashboard UiChemy und gehen Sie zum Tab „Figma Plugin“.

Wählen Sie unter „Page Builder“ Elementor, Gutenberg oder Bricks aus. Finden Sie dann darunter „Connection Link“ und klicken Sie auf „Copy“.

Dieser Link enthält Ihre Anmeldedaten und ein sicheres Anwendungspasswort. Behandeln Sie ihn wie ein Passwort und behalten Sie ihn für sich.

UiChemy hat ein separates Figma-Plugin für jeden unterstützten Builder, eines für Elementor, Gutenberg und Bricks. Öffnen Sie in Figma das Menü „Tools“, suchen Sie nach UiChemy und führen Sie das Plugin aus, das dem in WordPress ausgewählten Builder entspricht. Die Schritte sind bei allen dreien gleich.

Wenn Sie UiChemy zum ersten Mal verwenden, erstellen Sie ein Konto und folgen Sie dem Einrichtungsassistenten.

Wählen Sie als Nächstes „Quick Conversion“ und wählen Sie Ihre Zielbibliothek, z. B. Kadence, WordPress Core oder Nexter.

Diese stellen Blöcke zur Verfügung, die Sie zum Erstellen von Seiten im WordPress-Editor anstelle separater Page Builder verwenden können. Wählen Sie WordPress Core für die Standardausgabe des Block-Editors oder wählen Sie die Bibliothek, die Ihre Website bereits verwendet.

Wählen Sie dann Ihren Figma-Frame aus und klicken Sie auf „Import“.

Wenn Sie aufgefordert werden, eine Methode zum Exportieren Ihres Designs nach WordPress auszuwählen, wählen Sie unter „Site-Verbindung“ die Option „Weitere Website hinzufügen“.

Fügen Sie den Verbindunglink ein, den Sie aus Ihrem WordPress-Dashboard kopiert haben, und klicken Sie auf „Verbinden“. Ihre Website wird dann in der Liste „Website auswählen“ angezeigt, wenn Sie ein Design konvertieren.

UiChemy zeigt Ihnen nun zwei Importoptionen an.

„Direkter Import“ sendet das gesamte Design als Entwurfsseite an Ihre WordPress-Website, während Sie mit „In die Zwischenablage kopieren“ einen Abschnitt nach dem anderen kopieren und in eine vorhandene Seite einfügen können.

Der kostenlose Plan deckt ein kleines Projekt bequem ab und bietet Ihnen 1.000 Credits pro Monat, einen Figma-Sitz, ein Website-Projekt und fünf Seiten pro Website.

Bezahlte Pläne beginnen bei 8 US-Dollar pro Monat, jährlich abgerechnet, wenn Sie mehr benötigen.

UiChemy benötigt für die einwandfreie Funktion Ihres Designs die Verwendung von „Auto Layout“ und die Einhaltung bestimmter Regeln. Das Konvertieren eines älteren Designs kann bedeuten, dass Sie es zuerst anpassen müssen.

Figma to WordPress Block erledigt eine engere Version derselben Aufgabe. Dieses Figma-Plugin konvertiert einen Frame in Code für den Block-Editor. Die kostenlose Version beschränkt die Anzahl der Frames, die Sie exportieren können, und eine kostenpflichtige Lizenz hebt diese Beschränkung auf.

Sie wählen Ihren Frame aus, öffnen das Menü „Tools“ in der linken Spalte und suchen nach dem Plugin. Wenn Sie es gefunden haben, klicken Sie auf die Schaltfläche „Ausführen“.

Dadurch wird ein Popup geöffnet, in dem Sie auf „In WordPress konvertieren“ klicken und das Ergebnis kopieren können. Fügen Sie es dann in den Block-Editor auf einer beliebigen Seite ein, um Ihr Design als Blöcke zu erhalten.

Methode 4: Beauftragen Sie eine WordPress-Agentur

Für eine vollständige Website oder ein Design mit komplexer Funktionalität ist die Beauftragung eines Entwicklers in der Regel die bessere Wahl.

Figma kümmert sich nur um die Designseite, was bedeutet, dass ein Entwickler alles erstellen muss, was auf Ihrer Website funktionieren soll, wie dynamische Inhalte, benutzerdefinierte Beitragstypen oder einen Checkout-Ablauf.

Eine gute Agentur sorgt auch dafür, dass das Design auf Telefonen und Tablets funktioniert. Sie sollten die fertigen Seiten trotzdem auf Ihrem eigenen Telefon überprüfen, bevor Sie die Arbeit abnehmen.

Sehen Sie sich unsere Liste der besten WordPress-Entwicklungsagenturen an, um eine zu finden, die zu Ihrem Projekt passt.

Figma zu WordPress FAQs

Kann ich mein Figma-Design in eine Website umwandeln?

Ja, Sie können ein Figma-Design in eine funktionierende WordPress-Website umwandeln, und es gibt vier Möglichkeiten, dies zu tun. Sie können die KI es für Sie neu erstellen lassen, es in einem Seitenersteller wie SeedProd neu erstellen, es durch ein Konverter-Plugin laufen lassen oder eine Agentur beauftragen. Die ersten drei erfordern keinerlei Code.

Gibt es ein Figma-Plugin für WordPress?

Es gibt mehrere, und UiChemy und Figma to WordPress Block sind die beiden, auf die wir Sie zuerst hinweisen würden. Figma selbst hat keinen integrierten WordPress-Export, daher benötigen Sie immer eines dieser Tools oder eine Methode wie die oben genannte KI, um ein Design zu übertragen.

Kann KI Figma-Designs in WordPress konvertieren?

Ja, und wir haben es für diese Anleitung mit Claude mit Figmas Connector und dem WPVibe-Plugin getestet.

Es stimmte die Farben, Schriftgrößen und Abstände bei einem einzigen Durchgang des Designs überein, brach aber die Ansicht auf dem Handy, indem es den festen Seitenabstand des Designs unverändert kopierte.

Methode 1 oben enthält das vollständige Konto, einschließlich der Nachricht, die es behoben hat.

Wie konvertiere ich Figma-Designs in Elementor?

UiChemy ist das Werkzeug dafür, da es einen Figma-Frame in ein bearbeitbares Elementor-Layout umwandelt und nicht in flachen Code. Es funktioniert auch mit Bricks und dem Block-Editor, sodass Sie nicht an einen Builder gebunden sind.

Ist WordPress besser als Figma?

Keines von beiden ist besser, da sie unterschiedliche Aufgaben erfüllen. Figma ist, wo Sie gestalten, wie eine Seite aussehen soll, und WordPress ist, was Ihre Website betreibt und sie den Besuchern zur Verfügung stellt.

Die meisten Websites nutzen beides, wobei das Design zuerst in Figma festgelegt und dann in WordPress erstellt wird.

Schadet die Konvertierung von Figma nach WordPress der SEO?

Die Konvertierung eines Figma-Designs in WordPress schadet im Allgemeinen nicht Ihren Inhalten oder Backlinks.

Automatisierte Konvertierungstools können manchmal zusätzlichen Code hinzufügen, den Entwickler als Bloat bezeichnen, und dieser schwerere Code kann Ihre Seite im Vergleich zu einem handcodierten Theme verlangsamen.

Wir empfehlen, nach jeder Konvertierung einen Geschwindigkeitstest durchzuführen, um zu sehen, wo Sie stehen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie man Figma in WordPress konvertiert. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie ganz einfach ein benutzerdefiniertes WordPress-Theme ohne Code erstellen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.