Framer vs. Figma Sites: Welches ist das bessere Tool für den Webseitenbau?

Du starrst auf zwei Browser-Tabs. In einem ist Framer geöffnet, im anderen Figma Sites. Beide versprechen, deine Designs ohne Code in echte Websites zu verwandeln. Beide wirken professionell. Und beide haben treue Communities auf Reddit und Quora, die überzeugt sind, dass ihre Plattform die bessere Wahl ist.

Doch welche lohnt sich wirklich – Framer oder Figma Sites?

Framer macht den Website-Bau bereits seit einigen Jahren sowohl für technische als auch für nicht-technische Nutzer zugänglich. Figma ist erst im vergangenen Jahr mit Figma Sites in den Markt eingestiegen und hat damit den direkten Wettbewerb eröffnet. Sowohl Framer als auch Figma Sites ermöglichen es dir, Websites zu gestalten und zu veröffentlichen. Dennoch gibt es entscheidende Unterschiede, die du berücksichtigen solltest, bevor du Zeit und Geld in eines der beiden Tools investierst.

In diesem Artikel vergleichen wir die technischen Unterschiede, die Preise und die wichtigsten Funktionen beider Plattformen. Außerdem zeigen wir dir, in welchen Bereichen jede Lösung ihre Stärken hat und geben dir am Ende einen klaren Entscheidungsrahmen an die Hand.

Keine unnötigen Umwege – nur die Informationen, die du brauchst, um die richtige Entscheidung für dein Projekt zu treffen.

Also, legen wir los!

‍

„Ich habe etwa 6 Monate damit verbracht, beide Tools in echten Projekten zu testen – Seiten aufzubauen, das CMS zu durchforsten, SEO und Animationen zu prüfen. Das Ergebnis war eindeutig.“

Maximilian Fleitmann

Co-founder @ magier

‍

TL;DR: Framer vs. Figma Sites

Wenn Du wenig Zeit hast, hier ist der Schnellvergleich:

‍

Hier ist das Kurzfazit von Team Magier: Wenn deine Website bei Google ranken, schnell laden oder zahlenden Kunden präsentiert werden muss, ist Framer in der Regel die sicherere Wahl. Wenn du hingegen eine Idee intern testen möchtest und dein Team bereits für Figma-Lizenzen bezahlt, kann Figma Sites dafür völlig ausreichen.

Bevor wir die beiden Plattformen im Detail vergleichen, lohnt es sich zu verstehen, wofür sie eigentlich entwickelt wurden. Viele verwechseln Figma, das Design-Tool, mit Figma Sites, der neuen Funktion zur Veröffentlichung von Websites. Beide gehören zwar zusammen, erfüllen aber unterschiedliche Aufgaben. Ebenso werden häufig die Design- und Website-Funktionen von Framer miteinander vermischt.

Im nächsten Abschnitt klären wir genau, worin die Unterschiede bestehen.

Was ist Framer?

Framer ist ein No-Code-Website-Builder und eine visuelle Entwicklungsplattform, mit der du produktionsreife Websites gestalten und veröffentlichen kannst – ganz ohne Code. Es begann 2014 als Prototyping-Tool, ist aber heute eine vollwertige Produktionsplattform, die von Start-ups, Agenturen und Unternehmensteams genutzt wird.

Wie Framer funktioniert

Du gestaltest deine Website direkt auf einer visuellen Arbeitsfläche, die sich ähnlich anfühlt wie Figma oder Sketch. Du kannst Elemente per Drag-and-drop platzieren, Abstände anpassen, Farben festlegen und Bilder hinzufügen.

Framer bietet außerdem KI-gestützte Funktionen, die Layouts generieren, Texte umschreiben und Designvarianten vorschlagen können. Dadurch zählt die Plattform mittlerweile zu den führenden KI-Website-Buildern.

Unter der Haube setzt Framer auf React, das JavaScript-Framework hinter Websites und Anwendungen wie Netflix, Airbnb und Instagram. Wenn Framer dein Design in React-Komponenten umwandelt, basiert deine Website auf derselben Technologie, die auch viele der weltweit größten Tech-Unternehmen einsetzen.

Was passiert, wenn du auf „Veröffentlichen“ klickst

Wenn du auf „Veröffentlichen“ klickst, erhält deine Website serverseitiges Rendering (SSR). Das bedeutet, dass die Server von Framer jede Seite als vollständiges HTML vorab erstellen, bevor sie an Besucher gesendet wird. Suchmaschinen-Crawler sehen vollständig gerenderte Seiten anstelle von leeren Hüllen, die JavaScript zum Laden benötigen. Das ist ein großer Vorteil für SEO.

Deine Website erhält außerdem:

• Ein globales CDN, das Seiten von über 300 Standorten weltweit bereitstellt
• Automatische Bildoptimierung, die Bilder in das WebP-Format konvertiert und responsive Größen bereitstellt
• Das HTTP/3-Protokoll für schnelleres Laden
• SSL-Zertifikate inklusive
• Staging-Umgebungen, um Änderungen vor der Veröffentlichung zu testen

Wer Framer nutzt

Framer eignet sich hervorragend für Teams, die produktionsreife Websites benötigen, ohne den Mehraufwand traditioneller Entwicklung. Die Plattform umfasst ein integriertes CMS, Formularverwaltung, Analysen und Integrationen mit Tools wie HubSpot, Mailchimp und Google Analytics.

Startups und SaaS-Unternehmen

Startups müssen schnell starten, häufig iterieren und vom ersten Tag an professionell wirken. Framer ermöglicht es kleinen Teams, ausgefeilte Marketing-Websites zu veröffentlichen, ohne Entwickler einstellen zu müssen.

• Erstelle SaaS-Produktseiten, Feature-Ankündigungen und Preisseiten, die sich mit der Entwicklung deines Produkts aktualisieren.
• Starte Landingpages für neue Funktionen oder Kampagnen in Stunden statt Wochen.

Designagenturen und Freiberufler

Agenturen nutzen Framer für Kundenprojekte, da das Ergebnis produktionsreif ist und die Übergabe einfach. Kunden erhalten eine Website, die sie selbst aktualisieren können.

• Liefere komplette Kunden-Websites mit CMS-Zugang, damit Kunden ihre eigenen Inhalte verwalten können.
• Erstelle White-Label-Websites für mehrere Kunden mithilfe der Team- und Projektmanagementfunktionen von Framer.

Marketingteams

Marketingteams, die es leid sind, auf Entwickler-Support zu warten, können ihre Webpräsenz selbst in die Hand nehmen. Framer ermöglicht es ihnen, Kampagnen zu veröffentlichen, Texte zu aktualisieren und Experimente eigenständig durchzuführen.

• Erstelle Kampagnen-Landingpages, A/B-Testvarianten und Event-Microsites ohne Engineering-Tickets.
• Veröffentliche Blog-Inhalte und Ressourcen mithilfe des integrierten CMS von Framer mit Kategorien, Tags und Autorenseiten.

Portfolio-Ersteller und persönliche Marken

Designer, Entwickler und Kreative nutzen Framer, um ihre Arbeiten mit einer Eleganz und Interaktivität zu präsentieren, die vorlagenbasierte Builder nicht erreichen können.

