Consistency
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.
