Bild: Mit KI generiert

Der sichtbarste Unterschied zwischen einem Junior- und einem Senior-Prototyp in Figma ist selten die visuelle Qualität der Screens. Er liegt in dem, was zwischen den Screens passiert, und ob das Interface echte Interaktionszustände simuliert oder lediglich Screenshots aneinanderreiht.

Eine Sequenz verbundener Frames mit einfachen Navigate-to-Verbindungen ist kein Prototyp im methodischen Sinne. Sie ist eine klickbare Präsentation. Sie reicht aus, um eine Idee zu zeigen, aber sie schlägt fehl, sobald eine Testperson vom erwarteten Pfad abweicht, ein Formularelement befüllt oder einen Zustandswechsel auslöst, der im Prototyp nicht vorgesehen war.

In diesem Artikel erfährst du, wie Smart Animate, Interactive Components und Figma Variables Prototypen von Screenshot-Sequenzen zu interaktiven Systemen machen und warum der Unterschied nicht Technik-, sondern Denkweise-Frage ist.

Warum Layer-Benennung das Fundament von Smart Animate ist

Smart Animate ist Figmas Mechanismus für flüssige Übergänge zwischen Frames. Statt hartem Seitenwechsel animiert Figma alle Elemente, die von einem Frame zum nächsten ihre Position, Größe, Deckkraft, Rotation oder Form ändern.

Der Mechanismus basiert auf einer einfachen Regel: Figma identifiziert animierbare Elemente durch ihre Layer-Namen. Zwei Elemente in verschiedenen Frames werden dann als dasselbe animierte Objekt behandelt, wenn sie exakt denselben Namen haben. Weichen die Namen auch nur minimal ab, werden beide Elemente als separate Objekte behandelt: das erste verschwindet, das zweite erscheint, ohne Animation.

Das klingt trivial. In der Praxis ist es der häufigste Grund dafür, dass Smart Animate nicht wie erwartet funktioniert.

Häufige Fehlerquelle: Ein Button heißt in Frame 1 „Button / Primary" und in Frame 2 „Button Primary" — Schrägstrich gegen Leerzeichen. Figma behandelt beide als unterschiedliche Elemente und produziert keinen flüssigen Übergang, sondern einen harten Wechsel.

Konsequenz für den Workflow: Layer sauber und konsistent benennen, bevor Prototyp-Verbindungen gesetzt werden. Layer-Umbenennung im Nachhinein bricht bestehende Animationen. Wer in einem komponentenbasierten System arbeitet und konsistente Komponentennamen verwendet, hat dieses Problem strukturell gelöst. Ein weiterer Grund, warum Auto Layout und Designsysteme die Grundlage effizienten Figma-Prototypings sind.

Interactive Components: Zustandsmanagement innerhalb einer Komponente

Interactive Components sind der entscheidende Schritt von der Frame-Sequenz zum interaktiven System. Statt für jeden Zustand eines Elements einen eigenen Frame zu erstellen — Button Default, Button Hover, Button Pressed als drei separate Frames — werden alle Zustände als Varianten innerhalb einer einzigen Komponente definiert.

Das Prinzip: Eine Button-Komponente hat Varianten für Default, Hover und Pressed. In der Prototyping-Ansicht wird innerhalb der Komponente definiert, welche Interaktion welchen Variantenwechsel auslöst. Mouse Enter wechselt zu Hover, Click wechselt zu Pressed, Mouse Leave kehrt zu Default zurück.

Was das verändert: Jede Instanz dieser Komponente im gesamten Prototyp verhält sich interaktiv, ohne dass dafür individuelle Frame-Verbindungen gesetzt werden müssen. Ein Button auf Seite 1 und derselbe Button auf Seite 12 verhalten sich identisch — weil beide Instanzen derselben Komponente sind.

Wo Interactive Components an Grenzen stoßen: Sie funktionieren hervorragend für isolierte Element-Zustände (Hover, Focus, Active, Disabled). Für seitenübergreifende Logik oder persistente Zustände, die über mehrere Interaktionen hinweg erhalten bleiben sollen, braucht es Figma Variables.

Figma Variables in Prototypen: Zustandslogik ohne Code

Figma Variables ermöglichen es, Werte in Prototypen zu speichern und zu verändern, ohne dass dafür separate Frames erstellt werden müssen. Seit ihrer Einführung und schrittweisen Erweiterung ermöglichen Variables vier Typen, die für Prototyping relevant sind: Boolean, Number, String und Color.

