Konkurrenzanalyse in Figma: Ein Workflow Schritt für Schritt

Einführung

Eine Konkurrenzanalyse in Figma funktioniert am besten als wiederholbare Datei: drei oder vier Wettbewerber, dieselben Seiten in derselben Breite erfasst, ein gemeinsamer Satz an Kategorien und am Ende eine datierte Vergleichstabelle. Ein Ordner voller loser Screenshots ist kein Teardown.

Dieses Tutorial setzt voraus, dass du die Grundlagen von Figma kennst und eine Struktur suchst, die du jedes Quartal wiederverwenden kannst. Voraussetzung ist der Zugriff auf die Wettbewerberseiten, die du untersuchen willst. Die Schritte: Wettbewerber und Fragen festlegen, jede Seite erfassen, die Datei einrichten, messen, was sich messen lässt, den Vergleich aufbauen und entscheiden, was sich ändern soll. Beschrieben wird die Analyse öffentlicher Seiten, nicht das Veröffentlichen fremder Designs als eigene Arbeit.

Wettbewerber und Fragen festlegen

Beginne mit der Frage, mit wem du dich vergleichst. Der Leitfaden zur Wettbewerbsanalyse von Figma unterscheidet direkte Wettbewerber, die ähnliche Produkte für deine Zielkunden anbieten, von indirekten, die ähnliche Produkte an andere Kunden oder andere Produkte an dieselben Kunden verkaufen. Für einen Seiten-Teardown startest du mit den direkten.

Halte die Liste kurz. In Figmas Vorlage für die Konkurrenzanalyse heißt es sinngemäß: "Drei bis vier Wettbewerber sind meist genug." Außerdem wird empfohlen, Wettbewerber mit ähnlichem Angebot, ähnlicher Identität und ähnlichen Werten zu wählen. Mehr Zeilen machen die Tabelle schwerer lesbar und verbessern die Schlussfolgerungen nicht.

Schreibe die Kategorien auf, bevor du etwas erfasst. Dieselbe Vorlage nennt als gängige Kategorien Preise, Produktqualität, Kundensupport, Marketing und Nutzererfahrung. Für einen Design-Teardown beschränkst du sie auf das, was auf einer Seite sichtbar ist:

1. Aufbau des Hero-Bereichs und die wichtigste Handlungsaufforderung.
2. Navigationsstruktur und Anzahl der Einträge auf oberster Ebene.
3. Aufbau der Preisseite (nicht die Preise selbst, solange du sie nicht geprüft hast).
4. Typografie-Skala: Größen von Überschriften und Fließtext.
5. Abstandsrhythmus und Farbeinsatz.

Wer das vorab festlegt, verhindert, dass die Datei zu einem Haufen von Beobachtungen ohne gemeinsamen Rahmen wird. Figmas Leitfaden nennt Websites, soziale Medien, Presseberichte, Blogbeiträge, FAQs und Kundenbewertungen als Datenquellen. Ein Seiten-Teardown nutzt nur die erste. Bewertungen und Positionierung brauchen also eine eigene Recherche.

Jede Seite erfassen

Du hast zwei Möglichkeiten. Welche passt, hängt davon ab, was du messen willst.

Screenshots

Für Vergleiche von Layout und Ablauf reichen Screenshots. Der Hilfeartikel zu Bildern von Figma nennt die Wege ins Dokument: aus der Zwischenablage einfügen, per Drag and drop auf die Arbeitsfläche ziehen, die Füllung Image im Farbwähler oder Place image/video mit Shift Command K auf dem Mac beziehungsweise Shift Ctrl K unter Windows. Place image/video ist für Stapel am nützlichsten: Du klickst auf die Arbeitsfläche, um jede Datei in Originalgröße zu platzieren, oder nutzt Place all.

