Wie konvertiert man Figma in WordPress? [Kostenlose und kostenpflichtige Möglichkeiten]

Figma ist vor allem als Design- und Kreativitätstool bekannt, während WordPress für seine Flexibilität, Anpassungsfähigkeit und Benutzerfreundlichkeit bekannt ist. Was wäre, wenn Sie das Beste dieser Plattformen kombinieren könnten, um eine beeindruckende Website zu erstellen?

Ja, es ist möglich. Sie können Ihre Website mit Figma entwerfen und sie dann in WordPress konvertieren. Obwohl dies früher eine entmutigende Aufgabe war, die HTML-Verarbeitung und vorinstallierte Themes erforderte, ist die Sache jetzt viel einfacher geworden.

Wenn Sie das Gleiche suchen, sind Sie hier richtig.

In diesem Beitrag zeigen wir Ihnen, wie Sie Figma auf sehr einfache und einsteigerfreundliche Weise in WordPress konvertieren können, ohne dass dafür technisches Fachwissen erforderlich ist.

Option 1: Verwenden Sie ein kostenloses Plugin, um Figma in WordPress zu konvertieren

Obwohl es mehrere Möglichkeiten gibt, Figma in WordPress zu konvertieren, können Sie entweder die kostenlose Methode wählen, das Premium-Konvertierungs-Plugin verwenden oder die manuelle Methode verwenden. (Sie haben ihre Vor- und Nachteile)

Schritt 1: Zunächst sollten Sie ein Figma-Design erstellen, das Sie anschließend in WordPress konvertieren möchten. Sie sollten jedoch niemals vergessen, alle Best Practices und Designprinzipien der Branche zu befolgen.

Schritt 2: Sobald Sie die Figma-Seite erfolgreich erstellt und gestaltet haben, ist es an der Zeit, ihren API-Schlüssel zu generieren. Dieser API-Schlüssel hilft dabei, die Figma-Seite über das Plugin abzurufen und in WordPress einzubetten.

Klicken Sie dazu auf das Figma-Symbol oben links auf dem Bildschirm. Es werden Menüoptionen geöffnet, in denen Sie Hilfe und Konto > Kontoeinstellungen auswählen müssen.

Es öffnet sich eine neue Eingabeaufforderung, in der Sie nach unten zum Abschnitt „Persönliche Zugriffstokens“ scrollen und auf den Link „Neues Token generieren“ klicken müssen.

Darüber hinaus wird eine neue Eingabeaufforderung geöffnet, in der Sie aufgefordert werden, einige grundlegende Details für das von Ihnen erstellte Token anzugeben, z. B. Name und Ablaufdatum.

Hinweis : Wählen Sie im Abschnitt „Ablauf“ immer „ Kein Ablauf “ aus, damit Ihre Figma-Seite nicht nach einem bestimmten Zeitraum von Ihrer Website verschwindet.

Stellen Sie darunter alle Scopes auf „Write“ und klicken Sie auf die Schaltfläche „Token generieren“. Sie werden zum Abschnitt „Persönliches Zugriffstoken“ weitergeleitet, von wo aus Sie das generierte Token einfach kopieren und entweder im Notepad oder in einem beliebigen Editor speichern können.

Schritt 3: Nachdem Sie das Token nun erfolgreich generiert und gespeichert haben, ist es an der Zeit, Ihre Figma-Seite in WordPress zu konvertieren.

Um mit dem Prozess zu beginnen, müssen Sie ein einfaches, aber leistungsstarkes WordPress-Plugin namens „Animation and Design Converter for Gutenberg Block – Advanced Addons“ auf Ihrer WordPress-Site installieren und aktivieren.

Öffnen Sie nach erfolgreicher Installation und Aktivierung die Seite oder den Beitrag Ihrer WordPress-Site, auf der Sie Ihre gestaltete Figma-Seite einbetten möchten.

Klicken Sie auf dieser Seite oder diesem Beitrag oben links auf dem Bildschirm auf die Schaltfläche „ Aus Figma importieren “.

Es öffnet sich eine Eingabeaufforderung, in der Sie aufgefordert werden, das „Figma Access Token“ anzugeben, das Sie zuvor generiert und gespeichert haben. Geben Sie die Figma-Datei-URL ein.

