In meinem neuesten Video auf Framer Mastery geht es um eines der wichtigsten Themen überhaupt, wenn du langfristig und professionell mit Framer arbeiten möchtest: Components.
Components sind das Fundament für skalierbare, saubere und wartbare Webseiten. Wer sie richtig versteht und einsetzt, spart enorm viel Zeit, vermeidet doppelte Arbeit und kann komplexe Interaktionen deutlich einfacher umsetzen. In diesem Artikel gehe ich die wichtigsten Punkte aus dem Video Schritt für Schritt durch und erkläre, wie du Components sinnvoll nutzt.
Dieser Beitrag ist besonders hilfreich, wenn du bereits die Grundlagen aus dem ersten Teil der Serie kennst, in dem wir eine Website von Grund auf aufgebaut haben. Jetzt gehen wir einen Schritt tiefer.
Alle Ressourcen die zu brauchst um das Projekt nachzubauen:
Wie erstellt man Components und worauf sollte man achten?
Bevor wir über konkrete Anwendungsfälle sprechen, ist es wichtig zu verstehen, wie Components überhaupt entstehen und welche Denkweise dahinter steckt.
Eine gute Component sollte:
klar abgegrenzt sein
einen eindeutigen Zweck erfüllen
flexibel anpassbar sein
nicht mehr Logik enthalten als nötig
Beim Erstellen solltest du dir immer die Frage stellen:
Wird dieses Element mehrfach verwendet oder könnte es später mehrfach gebraucht werden?
Wenn die Antwort ja lautet, ist es ein Kandidat für eine Component.
Ein häufiger Fehler ist es, Components zu früh oder zu komplex zu bauen. Gerade am Anfang ist es besser, klein zu starten und Components schrittweise zu erweitern.
Anwendungsfall 1: Simple Components
Der erste und häufigste Einsatzbereich sind einfache Components. Dazu gehören unter anderem:
Buttons
FAQ-Elemente
Kontaktformulare
wiederkehrende Content-Blöcke
Der große Vorteil hier ist Konsistenz. Änderst du später beispielsweise den Button-Stil, wird diese Änderung automatisch überall übernommen. Das spart Zeit und sorgt für ein einheitliches Design.
Beim Aufbau solcher Components solltest du darauf achten, dass Texte, Abstände und Farben sauber strukturiert sind und nicht hart in der Component „verbacken“ werden, wenn sie später variabel sein sollen.
Anwendungsfall 2: Breakpoint-Components
Ein extrem wichtiger Punkt, der oft unterschätzt wird, sind Breakpoint-Components. Diese kommen vor allem bei Elementen wie:
Navigationsleisten
Footer
komplexeren Layout-Elementen
zum Einsatz.
Anstatt für Desktop, Tablet und Mobile alles separat zu bauen, kannst du Components nutzen, um unterschiedliche Varianten pro Breakpoint zu definieren. So bleibt die Struktur gleich, während sich Darstellung und Verhalten an die Bildschirmgröße anpassen.
Das Ergebnis ist ein deutlich saubereres Projekt und weniger Fehler bei späteren Anpassungen.
Switch-Between-Components und Variants
Ein sehr mächtiges Feature in Framer sind Variants. Sie ermöglichen es, innerhalb einer Component zwischen verschiedenen Zuständen zu wechseln.
Typische Beispiele sind:
Price Cards mit einem Toggle zwischen monatlich und jährlich
Buttons mit unterschiedlichen Zuständen
Layouts mit wechselnden Inhalten
Variants lassen sich nicht nur für komplette Layouts nutzen, sondern auch für:
Texte
Farben
Bilder
Icons
Im Video zeige ich, wie man Variants sauber aufbaut und wann es sinnvoll ist, mehrere Variants in einer Component zu bündeln, anstatt mehrere einzelne Components zu erstellen.
Scroll-Variants – Zustände abhängig vom Scroll
Ein besonders spannender Bereich sind Scroll-Variants. Dabei wechseln Components ihre Variante abhängig davon, ob eine bestimmte Sektion im Viewport sichtbar ist.
Das eignet sich hervorragend für:
Sticky Navigationen
Storytelling-Seiten
Schrittweise Erklärungen
Hier ist es besonders wichtig, sauber mit Sektionen zu arbeiten und klar zu definieren, wann eine Variante aktiv sein soll. Zu viele Scroll-abhängige Wechsel können schnell unruhig wirken, daher sollte man diesen Ansatz gezielt einsetzen.
Component Animationen über Appear
Neben Klicks und Hover-Zuständen gibt es auch die Möglichkeit, Component-Animationen automatisch über Appear auszulösen. Dabei wechseln Components selbstständig zwischen Varianten, ohne dass der Nutzer aktiv interagieren muss.
Das eignet sich perfekt für:
durchlaufende Animationen
visuelle Highlights
erklärende UI-Elemente
Richtig eingesetzt wirkt das sehr flüssig und hochwertig. Wichtig ist hier, mit Timing und Dauer bewusst umzugehen, damit die Animation ruhig und nicht hektisch wirkt.
Overlay Components und Event Trigger
Der komplexeste, aber auch mächtigste Teil sind Overlay Components in Verbindung mit Event Triggern.
Hierbei geht es darum, Events von tief verschachtelten Components nach oben zu transportieren. Ein typisches Beispiel ist:
ein Button innerhalb einer Component
der ein Overlay öffnet
das auf einer übergeordneten Ebene liegt
Mit Event Triggern kannst du Variablen aus untergeordneten Ebenen an die oberste Component weitergeben und dort Aktionen auslösen, zum Beispiel das Öffnen oder Schließen eines Overlays.
Sobald man dieses Prinzip verstanden hat, öffnen sich extrem viele Möglichkeiten für komplexe Interaktionen und saubere Architektur.
Fazit: Components sind der Schlüssel zu skalierbaren Framer-Projekten
Components sind weit mehr als nur wiederverwendbare Elemente. Sie sind das Fundament für professionelle Framer-Websites. Wer versteht, wie man simple Components, Breakpoint-Components, Variants, Scroll-Variants, Animationen und Event Trigger zusammenspielt, kann nahezu jede Idee umsetzen.
Dieses Video und dieser Artikel geben dir das komplette Werkzeug an die Hand, um Components nicht nur zu nutzen, sondern wirklich zu verstehen. Ab diesem Punkt sind deiner Kreativität kaum noch Grenzen gesetzt, solange du strukturiert und bewusst arbeitest.
Das im Video gezeigte Projekt kannst du remixen und selbst analysieren. So lernst du nicht nur die Theorie, sondern siehst direkt, wie saubere Component-Architektur in Framer aussieht.
