In diesem ausführlichen Framer-Tutorial lernst du die grundlegenden Funktionen kennen: von der Benutzeroberfläche über Container-Layouts bis hin zu responsivem Design — Schritt für Schritt und interaktiv erklärt für Einsteiger.
Artikel
Die Benutzeroberfläche von Framer
Wenn du ein neues Projekt in Framer startest, hast du eine Auswahl von vorgefertigten Templates, die du bearbeiten kannst. Templates ansehenᶠ
Möchtest du aber von Grund auf starten, öffnet sich eine übersichtliche Arbeitsfläche mit mehreren wichtigen Bereichen.
Container-Layouts in Framer erklärt
Ein zentraler Baustein in Framer (und im Webdesign allgemein) ist der Container, auch Parent Layer genannt.
Container dienen dazu, Elemente zu gruppieren und zu strukturieren – zum Beispiel Überschrift und Textblock. Elemente in einem Parent Layer nennt man auch Children bzw. Child-Elemente. Container bestimmen Abstände zwischen den Elementen, nach außen, Ausrichtung der Elemente und Layoutform (Liste, Spalten, Raster oder neuerdings sog. Masonry-Grids, für Bildergalerien gut geeignet). Diese Eigenschaften kontrollierst du im Property-Panel, indem du den jeweiligen Container auswählst. Überliegende Container kannst du genauso stylen wie die innerliegenden Elemente selbst.
Ein Container entsteht in Framer aus einem sog. Frame. Diesen erstellst du mithilfe des Buttons neben dem Plus in der oberen Leiste oder mit der Taste "F". Nun kannst du im Canvas den Frame aufziehen. Im Property-Panel musst du nun auf "Layout" klicken, um aus dem Frame ein Layout zu machen. In diesem Untermenü kannst du nun das Verhalten des Containers bestimmen (wie oben erläutert). Jetzt kannst du innerhalb des Containers Textblöcke oder weitere Frames / Container einfügen.
Alternativ kannst du in dem Menü neben dem Plus-Icon direkt den gewünschten Container bestimmen und im Canvas aufziehen. Dieser enthält dann aber schon Child-Elemente.
Beispiel:
Ein Textblock besteht aus einem Container, der zwei Elemente enthält – eine Überschrift und einen Titel. Der Container sorgt dafür, dass beide immer untereinander bleiben, egal wie sich die Bildschirmgröße ändert.
Im Grunde besteht eine komplette Webseite (in Framer) aus einer Hierarchie von Containern, die alle Inhalte enthalten und strukturieren.
Wie du Elemente in Framer positionierst
Framer bietet verschiedene Arten der Positionierung eines Elements ("Position" im Property-Panel) – je nach gewünschtem Verhalten.
Relative Position: Elemente richten sich aneinander im Container aus (Die Anordnung wird durch den umgebenden Container bestimmt). Im Normalfall ist ein Element immer relativ positioniert.
Beispiel: Dieser Textblock.
Im Normalfall ist ein Element immer relativ positioniert, damit es im Fluss der Seite bzw. des Layouts bleibt. Doch für spezielle Fälle gibt es noch drei weitere Positionierungsarten:
Absolute Position: Elemente werden unabhängig von anderen Inhalten platziert. Hierbei zählt der Abstand vom Bildschirmrand (z. B. fixiert an einer bestimmten Ecke).
Beispiel: Das schwebende Framer-Logo oben rechts auf der Seite "Shortcut der Woche"
Fixed Position: Elemente wie Navigationsleisten oder Buttons bleiben immer sichtbar, auch beim Scrollen. Diese Positionierung ist nur innerhalb des obersten Layers möglich, nicht in verschachtelten Containern.
Beispiel: Die Navigationsleiste oberhalb des Artikels.Sticky Position: Bleibt im normalen Seitenfluss, bis es an einer festgelegten Position fixiert ist.
Beispiel: Die Artikelnavigation links in der Desktopansicht dieser Seite.
Größenanpassung von Elementen in Framer
Auch bei der Größeneinstellung eines Elements ("Size" im Property-Panel) gibt es verschiedene Modi, die festlegen, wie flexibel ein Element ist:
Fill: Das Element füllt den gesamten verfügbaren Platz im Container aus.
Relative: Größe ist abhängig vom übergeordneten Element – praktisch für flexible Layouts.
Fixed: Eine feste Größe, unabhängig vom Inhalt oder Container.
Fit: Die Größe richtet sich nach dem Inhalt (z. B. Textlänge).
Responsives Design in Framer mit Breakpoints
Eine moderne Website muss auf allen Geräten gut aussehen – von Desktop bis Smartphone.
Framer bietet dafür sogenannte Breakpoints, mit denen du festlegst, wie sich dein Layout bei verschiedenen Bildschirmgrößen verhält.
Standardmäßig gibt es drei Breakpoints:
Desktop
Tablet
Smartphone
Du kannst diese anpassen oder eigene hinzufügen. So kannst du etwa auf mobilen Geräten Schriftgrößen verkleinern, Layouts umstellen oder bestimmte Elemente ausblenden.
Einen neuen Breakpoint kannst du hinzufügen, indem du den Balken über dem Aktuellen auswählst und rechts auf das Plus-Symbol klickst.
Änderungen auf dem primären Breakpoint (im Normalfall "Desktop") werden für alle anderen Breakpoints übernommen, Änderungen auf einem der abgeleiteten Breakpoints allerdings nicht.
Einheitliches Design mit Framer Styles
Um beim Design deiner Elemente Zeit zu sparen, kannst du im Assets-Tab vordefinierte Styles erstellen, die du dann über das Projekt hinweg auf deine Elemente anwenden kannst. Damit ermöglichst du ein durchgehend einheitliches Design (Consistency) und vermeidest Designfehler.
Anlegen lassen sich hier Styles für Schriftarten, Farben, Darstellungen von Links und mehr.
Schriftarten: Klicke neben "Styles" auf das Plus-Symbol und gehe auf "Text". Nun kannst du auswählen, welche Textkategorie du stylen möchtest, aufgeteilt in H1 für Überschriften, H2-H6 für Unterüberschriften und P für Lauftext. Achte darauf, dass du die richtige Kategorie auswählst. Du kannst nun alle Eigenschaften einstellen und die Schriftgröße je nach Breakpoint in Pixeln (Px) einstellen oder die empfohlene relative Größe "REM", dessen Größenfaktor du je nach Breakpoint im jeweiligen Property-Panel unter "Typography" unter "Base" einstellen kannst. Nun kannst du bei Textelementen "Style" im Property-Panel auswählen und die vorgefertigten Styles auswählen.
Farben: Klicke auch hier neben "Styles" auf das Plus-Symbol und gehe nun auf "Color". Jetzt öffnet sich ein Panel, in dem du die Farbe per Colorpicker oder über den HEX-Code einstellen und die Farbe benennen kannst. Falls du bei deiner Webseite zwischen dunklem und hellen Modus unterscheiden möchtest, kannst du hier noch die Farbe für den dunklen Modus deiner Seite einstellen.
Framer Grundlagen
Die ersten Schritte — Die Grundlagen von Framer
Autor: so geht UI
Stand: 2. Januar 2026