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.
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.
Interaktives Element
Das linke Seitenpanel ist aufgeteilt in drei Tabs:
Pages-Tab: Hier kannst du deine Seiten und Unterseiten anlegen, verwalten und strukturieren.
Layers-Tab: Zeigt dir alle Elemente auf deiner aktuellen Seite und deren Anordnung – inklusive der Ansichten für Desktop, Tablet und Mobile.
Assets-Tab: Hier erstellst du Komponenten, vorgefertigte Styles und Vorlagen, um dein Design einheitlich zu gestalten. (Mehr dazu später)
klicke dich durch die Tabs, um sie zu erkunden
Interaktives Element
Container (Ausrichtung Vertikal)
Padding: Vom Container bestimmter Abstand der Elemente nach außen
Container-Element 1
Gap: Vom container bestimmter abstand zwischen elementen
Container-Element 2
Container-Layout:
Liste
Spalten
Raster
Masonry
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.
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.
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).
Interaktives Element
Breite "Fill" (1fr)
Responsiv
Breite "Relative" (65%)
Responsiv
Breite "Fixed" (300 Pixel)
Nicht Responsiv
Breite "Fit"
Nicht Responsiv
Verändere auf dem Desktop die Fenstergröße. um Unterschiede zu sehen.
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.
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
Autor: so geht UI