Zwei Grenzen sind wichtig. Figma hat keinen eigenen Bild-Layer, jeder Screenshot ist also ein Rechteck mit Bildfüllung. Und Dateien über 4096 x 4096 px werden so verkleinert, dass die längste Seite höchstens 4096 px misst. Eine Vollseitenaufnahme einer langen Landingpage kann diese Höhe überschreiten, sodass kleiner Text in den unteren Abschnitten unscharf wird. Erfasse lange Seiten abschnittsweise, wenn du Details darin lesen willst. Vergleiche das mit einem Screenshot plus Bildvektorisierung, falls du das Ergebnis nachzeichnen willst.

Bearbeitbare Layer

Brauchst du echte Werte, importiere die Seite als Layer statt als Bild. UnHTML ist ein Figma-Plugin, das eine eigenständige .html-Datei, ein Safari-.webarchive oder eine mit der Open-Source-CLI erfasste scene.json entgegennimmt und aus dem CSS der Seite Frames, Text, Bilder, Vektoren und Auto Layout baut. Du wählst einen Viewport (Desktop 1440, Mobile 390 oder eine eigene Breite) und erhältst einen Importbericht mit ersetzten Schriften, Frames, die auf absolute Positionierung zurückgefallen sind, und übersprungenen Bildern.

Sei dir klar darüber, was du bekommst. Es ist eine getreue, bearbeitbare Struktur und kein pixelgenauer Klon. Fehlende Schriften werden ersetzt (standardmäßig durch Inter), und der Bericht protokolliert jeden Austausch. Prüfe ihn, bevor du Schriftmaßen traust. Live-Seiten, entfernte Ressourcen und per JavaScript aufgebaute Seiten solltest du zuerst mit der CLI erfassen. Für Seiten hinter einem Login siehe Erfassen einer Seite hinter einem Login. Erfasse nur Seiten, die du einsehen darfst, und beachte die Nutzungsbedingungen der Website.

Die Teardown-Datei einrichten

Struktur zählt mehr als Feinschliff. Frames sind Container, und die direkt auf der Arbeitsfläche liegenden sind Frames der obersten Ebene. Figma zeigt ihre Namen auf der Arbeitsfläche und hebt sie im Ebenenbedienfeld fett hervor, so der Hilfeartikel zu Frames. Damit sind Frame-Namen deine Beschriftungen, also nutze sie.

Ein Aufbau, der sich bewährt:

• Eine Zeile pro Wettbewerber, eine Spalte pro Seitentyp (Startseite, Preise, Produkt).
• Dieselbe Breite für jede Aufnahme: 1440 px für Desktop, 390 px für Mobil.
• Ein Frame-Name wie competitor-a / pricing / 1440 / 2026-10-24, damit das Datum deiner Prüfung Teil der Datei ist.
• Clip Content für jeden Aufnahme-Frame aktiviert. Es blendet alles aus, was über den Rand hinausragt, und verhindert, dass zu große Screenshots ihre Nachbarn überlagern.

Quick-add dupliziert einen Frame und verschiebt die Nachbarn, um Platz zu schaffen. Das hilft, wenn du später einen vierten Wettbewerber ergänzt. Dein eigenes Produkt steht in der ersten Zeile und wird genauso erfasst, damit der Vergleich fair bleibt.

Messen, was sich messen lässt

Einen Screenshot nach Augenmaß zu beurteilen liefert Eindrücke. Messen liefert Zahlen für eine Tabelle. Bei Screenshots kannst du zwar messen, indem du Rechtecke darüberlegst und ihre Größen abliest, doch das ist langsam und nur so genau wie die Aufnahme. Bei importierten Layern wählst du eine Textebene aus und liest Größe, Zeilenhöhe und Füllung direkt ab.

Erhebe für jeden Wettbewerber dieselben Felder:

Die Beispieleinträge sind Platzhalter für das Format, keine Messwerte einer echten Website. Trage deine eigenen ein.

Wiederholen sich Farben, überführe sie in gemeinsame Stile. Die Anleitung zum Extrahieren von Farbstilen aus einer importierten Seite zeigt, wie. Notiere, woher eine Zahl stammt. Ein Wert aus einem Import mit ersetzter Schrift ist schwächer als ein Wert von einer Seite, deren Bericht keinen Austausch zeigt.

