Was kostet die Umsetzung von Figma zu WordPress?
Die Kosten für Figma zu WordPress liegen auf Fiverr Pro meist bei 140-281 € für eine Landingpage und 281-1.122 € für eine Website mit 3-10 Seiten, die mit Elementor oder dem Block-Editor umgesetzt wird. Ein individuell programmiertes Theme mit dynamischen Inhalten, etwa Verzeichniseinträgen oder einem Shop, beginnt oft bei rund 1.403 €.
Das Design ist abgenommen und bezahlt. Dann ist die Website fertig: mit einem zu engen Layout auf dem Handy, anderen Schriften und Überschriften, die du nur über eine Nachricht an den Entwickler ändern kannst.
Hier liest du, wie du deine Figma-Datei für ein klares Angebot vorbereitest und prüfst, ob die Umsetzung zum Design passt, bevor du sie abnimmst.
Preisspannen
Zum Zeitpunkt des Schreibens sind das die üblichen Preise auf Fiverr Pro je nach Umfang:
| Auftrag | Üblicher Preis auf Fiverr Pro | Was meist enthalten ist |
|---|---|---|
| Eine Landingpage | 140-281 € | Eine lange Seite, Layouts für Desktop und Handy, ein Kontaktformular, 1-2 Überarbeitungen |
| Kleine Website, 3-5 Seiten | 281-561 € | Startseite, Über mich, Leistungen, Kontakt, gemeinsamer Header und Footer |
| Komplette Website, 6-10 Seiten | 561-1.122 € | Vorlagen für Blog und einzelne Beiträge, Formulare mit E-Mail-Anbindung, deine Inhalte eingepflegt |
| Individuelles Theme oder dynamische Inhalte | 1.403-3.273+ € | Ein von Hand programmiertes Theme, individuelle Felder, Verzeichnis- oder Shopseiten nach dem Design |
Fiverr berechnet beim Bezahlen eine zusätzliche Servicegebühr. Frag nach, wie der Verkäufer Seiten zählt: Manche zählen jedes unterschiedliche Layout. Dann können zehn Seiten mit demselben Design weniger kosten als fünf mit jeweils eigenem Design.
Was du für welchen Preis wirklich bekommst
140-281 €: eine Landingpage
Der Verkäufer baut eine Seite aus deinen Figma-Frames nach, meist in Elementor, und sorgt dafür, dass sie auf dem Handy funktioniert. Das passt für einen Produktstart oder eine Werbekampagne. Prüf, ob Formular, Schriften und Animationen dabei sind.
281-561 €: eine kleine Website
Drei bis fünf Seiten mit gemeinsamem Header, Footer und Menü. Mit global festgelegten Farben und Schriften sehen auch später hinzugefügte Seiten einheitlich aus. Die Inhalte pflegst du meist selbst ein, außer im Gig steht etwas anderes.
561-1.122 €: eine komplette Website
Sechs bis zehn Seiten, dazu Vorlagen für Blogbeiträge und Archive, damit neue Beiträge zum Design passen. Bitte darum, dass deine Inhalte eingepflegt und die Formulare mit dem richtigen Postfach verbunden werden.
1.403 € und mehr: ein individuelles Theme oder dynamische Inhalte
Hier programmiert der Entwickler entweder ein Theme von Hand oder baut Inhaltstypen, die du im Admin-Bereich ausfüllst, etwa Teammitglieder, Projekte oder Immobilienangebote. Das kostet mehr, aber die Seite enthält nur den Code, den das Design braucht, und das Layout lässt sich sperren, sodass Redakteure Inhalte ändern, nicht die Struktur. Auch ein in Figma gestalteter Shop fällt in diese Preisklasse. Falls später Probleme beim Bezahlen auftreten, erfährst du hier, wie du einen WooCommerce-Entwickler beauftragst.
Was beim günstigen Preis meist fehlt
Das Basic-Paket hat den kleinsten Leistungsumfang, den ein Verkäufer anbietet. Oft fehlen darin:
- ein Tablet-Layout oder ein Handy-Layout, das du nicht gestaltet hast
- Hover-Zustände, Menüs und Fehlermeldungen in Formularen
- Text, den du bearbeiten kannst, statt Text, der in Bildern steckt
- Plugin-Lizenzen auf deinen Namen
- das Einpflegen deiner echten Inhalte
- ein einfacher Geschwindigkeitstest nach der Umsetzung
Was die Kosten für Figma zu WordPress in die Höhe treibt
Die Zahl der unterschiedlichen Layouts ist wichtiger als die Zahl der Seiten.
- Unterschiedliche Vorlagen Seiten, die dasselbe Layout nutzen, kosten deutlich weniger als getrennte Designs.
- Fehlende Handy-Frames Gibt es nur ein Desktop-Design, muss der Verkäufer die mobile Version während der Umsetzung selbst entwerfen.
- Eine unaufgeräumte Figma-Datei Bei uneinheitlichen Abständen und Ebenen ohne Auto-Layout oder gemeinsame Stile dauert es länger, die Datei zu verstehen.
- Animationen Scroll-Effekte, Slider und eigene Interaktionen kosten oft extra.
- Dynamische Inhalte Ein Portfolio, eine Teamseite oder Einträge, die du im Admin-Bereich ausfüllst, brauchen eigene Vorlagen, oft mit individuellen Feldern.
- Ein Shop oder mehrere Sprachen WooCommerce-Seiten und übersetzte Versionen erfordern zusätzliche Vorlagen und Tests.
Zähl die unterschiedlichen Layouts, bevor du Angebote einholst.
Elementor, Block‑Editor oder individuelles Theme?
Die Bauweise beeinflusst den Preis und wie du die Seite später bearbeitest.
| Bauweise | Üblicher Preis | Spätere Bearbeitung | Worauf du achten solltest |
|---|---|---|---|
| Elementor oder ein anderer Page Builder | Am niedrigsten | Für dich einfach per Drag-and-drop zu bearbeiten | Mehr Daten pro Seite; die Lizenz für Elementor Pro wird jährlich bezahlt |
| Block-Editor (Block-Theme) | Niedrig bis mittel | In WordPress eingebaut, keine zusätzliche Lizenz | Weniger Anbieter; die Umsetzung komplexer Designs dauert länger |
| Individuelles Theme mit individuellen Feldern | Am höchsten | Du füllst Felder aus, das Layout bleibt fest | Für Layout-Änderungen brauchst du einen Entwickler |
Bei den meisten Gigs auf Fiverr wird die Website mit Elementor umgesetzt. Elementor Pro kostet zum Zeitpunkt des Schreibens ab etwa 60 $ im Jahr für eine Website, und mit einer Lizenz in deinem eigenen Elementor-Konto bekommst du weiter Updates, auch wenn die Zusammenarbeit mit dem Verkäufer längst beendet ist.
Für eine Seite, die wachsen soll, frag nach einem Block-Theme oder einem individuellen Theme. Wenn du vor allem Texte und Bilder ändern willst, ist ein Page Builder der einfachere Weg. Schau dir meine Empfehlungen für Page Builder an.
Was du selbst tun kannst
Am günstigsten ist die Vorarbeit, die du selbst vor der Bestellung erledigst.
- Gestalte die Handy-Version. Leg für jedes unterschiedliche Layout einen Frame fürs Handy an. Verkäufer verlangen weniger, wenn sie nicht raten müssen.
- Räum die Figma-Datei auf. Nutz Auto-Layout, benenne die Seiten und leg gemeinsame Farb- und Textstile an.
- Prüf die Schriften. Google Fonts sind für Websites kostenlos. Eine kostenpflichtige Schrift braucht eine Weblizenz, und die kaufst du, nicht der Verkäufer.
- Markier, was du bearbeiten willst. Notier, welche Texte, Bilder und Abschnitte du später selbst ändern möchtest.
Es gibt auch Plugins, die einen Figma-Frame in Elementor-Abschnitte umwandeln. Bei einer einfachen Landingpage können sie Zeit sparen, aber meist musst du die mobile Darstellung und die Abstände nachbessern.
Hat dein Design mehr als ein paar unterschiedliche Layouts, dynamische Inhalte oder einen Shop, hör hier auf und vergib einen klar abgegrenzten Auftrag.
Lohnt es sich, für die Umsetzung von Figma zu WordPress zu bezahlen?
Wenn du schon für ein eigenes Design bezahlt hast, ja. Die Umsetzung kostet meist weniger als das Design selbst, und eine gute Umsetzung erhält den Look, für den du bezahlt hast, auf jeder Bildschirmgröße.
Hast du noch kein Design, kann ein fertiges Theme oder eine Startvorlage unter 100 $ kosten. Ein Entwickler kann es an deine Marke anpassen. Ein eigenes Figma-Design lohnt sich bei einem ungewöhnlichen Layout oder wenn ein fertiges Theme dir ständig im Weg steht.
Ein höheres Budget brauchst du für ein individuelles Theme mit Inhaltstypen, einen Shop oder eine Website, die mehrere Leute über Jahre bearbeiten.
So bekommst du ein ehrliches Angebot
Schick diese Angaben in deiner ersten Nachricht:
- Figma-Link Gib die Datei zum Ansehen frei. Ein kostenloses Figma-Konto reicht dem Verkäufer, um auszumessen und Bilder zu exportieren.
- Unterschiedliche Layouts Liste sie auf und schreib dazu, welche Seiten welches Layout nutzen.
- Bildschirmgrößen Sag, ob es Designs für Desktop, Tablet und Handy gibt.
- Bauweise Sag, ob du Elementor, den Block-Editor oder ein individuelles Theme willst, oder frag, was der Verkäufer empfiehlt und warum.
- Inhalte Schreib, wer Texte und Bilder einpflegt und wie viele Beiträge oder Produkte dazukommen.
- Formulare und Funktionen Nenn das Zielpostfach für jedes Formular und liste alle Buchungs-, Newsletter- oder Shopfunktionen auf.
- Hosting Sag, wo die Website gehostet wird und ob es eine Staging-Kopie gibt.
Bitte um einen Festpreis pro Layout oder für alle aufgelisteten Leistungen. Vereinbare mit dem Verkäufer, was „passt zum Design“ bedeutet: dieselben Schriften, Farben und Abstände bei den Bildschirmgrößen, die du gestaltet hast.
Warnsignale beim Preis
- ein Angebot, ohne dass deine Figma-Datei geöffnet wurde
- zehn unterschiedlich gestaltete Seiten, „pixel perfect“, an einem Tag
- Elementor Pro oder ein kostenpflichtiges Plugin „kostenlos“, ohne zugehörigen Lizenzschlüssel
- das Angebot, die Seite auf dem eigenen Hosting des Verkäufers zu bauen
- die Bitte, außerhalb von Fiverr zu bezahlen
Sicher beauftragen
Für eine Umsetzung von Figma zu WordPress empfehle ich Fiverr Pro. Fiverr prüft bei Pro-Freelancern persönlich die Erfahrung, das Portfolio und die bisherige Arbeit, bevor sie das Pro-Abzeichen bekommen. Ich arbeite selbst auf Fiverr und weiß daher, wie Bestellungen, Zahlungen und Bewertungen dort laufen. Frag bei einem größeren Projekt, ob du den Gig mit Meilensteinen buchen kannst. Dann zahlst du Seite für Seite.
Behalte Hosting, Domain und jede Lizenz auf deinen eigenen Namen.
Leg für den Verkäufer einen separaten WordPress-Benutzer an und, falls er Zugriff auf Dateien braucht, einen separaten SFTP-Benutzer. Ist die Seite schon online, mach zuerst selbst ein Backup und bitte darum, die Website auf einer Staging-Kopie umzusetzen.
Fiverr gibt dir drei Tage, um eine Lieferung zu prüfen, und bei jedem Meilenstein etwas länger. Vergleich jede Seite am Computer und am Handy mit ihrem Figma-Frame. Ändere selbst eine Überschrift, teste jedes Formular und prüf die Startseite mit PageSpeed Insights von Google. Bitte vor der Abnahme über Fiverr um Änderungen, lösch danach die Benutzer des Verkäufers und ändere alle Passwörter, die du weitergegeben hast.
Zusammenfassung
Die Kosten für Figma zu WordPress hängen davon ab, wie viele unterschiedliche Layouts du hast, ob die Handy-Version gestaltet ist und wie die Seite gebaut wird. Eine günstige Umsetzung ohne Handy-Layouts oder Lizenzen auf deinen Namen führt später oft zu höheren Kosten für Nachbesserungen. Bereite die Datei vor, zähl die Layouts und fang mit einer Seite an, um zu sehen, wie der Verkäufer arbeitet.
Häufige Fragen
Kann ich Figma automatisch in WordPress umwandeln?
Teilweise. Konverter-Plugins können einen Figma-Frame in Abschnitte für Elementor oder den Block-Editor umwandeln. Das hilft bei einer einfachen Landingpage. Meist musst du aber die mobilen Layouts, Abstände und Formulare nachbessern. Deshalb brauchen die meisten Websites mit mehreren Seiten trotzdem einen Entwickler.
Brauche ich Elementor Pro für eine Umsetzung aus Figma?
Nicht immer. Viele Designs lassen sich mit der kostenlosen Version von Elementor oder dem Block-Editor umsetzen. Elementor Pro bietet zusätzlich Theme-Vorlagen, Formulare und Pop-ups. Deshalb nutzen es viele Verkäufer. Verkäufer können ihre eigene Pro-Lizenz verwenden. Dann bekommst du aber nur Updates, solange der Verkäufer die Lizenz verlängert. Eine Lizenz auf deinen Namen ist sicherer.
Wie lange dauert eine Umsetzung von Figma zu WordPress?
Die Umsetzung einer Landingpage dauert auf Fiverr oft 2-5 Tage. Eine Website mit 5-10 Seiten braucht meist ein bis zwei Wochen. Bei einem individuellen Theme können es mehrere Wochen sein. Verzögerungen entstehen meist, wenn mobile Frames, Inhalte oder Rückmeldungen fehlen.
Was ist, wenn mein Design nur Desktop-Ansichten enthält?
Dann entwirft der Verkäufer das mobile Layout während der Umsetzung selbst. Das kostet zusätzlich, und er muss Annahmen treffen. Du kannst deinen Designer zuerst um Frames fürs Handy bitten oder mit dem Verkäufer absprechen, wie sich Menüs, Tabellen und breite Abschnitte auf dem Handy verhalten sollen.
Ist eine Pixel-perfect-Umsetzung realistisch?
Nahezu, bei den Bildschirmgrößen, für die dein Design gedacht ist. Browser stellen Schriften leicht unterschiedlich dar. Bei Bildschirmgrößen zwischen den entworfenen Ansichten wird die Website nie genau einem Frame entsprechen. Vereinbare mit dem Verkäufer, dass Schriften, Farben, Abstände und Layout bei den vorgesehenen Desktop- und Handybreiten mit dem Design übereinstimmen.
Kann ich die Seite danach selbst bearbeiten?
Ja, wenn du das vor der Umsetzung ansprichst. Mit Elementor oder dem Block-Editor kannst du Texte und Bilder auf der Seite bearbeiten. Bei einem individuellen Theme mit individuellen Feldern füllst du die Felder aus. Für Änderungen am Layout brauchst du einen Entwickler.