Um die Figma-Datei-URL zu erhalten, gehen Sie zurück zu Ihrer Figma-Datei, kopieren Sie die URL im Browser-Tab unten und fügen Sie sie in das Feld „Figma-Datei-URL“ ein.

Im Übrigen erledigt das Plugin seine Arbeit und wandelt die Figma-Datei in WordPress-Blöcke um. Danach können Sie im Blockbereich beliebig viele Anpassungen vornehmen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Einstellungen zu speichern.

Option 2: Verwenden Sie ein kostenpflichtiges Plugin, um Figma in WordPress zu konvertieren (effizienter und problemloser)

Für diese Methode verwenden wir ein beliebteres und effizienteres Konvertierungs-Plugin, „Uichemy“. Dieses Plugin bietet einen sehr problemlosen und unkomplizierten Workflow, der den Konvertierungsprozess reibungslos gestaltet. Es eignet sich am besten für Anfänger ohne Programmierkenntnisse sowie für Entwickler, die ihren Prozess beschleunigen möchten.

Derzeit kann dieses Plugin nur Figma-Designs in Elementor- und Bricks-Website-Editoren konvertieren, aber das Unternehmen hat versprochen, in Zukunft Unterstützung für Gutenberg-Blöcke bereitzustellen.

Schritt 1: Öffnen Sie Ihr Figma-Design und installieren Sie das Uichemy-Plugin im Figma-Dashboard, um den Konvertierungsprozess zu starten.

• Suchen Sie dazu in der Suchleiste nach „ UiChemy “ und finden Sie das UiChemy-Plugin.

Klicken Sie auf die Schaltfläche „Los geht’s“ und befolgen Sie die Anweisungen zur Installation und Aktivierung.

• Geben Sie Ihren Serienschlüssel ein, um die Aktivierung abzuschließen. (Für den Serienschlüssel erstellen Sie ein kostenloses Konto, indem Sie auf die Schaltfläche „Kostenlos starten“ klicken. Nach der Erstellung Ihres Kontos finden Sie Ihren Lizenzschlüssel im Dashboard Ihres Posimyth Store-Kontos.)

Schritt 2: Wählen Sie nach erfolgreicher Aktivierung das Figma-Design oder Frame aus, das Sie in WordPress konvertieren möchten, und klicken Sie im Popup-Fenster auf die Schaltfläche „ In Elementor konvertieren “.

(Stellen Sie sicher, dass Sie das Elementor-Plugin vor dem Konvertierungsprozess auf Ihrer WordPress-Site installiert und aktiviert haben und lesen Sie auch alle Bedingungen, bevor Sie Ihr Figma-Design konvertieren.)

Schritt 3: Sie können jetzt eine Vorschau Ihres Designs anzeigen, indem Sie die URL und den Token-Schlüssel Ihrer Website eingeben. Wenn Sie das nicht möchten, klicken Sie einfach direkt auf die Schaltfläche „In Elemetor konvertieren“. (Eine Anleitung zum Generieren Ihres Token-Schlüssels und Ihrer Website-URL finden Sie im Tutorial von UiChemy zu „Was ist Live-Vorschau“.)

Schritt 3: Ihr Design wird konvertiert und die JSON-Datei heruntergeladen.

Öffnen Sie nun Ihr WordPress-Admin-Dashboard > Gehen Sie zu Vorlagen > Gespeicherte Vorlagen.

Klicken Sie nun oben auf der Seite auf die Schaltfläche „ Vorlagen importieren “ und laden Sie die JSON-Datei hoch.

Schritt 4: Herzlichen Glückwunsch! Ihr Figma-Design wird nun im Abschnitt „Gespeicherte Vorlagen“ angezeigt, wo Sie es öffnen und weitere Bearbeitungen oder Anpassungen vornehmen können.

Schritt 5: Nachdem Sie die Anpassungen oder Bearbeitungen abgeschlossen haben, sehen Sie sich Ihr Design im Frontend an. Stellen Sie sicher, dass alle Bilder und Schaltflächen richtig ausgerichtet sind und ordnungsgemäß funktionieren. Überprüfen Sie außerdem, ob das Design auf allen Bildschirmgrößen reagiert.