Boolean Variables sind für Show/Hide-Logik das mächtigste Werkzeug. Ein Navigationsmenü, das auf Klick ein- und ausblendet. Eine Fehlermeldung, die erscheint, wenn ein Formularfeld leer bleibt. Eine Sidebar, die sich öffnet und schließt. All das lässt sich ohne eine einzige Frame-Duplikation als Variable-gesteuerte Sichtbarkeit umsetzen.

Der Vorteil gegenüber der klassischen Methode mit separaten Frames: Der Kontext bleibt erhalten. Wenn eine Sidebar sich öffnet, bleibt der Rest des Interfaces in exakt dem Zustand, in dem es war: scrollposition, befüllte Felder, aktive Tabs. In einer Frame-Sequenz ohne Variables kehrt der Prototyp zum Ausgangszustand zurück.

Number Variables ermöglichen einfache Zählerlogik: ein Warenkorb-Badge, der sich bei jedem Klick erhöht, ein Fortschrittsbalken, der sich nach jeder abgeschlossenen Aufgabe aktualisiert.

String Variables erlauben dynamische Texte: Ein Benutzername, der aus einem Eingabefeld übernommen und auf dem nächsten Screen angezeigt wird, ist ein häufiges Anwendungsbeispiel.

Wichtig: Variables in Figma haben in Prototypen Grenzen. Komplexe Bedingungen, die mehrere Variablen kombinieren, oder Berechnungslogik, die über einfache Addition hinausgeht, lassen sich in Figma nicht vollständig abbilden. Für solche Anforderungen ist Framer als Alternative zu prüfen, das code-basierte Logik direkt im Prototyping-Tool ermöglicht.

Overflow Scrolling und Sticky-Elemente: Realistische Layouts

Zwei technische Fähigkeiten, die den Unterschied zwischen einem realistischen und einem offensichtlich statischen Prototyp machen:

Overflow Scrolling ermöglicht, dass bestimmte Bereiche eines Frames scrollbar sind, während andere Bereiche fixiert bleiben. Die Navigation bleibt am oberen Rand, während der Inhaltsbereich darunter scrollt. In Figma wird das durch „Clip Content" auf dem scrollbaren Frame und „Fixed Position" auf der fixierten Schicht umgesetzt.

Ein häufiger Fehler: Der gesamte Frame wird als scrollbar definiert, statt nur den Inhaltsbereich. Das führt dazu, dass auch Navigationselemente scrollbar sind, was in echten Interfaces nicht der Fall ist und die realistische Wirkung des Prototyps sofort zerstört.

Sticky Navigation erfordert, dass scrollbare Inhalts-Layer korrekt strukturiert sind und das fixierte Element die richtige Position-Einstellung hat. Figma unterscheidet zwischen „Scroll with parent" (Standard) und „Fixed (stays in place while scrolling)" in den Layer-Einstellungen. Dieser Unterschied ist in der Figma-Dokumentation zum Prototyping ausführlich beschrieben.

Wann Figma und wann externe Tools

Figma Prototyping ist für die meisten Webdesign-Anwendungsfälle ausreichend. Es gibt jedoch Situationen, in denen externe Tools sinnvoller sind:

Für Prototypen, die komplexe Animationslogik mit Timelines benötigen, ist Principle auf macOS eine bewährte Alternative. Für Prototypen mit echter Datenanbindung, Sensor-Interaktion oder Code-basierter Logik ist ProtoPie das leistungsfähigste No-Code-Tool. Framer positioniert sich für Designer:innen, die tiefer in React-basierte Interaktion einsteigen wollen, ohne vollständig entwickeln zu müssen.

Die Entscheidung hängt vom Testziel ab: Für Klickpfad-Tests, Informationsarchitektur-Validierung und Stakeholder-Demos ist Figma ausreichend. Für realistische Interaktionstests mit echter Systemlogik lohnt sich der Wechsel zu einem spezialisierten Tool.

Take Away Message

Smart Animate, Interactive Components und Variables sind nicht drei separate Figma-Funktionen. Sie sind drei Ebenen eines zusammenhängenden Prototyping-Systems. Smart Animate macht Übergänge flüssig, Interactive Components machen Elemente autonom interaktiv, Variables machen Zustände persistent. Wer alle drei kombiniert, baut Prototypen, die sich nicht mehr wie klickbare Präsentationen anfühlen, sondern wie erste Versionen eines echten Produkts. Das ist der Unterschied, der in Usability-Tests aussagekräftiges Feedback produziert — und in Stakeholder-Demos Überzeugungskraft erzeugt. Wer diese Grundlagen strukturiert aufbauen will: Im Webdesign Fundamentals Kurs der UIX Academy werden interaktive Prototypen als integraler Bestandteil des Designprozesses behandelt.