• Erstelle herausragende Portfolio-Websites mit benutzerdefinierten Animationen, Scrolleffekten und Mikrointeraktionen.
• Erstelle persönliche Marken-Websites, die deine Designsensibilität widerspiegeln und nicht eine generische Vorlage.

Marketingteams von Großunternehmen

Größere Organisationen nutzen Framer für spezifische Marketing-Assets, während ihre Hauptwebsite auf Enterprise-CMS-Plattformen bleibt.

• Starte produktspezifische Microsites, regionale Landingpages oder Akquisitions-Brand-Sites.
• Erstelle lokalisierte Versionen von Marketingseiten mit der Mehrsprachigkeitsunterstützung von Framer.

‍

Was ist Figma Sites?

Figma ist seit über einem Jahrzehnt das branchenübliche Design-Tool für Produktteams. Unternehmen wie Spotify, Uber und Dropbox nutzen es täglich für UI-Mockups, Wireframes, Prototypen und Designsysteme. Doch Figma hatte immer eine Lücke: Designer erstellen wunderschöne Mockups und übergeben sie dann an Entwickler, die alles in Code neu aufbauen. Diese Übergabe kostet Zeit, führt zu Missverständnissen und resultiert oft in Websites, die leicht von den ursprünglichen Designs abweichen.

Figma Sites ist Figmas Antwort auf dieses Problem. Es ist im Wesentlichen ein Design-to-Code-Tool, das in das Figma-Ökosystem integriert ist. In der Beta-Phase auf der Config 2025 eingeführt, ermöglicht es Designern, die Übergabe komplett zu überspringen und direkt vom Figma-Canvas auf eine Live-URL zu veröffentlichen. Wähle deine Frames aus, konfiguriere einige Einstellungen, und Figma generiert eine funktionale Webseite. Wenn Du bereits in Figma designst, kannst du diese Designs jetzt als Live-Websites veröffentlichen, ohne die App zu verlassen. Kein Exportieren, kein Warten auf die Entwicklerübergabe oder Neuaufbau erforderlich.

So funktioniert Figma Sites

Figma Sites übersetzt Ihre Auto Layout-Strukturen in CSS für den Browser. Auto Layout ist Figmas System zur Erstellung responsiver Designs mit automatischer Abstands- und Ausrichtungskontrolle. Beim Veröffentlichen wandelt Figma diese Layout-Regeln in Webcode um.

Dies unterscheidet sich von Framers Ansatz. Framer wurde von Anfang an speziell für die Web-Ausgabe entwickelt. Figma Sites fügt einem Tool, das ursprünglich für die Design-Kollaboration entwickelt wurde, die Web-Veröffentlichung hinzu.

Was Du für die Nutzung von Figma Sites benötigst

Du benötigst einen kostenpflichtigen Figma-Platz. Der Professional-Plan beginnt bei 15 $ pro Editor und Monat (jährlich abgerechnet). Mit dem kostenlosen Plan kannst du keine Websites veröffentlichen. Die SEO-Kontrollen von Figma Sites sind während der Beta-Phase eingeschränkt. Du kannst grundlegende Meta-Tags wie Titel und Beschreibungen festlegen, aber es gibt keine automatisch generierte Sitemap. Sitemaps teilen Suchmaschinen mit, welche Seiten auf deiner Website existieren und wie oft sie sich ändern. Ohne eine Sitemap bist du darauf angewiesen, dass Google deine Seiten durch das Folgen von Links entdeckt, was langsamer und weniger zuverlässig ist. Es gibt außerdem keine native Unterstützung für Canonical-Tags, benutzerdefinierte Weiterleitungen oder strukturierte Daten.

‍

Für wen Figma Sites entwickelt wurde

Figma positioniert diese Funktion für schnelle Validierung und interne Tools. Die Idee ist, dass Designer Ideen live testen können, ohne auf die Übergabe an Entwickler warten zu müssen. Teams, die bereits für Figma-Lizenzen bezahlen, können einfache Seiten veröffentlichen, ohne ein weiteres Tool zu ihrem Stack hinzufügen zu müssen.

Produktdesigner

Designer, die bereits in Figma arbeiten, können ihre Projekte jetzt direkt veröffentlichen, ohne ein neues Tool lernen oder auf Entwicklungsressourcen warten zu müssen.

• Design-Portfolios veröffentlichen, die Ihre Arbeit potenziellen Arbeitgebern oder Kunden präsentieren
• Interaktive Prototypen erstellen, die Stakeholder in einem echten Browser ansehen können, anstatt im Figma-Vorschaumodus

Startup-Gründer und Early-Stage-Teams

Gründer, die Ideen validieren, müssen schnell handeln. Mit Figma Sites kannst Du Konzepte testen, bevor du in eine vollständige Entwicklung investierst.

• MVP-Landingpages starten, um das Interesse zu messen, bevor das eigentliche Produkt entwickelt wird
• Wartelisten-Seiten und „Demnächst verfügbar“-Seiten erstellen, um frühe Anmeldungen zu sammeln

Marketingteams in Organisationen, die stark auf Figma setzen

Teams, die bereits für Figma-Lizenzen bezahlen, können einfache Kampagnenseiten veröffentlichen, ohne ein weiteres Abonnement hinzuzufügen oder Entwickler einzubeziehen.

• Schnell Event-Landingpages und Webinar-Registrierungsseiten erstellen
• Einmalige Kampagnen-Microsites veröffentlichen, die nicht auf der Hauptwebsite gehostet werden müssen

Interne Teams und Betriebsabläufe

Nicht jede Seite muss öffentlich zugänglich sein. Figma Sites eignet sich gut für interne Dokumentation und Ressourcen.

• Interne Wissensdatenbanken, Prozessdokumentationen und Team-Wikis erstellen
• Onboarding-Portale für neue Mitarbeiter mit eingebetteten Ressourcen und Links erstellen

Agenturen, die Konzepte pitchen

Agenturen können Designkonzepte als Live-Websites präsentieren, anstatt als statische Mockups, was Pitches überzeugender macht.

• Pitch-Decks in interaktive Web-Präsentationen verwandeln, durch die Kunden klicken können
• Erstellen Sie Prototypen-Präsentationen, die sich bei Kundenbesprechungen wie echte Produkte anfühlen.

Der entscheidende Unterschied zwischen Framer und Figma Sites

Framer wurde von Anfang an für das Web entwickelt. Die Arbeitsfläche, die Komponenten und die Veröffentlichungs-Pipeline – alles wurde darauf ausgelegt, performante Websites zu erstellen.

Figma Sites hingegen wurde zu einem bestehenden Design-Tool hinzugefügt. Es ist eine Übersetzungsschicht, die das Canvas-Format von Figma in Web-Output umwandelt. Die zugrunde liegende Architektur war ursprünglich nicht für die Veröffentlichung von Websites gedacht.

Dieser Unterschied erklärt die meisten Unterschiede, die du in den folgenden Abschnitten sehen wirst. Der web-native Ansatz von Framer erzeugt saubereren Code, bessere SEO und eine zuverlässigere Performance. Der Übersetzungsansatz von Figma Sites bietet Figma-Nutzern Komfort, bringt aber Kompromisse bei der Ausgabequalität mit sich.