Option 3: Figma manuell in WordPress konvertieren (für Entwickler)

Diese Methode ist recht technisch und erfordert daher gute Kenntnisse des WordPress-CMS und wenig Geduld. Daher ist sie am besten für diejenigen geeignet, die gerne programmieren.

Schritt 1: Der erste Schritt besteht darin, alle Designteile wie Symbole und Bilder aus Figma zu exportieren. Öffnen Sie dazu Ihr Figma Design und wählen Sie aus, was Sie exportieren möchten. Klicken Sie nun auf die Schaltfläche „Exportieren“ und wählen Sie das richtige Format und die richtige Auflösung aus.

Hinweis: Es wird dringend empfohlen, beim Exportieren von Bildern PNG oder JPG zu wählen und für Symbole und Vektoren SVG zu wählen, um die Qualität beizubehalten. Seien Sie auch beim Exportieren Ihrer Dateien vorsichtig und stellen Sie sicher, dass sie im richtigen Format vorliegen, da dies sonst das Erscheinungsbild Ihrer Website erheblich beeinträchtigen wird.

Schritt 2: Jetzt müssen wir ein benutzerdefiniertes WordPress-Theme erstellen, um alle Figma-Designs in eine WordPress-Site zu konvertieren. Das liegt daran, dass ein WordPress-Theme das Erscheinungsbild und die Funktionsweise Ihrer Website steuert.

Eine typische WordPress-Themedatei besteht aus PHP-Code, JavaScript-Dateien und CSS-Stylesheet-Dateien.

• Erstellen Sie in WordPress einen neuen Ordner für Ihr Theme im Verzeichnis wp-content/themes und benennen Sie es nach Ihrer Wahl. (Sie können auf diese Dateien entweder über Cpanel, WordPress Editor oder FTP-Clients zugreifen.) Oder schauen Sie sich unseren speziellen Blog zum Thema „Wie installiere ich ein WordPress-Theme an?“ an.

Wenn Sie ein WPOven-Benutzer sind, können Sie auf die WordPress-Datei zugreifen, indem Sie diesem Tutorial folgen. „Neuer Dateimanager zur einfachen Verwaltung der Dateien und Ordner Ihrer Site.“

Fügen Sie nun Dateien wie index.php, header.php, footer.php und Functions.php hinzu. (Lassen Sie diese Dateien vorerst leer.) Fügen Sie außerdem die Datei style.css hinzu, um das CSS-Stylesheet Ihres Themes im selben Ordner einzurichten.

(Diese spezielle style.css-Datei ist für die Anzeige aller Farben, Schriftarten, Rahmen, Ränder und anderer visueller Elemente der Website verantwortlich.)

Fügen Sie nun den folgenden Header-Kommentar zu Ihrer style.css-Datei hinzu, wie unten angegeben:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Hier müssen Sie den Theme-Namen Ihres benutzerdefinierten WordPress-Themes und Ihren Autor angeben. Dies wird WordPress dabei helfen, Ihr benutzerdefiniertes Theme zu identifizieren.

Vergessen Sie auch nicht, ein Bild für Ihr WordPress-Theme hinzuzufügen, damit es im WordPress-Verzeichnis leicht erkennbar ist, genau wie ein YouTube-Thumbnail.

Die bevorzugte Größe sollte 800 x 600 Pixel betragen und im PNG-Format vorliegen. Benennen Sie alles, was Sie möchten, und fügen Sie es dem Themenordner hinzu.

Schritt 3: Jetzt müssen wir alle Ihre exportierten Figma-Assets in Ihrem benutzerdefinierten Themenordner hinzufügen.

Tipp: Wenn Ihre Website komplex ist, ist es besser, alle Ihre Assets in einem bestimmten Unterordner zu verwalten, so wie wir es im Bild unten gezeigt haben:

Schritt 4: Um Ihr WordPress-Theme vollständig funktionsfähig zu machen, müssen Sie den Theme-Dateien HTML, CSS und JavaScript hinzufügen.

Lassen Sie uns sehen, wie Sie dies tun können,

Zuerst müssen Sie Ihre Figma-Mockups in Code konvertieren, und dafür benötigen Sie ein Code-Editor-Tool.