Das Vergleichsboard aufbauen

Jetzt führst du alles auf einer Fläche zusammen. Figmas Vorlage arbeitet mit einer Tabelle, in der dein Unternehmen neben jedem Wettbewerber steht und die Kategorien an der Seite aufgeführt sind. Du kannst sie in FigJam oder als Frame in deiner Designdatei bauen. Trage die Messwerte in die Zellen ein und verlinke jede Zelle mit ihrem Aufnahme-Frame, damit jeder sie nachprüfen kann.

Zwei Regeln halten das Ganze ehrlich. Erstens: Datiere alles. Preise, Limits und Seitenaufbau eines Wettbewerbers ändern sich, daher ist eine Zelle mit "geprüft am 2026-10-24" nützlich und eine ohne Datum nicht. Übernimm keine Preise aus dem Gedächtnis. Lies sie am Tag der Erfassung von der Preisseite des Wettbewerbers ab und lass die Zelle leer, wenn du sie nicht prüfen kannst. Zweitens: Bleibe unvoreingenommen. Die Empfehlung der Vorlage lautet: Wenn ein Wettbewerber dich in den meisten Kategorien schlägt, sieh das als Chance zur Verbesserung und nicht als Grund, den Vergleich zu verwerfen.

Erkenntnisse in Entscheidungen übersetzen

Figmas vier Schritte enden damit, die Erkenntnisse in einen strategischen Plan zu überführen. Bei einem Design-Teardown heißt das, die Tabelle in eine kurze Liste von Entscheidungen zu verwandeln:

1. Wo deine Seite klar zurückliegt (zum Beispiel eine Preisseite, die mehr Orientierungshilfen zum schnellen Überfliegen braucht).
2. Wo alle Wettbewerber dasselbe tun, was wahrscheinlich eine Konvention ist, der du folgen solltest.
3. Wo niemand etwas tut, was eine Lücke oder eine schlechte Idee sein kann. Teste, bevor du dich festlegst.

Halte die Datei intern. Ziel ist es, zu lernen, was funktioniert und warum, und dann eine eigene Antwort zu gestalten. Wenn deine Ergebnisse neue Tokens oder Komponenten nahelegen, zeigt Aufbau eines Designsystems aus einer importierten Seite, wie du sie ordnest. Wiederhole den Teardown regelmäßig mit denselben Frame-Namen und Daten, damit du Veränderungen über die Zeit siehst.

Häufig gestellte Fragen

Wie viele Wettbewerber sollte ein Teardown in Figma abdecken?

Figmas eigene Vorlage empfiehlt drei bis vier als meist ausreichend. Bei mehr wird die Vergleichstabelle unlesbar. Wähle Wettbewerber mit ähnlichem Angebot und ähnlicher Zielgruppe.

Ist es legal, die Seite eines Wettbewerbers in Figma zu analysieren?

Eine öffentliche Seite anzusehen und festzuhalten, was du beobachtest, ist gewöhnliche Recherche. Das Design eines anderen als eigene Arbeit zu veröffentlichen, ist etwas anderes und eine urheberrechtliche Frage. Dieser Artikel ist keine Rechtsberatung. Halte die Datei intern und frage im Zweifel eine Rechtsberatung.

Soll ich für einen Teardown Screenshots oder bearbeitbare Layer verwenden?

Für Vergleiche von Layout und Ablauf reichen Screenshots. Bearbeitbare Layer helfen, wenn du echte Abstände, Schriftgrößen und Farben brauchst, weil du sie prüfen statt schätzen kannst.

Kann UnHTML die Seite eines Wettbewerbers exakt klonen?

Nein. UnHTML erzeugt getreue, bearbeitbare Layer und keinen pixelgenauen Klon. Der Importbericht listet ersetzte Schriften, Rückfälle auf absolute Positionierung und übersprungene Bilder auf. Lies ihn, bevor du dich auf Messwerte verlässt.