Keiner der beiden Ansätze ist grundsätzlich besser oder schlechter. Wenn du diesen Unterschied verstehst, kannst du jedoch besser einschätzen, welches Tool zu deinen Anforderungen passt.

Nachdem wir nun die Funktionen, Möglichkeiten und Anwendungsfälle beider Tools betrachtet haben, werfen wir einen Blick auf die Kernfunktionen, die dir bei deiner Entscheidung helfen.

SEO und Performance

Wenn organischer Traffic für dein Unternehmen wichtig ist, ist dieser Abschnitt wahrscheinlich der wichtigste. Die Unterschiede zwischen Framer und Figma Sites werden besonders deutlich, wenn du dir ansiehst, wie Suchmaschinen deine Website wahrnehmen.

Warum das für dein Unternehmen wichtig ist

Google verwendet die Core Web Vitals als Ranking-Signale. Dabei handelt es sich um drei Kennzahlen, die die Nutzererfahrung deiner Website messen:

• Largest Contentful Paint (LCP): Wie schnell lädt dein Hauptinhalt? Google empfiehlt einen Wert unter 2,5 Sekunden.
• Cumulative Layout Shift (CLS): Springt deine Seite während des Ladens hin und her? Google bewertet Websites schlechter, wenn sich Schaltflächen oder Texte unerwartet verschieben.
• Interaction to Next Paint (INP): Wie schnell reagiert deine Website, wenn jemand klickt oder tippt? Träge Reaktionen können sich negativ auf dein Ranking auswirken.

Wenn deine Website bei diesen Kennzahlen schlecht abschneidet, wird es deutlich schwieriger, in den Suchergebnissen sichtbar zu werden. Zwei Websites mit identischem Inhalt können allein aufgrund dieser technischen Faktoren unterschiedlich gut ranken. Für Marketing-Websites, die um wichtige Keywords konkurrieren, ist das ein entscheidender Faktor.

Wie Framer SEO und Performance handhabt

Serverseitiges Rendering (SSR)

Wenn jemand eine Framer-Website besucht, sendet der Server eine vollständig aufgebaute HTML-Seite. Der Inhalt ist bereits vorhanden. Suchmaschinen-Crawler sehen vollständige Seiten mit allen Texten, Bildern und Links, die direkt indexiert werden können.

Das unterscheidet sich vom clientseitigen Rendering, bei dem der Browser zunächst nur eine leere Hülle erhält und JavaScript die Seite erst nach dem Laden aufbaut. Clientseitiges Rendering kann Probleme verursachen, weil Suchmaschinen-Crawler die Seite unter Umständen verlassen, bevor JavaScript vollständig ausgeführt wurde. In diesem Fall indexieren sie eine leere Seite statt deiner Inhalte.

Saubere HTML-Struktur

Framer erzeugt semantisches HTML. Das bedeutet, dass die richtigen HTML-Tags an den passenden Stellen verwendet werden.

Warum ist das wichtig? Suchmaschinen nutzen diese Tags, um die Struktur deiner Seite zu verstehen. Wenn Google ein <nav>-Element erkennt, weiß die Suchmaschine, dass es sich um deine Navigation handelt. Erkennt sie ein <article>-Element, versteht sie, dass dort dein Hauptinhalt steht. Dieser Kontext hilft Google dabei, deine Seite besser einzuordnen und die wichtigsten Inhalte zu erkennen.

Technische Performance

Framer übernimmt viele technische Optimierungen automatisch:

• Bilder werden in das WebP-Format konvertiert und abhängig von der Bildschirmgröße des Besuchers in der passenden Größe ausgeliefert.
• Seiten werden über ein globales CDN mit mehr als 300 Standorten bereitgestellt, sodass Inhalte von einem Server in der Nähe des Besuchers geladen werden.
• Das HTTP/3-Protokoll ist standardmäßig aktiviert und sorgt für schnellere Verbindungen.
• SSL-Zertifikate sind enthalten und werden automatisch eingerichtet.

Welche SEO-Tools du erhältst

Die SEO-Einstellungen von Framer geben dir Kontrolle über die wichtigsten Grundlagen: automatisch generierte Sitemaps, die bei jeder Veröffentlichung aktualisiert werden, Canonical-Tags zur Vermeidung von Duplicate Content, benutzerdefinierte 301- und 302-Weiterleitungen für URL-Änderungen sowie die vollständige Kontrolle über Meta-Titel, Meta-Beschreibungen und Open-Graph-Bilder. Außerdem kannst du benutzerdefinierte Skripte für Tracking-Pixel und strukturierte Daten hinzufügen.

Gut umgesetzte Framer-Websites erreichen bei Google Lighthouse-Audits in der Regel Werte im 90er-Bereich und gehören damit zu den Websites mit einer sehr guten Core-Web-Vitals-Performance.

‍

Wie Figma Sites SEO und Performance handhabt

Figma Sites verfolgt einen anderen Ansatz, und die Ergebnisse zeigen sich deutlich in Performance-Audits. Gehen wir ins Detail.

Das „Div-Suppe“-Problem

Figma Sites erzeugt nicht-semantisches HTML. Anstelle von aussagekräftigen Tags wie header und nav erhalten Sie tief verschachtelte <div>-Elemente. Diese können manchmal 5 bis 10 Ebenen tief sein. Barrierefreiheitsexperten nennen dies „Div-Suppe“. Es ist technisch gültiges HTML, aber es verrät Suchmaschinen nichts über Ihre Inhaltsstruktur. Google sieht einen Haufen generischer Container anstelle einer klar organisierten Seite.

In einigen Fällen landen Navigationslinks am Ende des Quellcodes, anstatt oben, wo Crawler wichtige Elemente erwarten. Das kann die Struktur und Hierarchie deiner Website für Suchmaschinen schwerer verständlich machen.

Lighthouse-Bewertungen

In dokumentierten Tests, erreichten Figma Sites-Seiten SEO-Werte von nur 45 in Google Lighthouse-Audits. Zum Vergleich: Framer-Websites erzielen typischerweise 90+ Punkte. Das ist kein kleiner Unterschied. Es ist der Unterschied zwischen einer für die Suche optimierten Website und einer, die aktiv gegen sich selbst arbeitet.

Fehlende SEO-Grundlagen

Während der Beta-Phase generiert Figma Sites keine Sitemaps automatisch. Sitemaps teilen Suchmaschinen mit, welche Seiten auf deiner Website existieren und wie häufig sie aktualisiert werden. Ohne eine Sitemap bist du darauf angewiesen, dass Google deine Seiten über interne Links entdeckt. Das ist langsamer und weniger zuverlässig.

JavaScript-Abhängigkeit

Figma Sites ist stark auf JavaScript für grundlegende Interaktionen wie Hover-Effekte angewiesen. Dies erhöht die anfängliche Ladezeit der Seite und kann Probleme mit Crawlern verursachen, die JavaScript nicht vollständig ausführen.

Browser-Fehler