Beginnen Sie mit dem Einrichten einer HTML-Struktur mit Elementen wie Kopf- und Fußzeilen, Navigationsleisten und Abschnitten. Fügen Sie Ihre Codes zu den PHP-Dateien hinzu (index.php, header.php und footer.php).

Verwenden Sie jetzt CSS, um Ihre HTML-Elemente zu formatieren. Fügen Sie Ihre Stile in der Datei „style.css“ hinzu und legen Sie Farben, Schriftarten, Größen und andere Designaspekte fest.

• Für ein besseres Styling können Sie Folgendes verwenden:
  • CSS-Präprozessoren wie SASS oder LESS
  • Frameworks wie Bootstrap oder Tailwind
  • Ein WordPress-Starter-Theme
• Für komplexe Designs müssen Sie nicht Ihr gesamtes CSS in einer einzigen Datei zusammenfassen, sondern auf eine besser organisierte Art und Weise. Sie können separate CSS-Dateien für verschiedene Teile im Assets-Ordner hinzufügen, um die Verwaltung und Fehlerbehebung in Zukunft zu vereinfachen.

Finden Sie schließlich für Javascript heraus, welche Elemente interaktiv sein müssen, z. B. Dropdown-Menüs, Schieberegler usw.)

Erwägen Sie die Verwendung von jQuery, um Aufgaben wie AJAX-Aufrufe und DOM-Manipulation zu vereinfachen und Ihre CSS- (Stylesheets) und JavaScript-Dateien (Skripte) mithilfe der Datei functions.php ordnungsgemäß in Ihr WordPress-Theme zu laden.

Schritt 5: Jetzt kommt der Testteil. Nachdem Sie alle oben genannten Schritte erfolgreich durchlaufen haben, speichern Sie Ihre Dateien und prüfen Sie, ob alles gut funktioniert. Zuvor müssen wir jedoch das Plugin aktivieren.

Um das Plugin zu aktivieren, gehen Sie zu Ihrem WordPress-Dashboard > Aussehen > Themen . Ihr benutzerdefiniertes Design wird mit dem Bild angezeigt, das Sie zuvor im Designordner hochgeladen haben. Klicken Sie darauf, um es zu aktivieren und schon ist Ihre WordPress-Site zum Testen bereit.

Hier sind einige der Testvorschläge, denen Sie folgen können:

• Überprüfen Sie, wie Ihre Website in verschiedenen Browsern und Bildschirmgrößen aussieht und funktioniert.
• Verwenden Sie Tools, um Ihre Bilder für ein schnelleres Laden zu optimieren.
• Implementieren Sie Caching, um Ihre Website zu beschleunigen.
• Erstellen Sie ein Backup Ihrer Website, bevor Sie sie live schalten.

Zusammenfassung

Die Konvertierung von Figma zu WordPress ist je nach Komplexität der Website nicht so einfach, wie es scheint. Je komplexer das Design, desto komplexer ist der Prozess, dem Sie folgen müssen. Wir haben versucht, alle Optionen für alle Benutzertypen abzudecken.

Wenn Sie dies manuell tun, haben Sie möglicherweise mehr Kontrolle, es kostet jedoch viel Zeit und Mühe. Sie können zwar Plugins verwenden, um den Konvertierungsprozess zu beschleunigen, müssen jedoch möglicherweise dennoch bestimmte Änderungen vornehmen, um bessere Ergebnisse zu erzielen.

Es hängt ganz von Ihren Vorlieben und Ihrer Verständlichkeit ab, für welche Methode Sie sich entscheiden.

Rahul

Rahul Kumar ist ein Web-Enthusiast und Content-Stratege, der sich auf WordPress und Webhosting spezialisiert hat. Mit jahrelanger Erfahrung und seinem Engagement, über Branchentrends auf dem Laufenden zu bleiben, entwickelt er effektive Online-Strategien, die den Traffic steigern, das Engagement steigern und die Conversions steigern. Rahuls Liebe zum Detail und seine Fähigkeit, überzeugende Inhalte zu erstellen, machen ihn zu einer wertvollen Bereicherung für jede Marke, die ihre Online-Präsenz verbessern möchte.