Einige Nutzer haben Safari-spezifische Probleme gemeldet, bei denen Schriftarten nicht korrekt geladen werden und Assets fehlen. Diese Fehler könnten behoben werden, wenn die Beta-Phase fortschreitet, aber es ist wichtig, sie zu kennen, wenn Du Figma Sites für eine Produktions-Website in Betracht ziehst.

Framer vs. Figma Sites: Was ist besser für SEO?

Basierend auf den aktuellen Tests haben Suchmaschinen Schwierigkeiten, Figma-Sites-Seiten effektiv zu parsen, da die Codestruktur die Auffindbarkeit eher erschwert als unterstützt.

Wenn organischer Traffic für dein Unternehmen wichtig ist, ist Figma Sites für diesen Anwendungsfall derzeit noch nicht bereit. Das ist keine Spekulation, sondern das Ergebnis der aktuellen Code-Ausgabe, wenn sie mit den Test-Tools von Google überprüft wird.

Für interne Tools, passwortgeschützte Websites oder Seiten, bei denen SEO keine Rolle spielt, spielt diese Einschränkung keine große Rolle. Für öffentliche Marketing-Websites, die um Suchrankings konkurrieren, ist sie jedoch ein echter Nachteil und kann deine Auffindbarkeit beeinträchtigen.

Barrierefreiheit

Die meisten Vergleiche zwischen Framer und Figma Sites lassen die Barrierefreiheit völlig außer Acht. Das ist ein Fehler, denn die Unterschiede sind hier erheblich und haben echte Auswirkungen auf dein Unternehmen.

Was ist Web-Barrierefreiheit?

Web-Barrierefreiheit bedeutet, Websites so zu gestalten, dass Menschen mit Behinderungen sie nutzen können. Dazu gehören blinde Menschen, die Screenreader verwenden, Menschen mit motorischen Einschränkungen, die mit der Tastatur statt mit der Maus navigieren, Menschen mit kognitiven Einschränkungen, die eine klare Struktur benötigen, sowie Menschen mit vorübergehenden Verletzungen, die ihre gewohnten Eingabemethoden nicht nutzen können.

Etwa 16 % der Weltbevölkerung leben mit einer Form von Behinderung. Das sind mehr als eine Milliarde Menschen. Wenn deine Website für sie nicht funktioniert, schließt du einen erheblichen Teil potenzieller Nutzer und Kunden aus.

Warum Barrierefreiheit über die Ethik hinaus wichtig ist

Gesetzliche Anforderungen sind real: Der European Accessibility Act (2025) und der ADA in den USA verlangen beide, dass Websites bestimmte Barrierefreiheitsstandards erfüllen. Unternehmen wie Domino's und Nike wurden bereits wegen nicht barrierefreier Websites verklagt.

Barrierefreiheit verbessert SEO: Suchmaschinen und Screenreader analysieren Websites auf ähnliche Weise. Dasselbe semantische HTML und dieselbe klare Struktur, die Screenreadern helfen, unterstützen auch Google dabei, deine Inhalte zu verstehen und besser einzuordnen.

Besseres Nutzererlebnis für alle: Barrierefreies Design hilft allen Nutzern. Untertitel helfen Menschen in lauten Umgebungen. Hohe Kontraste erleichtern die Nutzung bei hellem Sonnenlicht. Eine klare Navigation hilft jedem dabei, Inhalte schneller zu finden.

Heute ist Barrierefreiheit keine Funktion mehr, die du am Ende eines Projekts ergänzt. Sie ist ein Qualitätsmerkmal für die gesamte Nutzererfahrung und oft ein entscheidender Faktor im Webdesign.

Wie Framer mit Barrierefreiheit umgeht

Semantisches HTML standardmäßig

Framer erzeugt ohne zusätzliche Konfiguration korrektes semantisches HTML. Wenn du eine Navigationskomponente hinzufügst, wird ein <nav>-Element erzeugt. Wenn du einen Seitenkopf erstellst, verwendet Framer <header>. Inhaltsbereiche werden – wo sinnvoll – mit <section>- und <article>-Elementen aufgebaut.

Das ist wichtig, weil Screenreader diese HTML-Tags verwenden, um Nutzern die Navigation zu erleichtern. Ein Screenreader kann dadurch beispielsweise „Navigation mit fünf Links“ oder „Hauptinhaltsbereich“ ansagen. Bei nicht-semantischem HTML müssen Nutzer dagegen selbst herausfinden, welche Funktion ein Bereich erfüllt.

Tastaturnavigation funktioniert

Nutzer, die keine Maus verwenden können, navigieren mit der Tastatur durch Websites. Sie wechseln mit der Tab-Taste zwischen interaktiven Elementen wie Links und Schaltflächen. Die von Framer erzeugten Websites unterstützen dieses Verhalten standardmäßig. Fokuszustände sind sichtbar und die Tab-Reihenfolge entspricht der visuellen Struktur der Seite.

Saubere DOM-Struktur

Das DOM (Document Object Model) ist die Baumstruktur, die Browser aus deinem HTML erstellen. Framer hält diese Struktur sauber und logisch. Elemente erscheinen im Quellcode in derselben Reihenfolge, in der sie auf der Seite dargestellt werden. Auch die Verschachtelung bleibt übersichtlich.

Diese saubere Struktur erleichtert die Einhaltung der WCAG-Richtlinien. Du musst trotzdem selbst Alt-Texte für Bilder hinzufügen, auf ausreichende Farbkontraste achten und aussagekräftige Linktexte verwenden. Die Grundlage von Framer unterstützt barrierefreies Design jedoch, anstatt es unnötig zu erschweren.

Wie Figma Sites mit Barrierefreiheit umgeht

Hier hat Figma Sites erhebliche Kritik aus der Barrierefreiheits-Community erhalten. Die Probleme sind eher struktureller als kosmetischer Natur.

Alles wird standardmäßig zu <div>-Elementen

Figma Sites erzeugt standardmäßig generische <div>-Tags anstelle von semantischem HTML. Deine Navigation wird zu einem <div>, dein Header wird zu einem <div> und dein Hauptinhalt ebenfalls. Screenreader sehen dadurch lediglich eine Ansammlung von Containern ohne aussagekräftige Struktur.

Wenn du semantische HTML-Tags verwenden möchtest, musst du diese für jede Ebene in Figma manuell festlegen. Die Barrierefreiheitseinstellungen sind standardmäßig in der Benutzeroberfläche verborgen, sodass viele Nutzer sie gar nicht finden. Selbst wenn du sie findest, ist das manuelle Zuweisen semantischer Rollen zu jedem einzelnen Element aufwendig und fehleranfällig.

Probleme mit Screenreadern

Barrierefreiheitstester haben mehrere konkrete Probleme dokumentiert:

• Redundante ARIA-Labels: Screenreader lesen Inhalte teilweise doppelt vor. Eine Schaltfläche mit der Beschriftung „Vertrieb kontaktieren“ wird beispielsweise als „Vertrieb kontaktieren Vertrieb kontaktieren“ ausgegeben. Ursache ist die Art und Weise, wie Figma Sites ARIA-Attribute erzeugt.
• Fehlende Formularelemente: Barrierefreie Formulare benötigen <form>, <input>, <label> und <button>, damit Screenreader sie korrekt interpretieren können. Figma Sites erzeugt Formulare häufig ohne diese semantischen Elemente, wodurch ihre Nutzung mit assistiven Technologien erschwert oder sogar unmöglich wird.
• Probleme mit <span>-Elementen: In einigen Fällen wird das letzte Zeichen eines Textelements in ein eigenes <span> eingeschlossen. Screenreader stolpern darüber und lesen einzelne Buchstaben teilweise getrennt vom restlichen Wort vor.

Bewegung und Nutzereinstellungen werden ignoriert

Viele Nutzer aktivieren in ihrem Betriebssystem die Einstellung „Bewegung reduzieren“. Damit teilen sie Websites mit, Animationen möglichst zu vermeiden, da diese Übelkeit, Schwindel oder sogar Anfälle auslösen können.

Die Animationen von Figma Sites berücksichtigen diese Einstellung derzeit nicht. Sie werden unabhängig von den Systemeinstellungen abgespielt. Das ist kein kleiner Fehler. Für Menschen mit vestibulären Störungen kann die Nutzung einer solchen Website dadurch unangenehm oder sogar unmöglich werden.

Links öffnen sich unerwartet

Wenn Links in einem neuen Tab geöffnet werden, empfehlen Barrierefreiheitsrichtlinien, Nutzer darauf hinzuweisen. Screenreader-Nutzer können sonst leicht die Orientierung verlieren, weil sich unerwartet ein neuer Tab öffnet. Figma Sites gibt solche Hinweise standardmäßig nicht aus. Links, die einen neuen Tab öffnen, enthalten keinen Hinweis darauf, dass dies passieren wird.

Was Experten für Barrierefreiheit sagen

Die Kritik aus der Barrierefreiheits-Community war direkt und spezifisch. Adrian Roselli, ein Berater für Barrierefreiheit mit über 25 Jahren Erfahrung, veröffentlichte eine detaillierte Analyse mit dem Titel Veröffentlichen Sie Ihre Designs nicht mit Figma Sites im Web. Seine Tests ergaben grundlegende Probleme bei der HTML-Generierung der Plattform.

Joe Dolson, ein weiterer angesehener Berater für Barrierefreiheit, bezeichnete die Ausgabe von Figma Sites als „den direkten Weg zu Müllcode“.

In den Figma-Community-Foren haben Tester für Barrierefreiheit die Ausgabe als „100 % unbrauchbar“ für Nutzer assistiver Technologien beschrieben. Dies sind keine Randmeinungen von perfektionistischen Entwicklern. Sie spiegeln ernsthafte strukturelle Probleme wider, wie Figma Sites Designs in Code umwandelt.

Framer vs. Figma Sites: Welches Tool ist besser für die Barrierefreiheit?

Das Team von Figma hat das Feedback zur Barrierefreiheit öffentlich anerkannt und angekündigt, Verbesserungen vorzunehmen. Stand März 2026 erfüllt die HTML-Ausgabe jedoch die grundlegenden WCAG-Standards nicht standardmäßig.

Wenn deine Website öffentlich zugänglich ist – insbesondere in regulierten Branchen wie dem Gesundheitswesen, dem Finanzsektor oder dem öffentlichen Bereich –, stellen die Barrierefreiheitslücken von Figma Sites ein erhebliches Risiko dar. Du müsstest die HTML-Ausgabe manuell nachbessern oder rechtliche und ethische Risiken in Kauf nehmen.

Für interne Tools, bei denen du kontrollierst, wer die Website nutzt und alternative Zugangsmöglichkeiten bereitstellen kannst, mögen diese Einschränkungen akzeptabel sein. Für öffentlich zugängliche Websites sind sie jedoch deutlich schwieriger zu rechtfertigen.

Auch Framer ist nicht perfekt. Du musst weiterhin Farbkontraste prüfen, Alt-Texte hinzufügen und deine Website mit echter assistiver Technologie testen. Framer liefert dir jedoch eine Grundlage, die Barrierefreiheit unterstützt. Figma Sites liefert derzeit eine Grundlage, die ihr eher entgegenwirkt.

CMS und Content-Management

Wenn du mehr als nur eine einzelne Landingpage erstellen möchtest, wird Content-Management wichtig. Blogbeiträge, Teammitglieder, Fallstudien, Hilfeartikel oder Produktlisten – alle Inhalte, die regelmäßig aktualisiert werden oder im Laufe der Zeit wachsen, benötigen ein CMS. Genau hier unterscheiden sich die beiden Tools deutlich.

Was ist ein CMS und warum ist es wichtig?

Ein CMS (Content-Management-System) ermöglicht es dir, Inhalte hinzuzufügen, zu bearbeiten und zu organisieren, ohne das Design anzupassen.

Ohne ein CMS musst du jede Inhaltsänderung direkt auf der jeweiligen Seite vornehmen. Möchtest du einen neuen Blogbeitrag veröffentlichen, musst du eine bestehende Seite duplizieren, den Inhalt austauschen und alle Links manuell aktualisieren. Dasselbe gilt, wenn du beispielsweise dein Team erweitern und eine neue Person auf der Teamseite hinzufügen möchtest.

Ein CMS trennt Inhalte vom Design. Du erstellst einmal eine Vorlage und fügst anschließend neue Inhalte hinzu, die automatisch in dieses Layout eingefügt werden. Wenn du einen neuen Blogbeitrag veröffentlichst, erscheint er automatisch auf deiner Blog-Übersichtsseite, erhält eine eigene URL und übernimmt dein bestehendes Designsystem. Zusätzliche Seiten musst du dafür nicht manuell erstellen.

Für Marketingteams, die regelmäßig Inhalte veröffentlichen, ist ein CMS deshalb unverzichtbar.

Das CMS von Framer

Framer bietet ein ausgereiftes CMS, das bereits auf Tausenden von produktiven Websites eingesetzt wird. Hier sind die wichtigsten Funktionen, die du darin findest:

Was Framers CMS fehlt

Das CMS von Framer deckt die meisten Anwendungsfälle ab, ist aber keine vollständige Unternehmenslösung. Es gibt keine integrierte Versionshistorie für Content-Rollbacks, keine geplante Veröffentlichung für zukünftige Termine und keine detaillierten Benutzerberechtigungen für große Redaktionsteams. Für komplexe Content-Workflows musst Du externe Tools integrieren oder diese Lücken umgehen.

Figma Sites' CMS

Figma Sites enthält ein CMS, befindet sich aber in der Beta-Phase mit erheblichen Einschränkungen.

Was dem CMS von Figma Sites fehlt

Die Beschränkung auf 200 Elemente ist die größte Einschränkung. Selbst wenn du nur einen Blogbeitrag pro Woche veröffentlichst, erreichst du diese Grenze in weniger als vier Jahren. Eine Ressourcenbibliothek oder ein Help Center kann sogar schon nach wenigen Monaten an diese Grenze stoßen.

Außerdem fehlen:

• API-Zugriff
• Dynamische Filterung
• Native Blogging-Funktionen wie RSS-Feeds oder Autorenseiten

Für Websites, deren Inhalte kontinuierlich wachsen, ist das eine deutliche Einschränkung.

Framer vs. Figma Sites: Welches CMS ist besser?

Wenn du einen Marketing-Blog, ein Help Center, eine Ressourcenbibliothek, eine Jobbörse oder eine andere Website erstellen möchtest, deren Inhalte im Laufe der Zeit wachsen, ist Framer die realistischere Wahl.

Die Begrenzung auf 200 Elemente bei Figma Sites ist keine vorübergehende Beta-Einschränkung, sondern eine strukturelle Grenze, die festlegt, was du langfristig aufbauen kannst.

Für statische Websites mit wenigen und selten geänderten Inhalten reicht Figma Sites aus. Wenn Content-Wachstum jedoch Teil deiner Strategie ist, solltest du eine Plattform wählen, die mit deinen Anforderungen mitwächst.

Animationen und Interaktionen

Beide Tools ermöglichen es dir, Websites mit Animationen und Interaktionen zu versehen. Sie verfolgen dabei jedoch unterschiedliche Ansätze und unterscheiden sich deutlich hinsichtlich Qualität und Leistungsumfang.

Das Bewegungssystem von Framer

Framer verfügt über eine GPU-beschleunigte Motion-Bibliothek, mit der flüssige und performante Animationen erstellt werden können.

Du erhältst eine Subpixel-Interpolation, wodurch Bewegungen auch bei kleinen Skalierungen sauber dargestellt werden. Außerdem kannst du:

• 3D-Transformationen erstellen
• Physikbasierte Animationen mit Feder- und Trägheitseffekten einsetzen
• Scrollbasierte Animationen erstellen
• Seitenübergänge mit Einblenden, Verschieben, Skalieren oder Weichzeichnen verwenden
• Eigene Timing-Kurven definieren, um Animationen exakt abzustimmen

Für individuelles Verhalten bietet Framer außerdem Code Components und Code Overrides.

Mit Code Components kannst du vollständige React-Komponenten erstellen und auf NPM-Pakete zugreifen.

Mit Code Overrides kannst du bestehenden Elementen eigene Logik hinzufügen, ohne sie neu erstellen zu müssen. Dadurch werden Funktionen möglich, die rein visuelle Website-Builder nicht bieten – von individuellen Animationen bis hin zu Integrationen mit externen APIs.

Das Ergebnis ist, dass Framer-Websites den Feinschliff erreichen können, den man von hochwertigen Marken-Websites kennt: Produktseiten, die sich hochwertig anfühlen, und Interaktionen, die Besucher zum Verweilen und Ausprobieren einladen.

‍

Animationsoptionen in Figma Sites

Figma Sites bietet grundlegende Animations-Presets wie Parallax-Effekte, Hover-Zustände und Marquee-Scrolling. Die Funktion Smart Animate stammt aus den Prototyping-Funktionen von Figma. Außerdem kannst du benutzerdefinierte Cursor erstellen.

Die Einschränkung besteht darin, dass Interaktionsketten begrenzt sind. Komplexe mehrstufige Animationen lassen sich deshalb nur schwer umsetzen. Außerdem gibt es keine physikbasierten Animationen, und die Latenz fällt aufgrund der Art der Implementierung meist höher aus als bei der optimierten Ausgabe von Framer.

Für einfache Hover-Effekte und grundlegende Scroll-Animationen reicht Figma Sites aus. Wenn Bewegung jedoch ein wichtiger Bestandteil deiner Markenidentität ist, wirst du schnell an Grenzen stoßen.

Framer vs. Figma Sites: Welches Tool ist besser für Animationen?

Wenn sich deine Website wie ein hochwertiges digitales Produkt anfühlen soll und nicht wie eine gewöhnliche Webseite, bietet dir Framer die passenden Werkzeuge.

Figma Sites deckt die Grundlagen ab. Sobald Animationen jedoch ein wesentlicher Bestandteil deines Markenerlebnisses sind, bietet Framer deutlich mehr Möglichkeiten.

Responsives Design und Breakpoints

Wie diese Tools mit mobilen und Tablet-Layouts umgehen, ist entscheidend für jede Website, die Besucher über Smartphones oder Tablets erhält. Auch hier verfolgen beide Plattformen unterschiedliche Ansätze.

Wie Framer mit Responsivität umgeht

Framer verwendet einen Desktop-First-Ansatz. Der primäre Breakpoint liegt bei 1200 px, und du gestaltest dein Layout zunächst für große Bildschirme. Standardmäßig stehen folgende Breakpoints zur Verfügung:

• Desktop (1200 px und größer)
• Tablet (810 px)
• Mobile (390 px)

Bei Bedarf kannst du zusätzliche benutzerdefinierte Breakpoints hinzufügen.

Das Vererbungssystem von Framer arbeitet dabei sehr effizient. Änderungen, die du für größere Breakpoints vornimmst, werden automatisch auf kleinere Breakpoints übernommen – außer du überschreibst sie ausdrücklich. Dadurch musst du dein Layout nicht für jede Bildschirmgröße komplett neu erstellen.

Stack-Layouts basieren auf Flexbox. Elemente ordnen sich dadurch automatisch neu an und umbrechen in neue Zeilen, wenn der verfügbare Platz kleiner wird.

Grid-Layouts unterstützen Auto-Fill und Auto-Fit. Inhalte passen sich dadurch automatisch an den verfügbaren Platz an, ohne dass du jedes Layout manuell anpassen musst.

Auch die Typografie kann für jeden Breakpoint separat skaliert werden. Überschriften werden auf kleineren Bildschirmen automatisch kleiner, ohne dass zusätzlicher Aufwand entsteht. Der visuelle Breakpoint-Editor zeigt dir jederzeit, wie deine Website auf Desktop, Tablet und Smartphone aussieht, bevor du sie veröffentlichst.

Wie Figma Sites mit Responsivität umgeht

Figma Sites übersetzt deine Auto-Layout-Strukturen in responsive Web-Layouts. Auto Layout ist das System von Figma, das festlegt, wie Elemente angeordnet werden und ihre Größe anpassen. Wenn deine Figma-Datei Auto Layout konsequent nutzt und die Ebenenhierarchie sauber aufgebaut ist, funktioniert diese Übersetzung in der Regel recht gut.

Die Herausforderung besteht darin, dass viele Designer Figma für visuelle Mockups verwenden, ohne zu berücksichtigen, wie sich Layouts auf unterschiedlichen Bildschirmgrößen verhalten. Auto Layout wurde ursprünglich nicht für responsive Websites entwickelt, sondern für mehr Flexibilität im Designprozess. Werden solche Dateien anschließend über Figma Sites veröffentlicht, können die Ergebnisse uneinheitlich ausfallen. Elemente stapeln sich möglicherweise unerwartet oder Abstände wirken auf kleineren Bildschirmen fehlerhaft.

Im Gegensatz zu Framer gibt es keinen eigenen Breakpoint-Editor. Du kannst Tablet- und Mobile-Ansichten nicht separat in der Vorschau anzeigen oder gezielt anpassen. Stattdessen bist du auf die Übersetzungslogik von Auto Layout angewiesen – und diese trifft nicht immer die richtige Entscheidung.

Framer vs. Figma Sites: Welches Tool solltest du für responsive Designs wählen?

Framer gibt dir vollständige Kontrolle. Du kannst deine Website für jede Bildschirmgröße in der Vorschau anzeigen, genau sehen, was mobile Nutzer sehen werden, und Layouts, Abstände sowie Typografie für jeden Breakpoint individuell anpassen. Änderungen, die du für Tablet vornimmst, wirken sich nicht auf den Desktop aus – außer du möchtest das.

Figma Sites funktioniert gut, wenn deine Quelldatei bereits mit Blick auf Responsivität aufgebaut wurde. Das setzt jedoch voraus, dass deine Figma-Datei von Anfang an entsprechend strukturiert ist. Viele Teams gestalten zunächst nur für den Desktop und kümmern sich später um die mobile Version. Werden solche Dateien anschließend mit Figma Sites veröffentlicht, kann die automatische Übersetzung zu unerwarteten Ergebnissen führen.

Wenn die mobile Nutzererfahrung für dein Unternehmen wichtig ist, liefert Framer vorhersehbarere Ergebnisse, weil du die Ausgabe direkt steuern kannst, anstatt dich auf die Übersetzung von Auto Layout zu verlassen.

Migration von Figma zu Framer

Viele Teams entwerfen ihre Designs in Figma und setzen sie anschließend mit Framer um. Dafür gibt es einen offiziellen Workflow, der allerdings nicht ganz ohne Nacharbeit auskommt.

Der Schritt-für-Schritt-Workflow

Das offizielle Plugin „Figma to HTML with Framer“ übernimmt den Import.

Der Ablauf sieht folgendermaßen aus:

• Installiere das Plugin aus der Figma Community.
• Bereinige zunächst deine Figma-Datei. Benenne Ebenen eindeutig und verwende Auto Layout, wo immer es sinnvoll ist.
• Wähle den Bereich aus, den du importieren möchtest. Importiere nicht die gesamte Seite auf einmal.
• Starte das Plugin. Es kopiert deine Auswahl in die Zwischenablage.
• Füge den Inhalt in Framer ein und überprüfe das Ergebnis.

Was problemlos übernommen wird

Die Ebenenhierarchie bleibt erhalten. Das bedeutet, dass die Struktur und Verschachtelung deiner Elemente aus Figma auch in Framer übernommen wird.

Auto-Layout-Strukturen werden in Stacks umgewandelt – das flexible Layoutsystem von Framer.

Außerdem werden folgende Elemente zuverlässig übernommen:

• Hintergrundfarben und Verläufe
• Design-Tokens wie Farben, Typografie und Abstände, sofern sie konsistent verwendet wurden

Was manuell nachbearbeitet werden muss

Schriftarten werden nicht automatisch übernommen. Framer kann keine Schriftdateien direkt aus Figma importieren. Deshalb musst du die verwendeten Schriftarten nach dem Import erneut auswählen.

Auch komplexe Komponenten oder Varianten – beispielsweise Buttons mit mehreren Zuständen oder Karten mit dynamischen Inhalten – werden nicht immer korrekt übernommen und müssen teilweise neu erstellt werden.

Breiten- und Höheneinstellungen müssen gelegentlich angepasst werden, da Figma und Framer Größen unterschiedlich berechnen.

Interaktionen und Animationen aus dem Prototyping-Modus von Figma werden ebenfalls nicht übernommen. Diese musst du mit den Motion-Funktionen von Framer neu erstellen.

Best Practices von Team Magier

• Importiere einzelne Abschnitte statt kompletter Seiten. Das erleichtert die Kontrolle und die Fehlerbehebung.
• Nutze Auto Layout möglichst konsequent in deiner Figma-Datei. Es lässt sich deutlich zuverlässiger übertragen als absolut positionierte Elemente.
• Vergib aussagekräftige Ebenennamen. Bezeichnungen wie „Hero Section“ oder „CTA Button“ sind nach dem Import wesentlich hilfreicher als „Frame 47“ oder „Rectangle 12“.
• Plane etwa 20–30 % zusätzliche Zeit für die Nachbearbeitung komplexer Bereiche ein. Der Import liefert eine gute Grundlage, ersetzt aber keine manuelle Feinabstimmung.

Die ehrliche Einschätzung

Der Workflow von Figma zu Framer ist keine Zauberlösung. Er verschafft dir einen Vorsprung, liefert aber kein fertiges Ergebnis.

Die meisten Teams sind damit trotzdem schneller, als komplett neu zu beginnen – vor allem beim Aufbau der Seitenstruktur. Für Anpassungen, Schriftarten und Animationen solltest du jedoch zusätzliche Zeit einplanen.

Wenn du diesen Workflow nutzen möchtest, importiere zunächst einen einzelnen Abschnitt einer bestehenden Figma-Datei. So bekommst du ein gutes Gefühl dafür, bevor du ein komplettes Projekt darauf aufbaust.

Drittanbieter-Integrationen

Marketing-Websites funktionieren selten isoliert. Sie müssen Analysedaten erfassen, Leads an CRM-Systeme weiterleiten und sich mit den Tools verbinden, die dein Team täglich nutzt.

Die Integrationsmöglichkeiten von Framer und Figma Sites unterscheiden sich dabei deutlich.

Das Integrations-Ökosystem von Framer

Framer hatte mehrere Jahre Zeit, ein umfangreiches Integrations-Ökosystem aufzubauen. Im Folgenden findest du die wichtigsten Integrationsmöglichkeiten und ihre Einsatzbereiche.

‍

Der native Formular-Builder von Framer deckt die meisten Anforderungen an die Lead-Erfassung ab, ohne dass zusätzliche Plugins erforderlich sind. Du kannst Kontaktformulare, Newsletter-Anmeldungen und Feedback-Formulare mit bedingter Logik und individuellem Styling erstellen.

Formularübermittlungen können:

• per E-Mail versendet,
• in Framer gespeichert oder
• über Webhooks an externe Tools weitergeleitet werden.

Für komplexere Anwendungsfälle wie mehrstufige Formulare oder Dateiuploads erweitert das FramerForms-Plugin den Funktionsumfang.

Integrationsoptionen von Figma Sites

Das Integrations-Ökosystem von Figma Sites ist während der Beta-Phase noch eingeschränkt.

Es gibt keinen Code-Export. CMS-Integrationen werden derzeit ebenfalls nicht unterstützt. Für die meisten Drittanbieter-Tools bist du deshalb auf Einbettungscodes angewiesen. Diese funktionieren zwar, bieten aber nicht den Komfort und die Flexibilität nativer Integrationen.

Das wird sich voraussichtlich mit der Weiterentwicklung von Figma Sites verbessern. Stand März 2026 ist das Integrations-Ökosystem jedoch noch deutlich eingeschränkter.

Framer vs. Figma Sites: Wer bietet bessere Integrationsoptionen?

Wenn dein Workflow eine Anbindung an HubSpot für die Lead-Erfassung, Mailchimp für Newsletter oder Hotjar für Nutzeranalysen erfordert, bietet Framer dafür bereits etablierte Lösungen.

Figma Sites wird diesen Funktionsumfang vermutlich mit der Zeit erweitern. Wenn du diese Integrationen jedoch heute benötigst, ist Framer die deutlich praktischere Wahl.

Preisübersicht

Beide Tools verfolgen unterschiedliche Preismodelle. Wenn du die Unterschiede kennst, kannst du besser einschätzen, welche Kosten tatsächlich auf dich zukommen.

Framer-Preise (pro Website)

Framer berechnet seine Preise pro Website und nicht nach der Anzahl der Personen, die daran arbeiten.

Das Erstellen und Gestalten deiner Website ist kostenlos. Kosten entstehen erst, wenn du sie auf einer eigenen Domain veröffentlichen möchtest.

Personal-Tarife

‍

‍Business-Tarife (nur jährlich)

‍

Add-ons

‍

Ein Vorteil von Framers Preismodell: Hosting ist in jedem Tarif enthalten. Du zahlst nicht separat für Server, SSL-Zertifikate oder CDN-Zugang. Der angezeigte Preis ist der Gesamtpreis, um Deine Website online zu halten.

Figma Sites Preise (pro Lizenz)

Figma berechnet die Kosten pro Lizenz statt pro Website. Für die Veröffentlichung ist ein kostenpflichtiger Tarif erforderlich. Das Hosting von Figma Sites ist während der Beta-Phase derzeit kostenlos, aber Figma hat die endgültigen Hosting-Preise noch nicht bekannt gegeben. Die meisten Branchenbeobachter erwarten, dass Bandbreiten- oder Hosting-Gebühren hinzukommen, sobald das Produkt die Beta-Phase verlässt, was die Gesamtbetriebskosten erheblich verändern könnte.

‍

Kostenvergleichsbeispiel

‍

Die tatsächlichen Kosten hängen von der Größe deines Teams und deinen Anforderungen ab. Das Pro-Website-Modell von Framer eignet sich besonders für Agenturen, die mehrere Kunden-Websites verwalten. Das Pro-Lizenzmodell von Figma kann dagegen günstiger sein, wenn dein Team bereits für Figma bezahlt. Berechne die Kosten deshalb immer für deinen konkreten Anwendungsfall.

Beachte außerdem, dass sich die Preise dieser Tools regelmäßig ändern. Informiere dich daher vor einer Kaufentscheidung immer über die aktuellen Preise.

Wann solltest du welches Tool verwenden?

Anstatt einen eindeutigen Gewinner zu küren, findest du hier einen einfachen Entscheidungsrahmen.

Wähle Framer, wenn:

• Deine Website bei Google ranken soll und organischer Traffic wichtig ist.
• Du Websites für Agenturkunden entwickelst, die eine professionelle und hochwertige Umsetzung erwarten.
• Du ein echtes CMS für einen Blog, eine Ressourcenbibliothek oder ein Portfolio mit mehr als 50 Einträgen benötigst.
• Komplexe Animationen oder Mikrointeraktionen Teil deiner Markenidentität sind.
• Barrierefreiheit für deine Zielgruppe oder Branche wichtig ist.
• Du Marketing-Tools wie HubSpot, Mailchimp oder Analyseplattformen integrieren möchtest.
• Du eine mehrsprachige Website erstellen möchtest.
• Deine Website das öffentliche Aushängeschild deines Unternehmens oder Produkts ist.

Wähle Figma Sites, wenn:

• Du ein internes Tool oder ein MVP zur schnellen Validierung erstellen möchtest.
• Deine Website statisch ist und weniger als 200 Inhaltselemente benötigt.
• Dein Team bereits für Figma-Lizenzen bezahlt und vollständig im Figma-Ökosystem bleiben möchte.
• SEO keine Rolle spielt, weil die Website intern oder passwortgeschützt ist.
• Du innerhalb weniger Stunden statt mehrerer Tage veröffentlichen möchtest.
• Du Prototypen für Stakeholder erstellen möchtest, bevor eine produktionsreife Website entwickelt wird.
• Deine Website eher einer internen Dokumentation als einer öffentlichen Marketing-Website entspricht.

‍

„Die Grundidee hinter Figma Sites ist gut. Aber im Moment fühlt es sich genau wie eine Erweiterung an und nicht wie ein vollwertiges Produkt. Und wenn man es mit seiner Website wirklich ernst meint, fehlt einfach noch viel zu viel.“

Maximilian Fleitmann

Co-founder @ magier

‍

Wann ein Mittelweg sinnvoll ist

Manche Teams entwerfen ihre Designs in Figma und importieren sie anschließend für die Umsetzung nach Framer. Dadurch kombinieren sie die kollaborative Designumgebung von Figma mit dem web-nativen Output von Framer.

Denn die Wahrheit ist: Kein Tool erreicht den Designstandard von Figma. Der Importprozess bringt – wie bereits erwähnt – zwar einige Reibungsverluste mit sich, ist aber ein sinnvoller Workflow für Teams, die die Stärken beider Plattformen nutzen möchten.

Abschließende Gedanken

Framer ist im Jahr 2026 das stärkere Tool für die Erstellung produktionsreifer Websites. Es erzeugt sauberen Code, den Suchmaschinen problemlos verarbeiten können. Barrierefreiheit wird standardmäßig berücksichtigt. Außerdem lässt sich Framer mit den Marketing-Tools verbinden, die Teams tatsächlich nutzen, und das CMS skaliert auch für umfangreiche Content-Projekte.

Figma Sites ist eine vielversprechende Erweiterung der Designfunktionen von Figma. Für Teams, die bereits tief im Figma-Ökosystem arbeiten, bietet es einen hohen Komfort. Der Beta-Status zeigt sich jedoch weiterhin bei der SEO-Ausgabe, den Einschränkungen bei der Barrierefreiheit und den begrenzten CMS-Funktionen.

Für interne Tools oder schnelle Validierungsexperimente mögen diese Einschränkungen keine große Rolle spielen. Für Kundenprojekte oder Websites, die organischen Traffic generieren sollen, sind sie jedoch ein wesentlicher Nachteil.

Wenn du zwischen diesen beiden Tools für eine Website wählen musst, die für dein Unternehmen wichtig ist, spricht die aktuelle Datenlage klar für Framer.

„Framer ist nicht nur ein nettes Design-Tool, mit dem man auch veröffentlichen kann. Es ist ein vollwertiger Website-Builder, der sich zufällig wie ein Design-Tool anfühlt. Diese Kombination ist im Moment kaum zu schlagen.“

Maximilian Fleitmann

Co-founder @ magier

‍

Wenn Du lieber die Lernkurve überspringst und schnell eine ausgefeilte Website erhalten möchtest, ist das genau die Art von Arbeit, die wir bei magier. Unsere Designer erstellen produktionsreife Framer- und Webflow-Websites für Startups und Scale-ups, in der Regel mit einer Bearbeitungszeit von 48 Stunden für Designaufgaben. Wenn Du Dein Projekt besprechen möchtest, kannst Du einen Anruf vereinbaren mit unserem Team.