Staffel 2/1: Was Framer ist, wie es funktioniert und warum

Entwerfen, teilen, veröffentlichen: Ihre neue Website steht schneller online als je zuvor, ganz ohne Code.

Bei Flatline starten wir eine neue Blogreihe. Sie dreht sich, wie der Titel verrät, um die Arbeit mit Framer. In dieser ersten Folge lesen Sie, was Framer ist, für wen es sich lohnt und wie Sie es einrichten. Danach gehen wir in Ruhe die Grundfunktionen und die Oberfläche durch. Genug der Vorrede, wir starten mit den ersten beiden Themen:

Was ist Framer, und für wen ist es gedacht?

Framer ist ein Designtool für interaktive, responsive Websites, Prototypen und Oberflächen von Mobile Apps. Der Unterschied zu anderen Tools liegt in der Kombination: Design und Code stecken in derselben Datei, sodass ein Prototyp nah an das Endprodukt heranreicht. Sie bekommen eine Arbeitsfläche, auf der Sie Animationen, Interaktionen und User Flows ausprobieren, ohne etwas über Code wissen zu müssen.

Damit ist die Frage „für wen?“ noch nicht beantwortet. Framer bedient mehrere Nutzergruppen, jede mit einem eigenen Ziel. Die größte Gruppe sind UI/UX-Designer; sie bauen damit detaillierte Prototypen, ohne je eine Zeile Code geschrieben zu haben. Dazu kommen Product Manager, die ihre Produktideen sichtbar machen wollen, und Entwickler, die den Abstand zwischen Entwurf und Umsetzung verkleinern möchten. Allein oder im Team: Alle drei profitieren von einer Oberfläche, die sich von selbst erklärt, und von dem Code, den sie daneben setzen dürfen, um das Produkt für den Nutzer besser zu machen.

Ihr erstes Projekt einrichten: Schritt für Schritt

Ein Konto anzulegen dauert keine dreißig Sekunden, und Sie können sofort kostenlos loslegen. Folgen Sie den Schritten unten oder sehen Sie sich das Video an.

Ein Framer-Konto anlegen

1. Gehen Sie auf die Website von Framer.

2. Klicken Sie auf die Schaltfläche „Sign up“ oder „Get started“.

3. Geben Sie Ihre E-Mail-Adresse ein und wählen Sie ein Passwort, oder melden Sie sich mit Ihrem Google- oder GitHub-Konto an.

4. Folgen Sie den Anweisungen auf dem Bildschirm, bis Ihr Konto steht.

Die ersten Schritte in Ihrem Projekt

1. Frames hinzufügen: Mit dem Werkzeug ‚Frame‘ legen Sie die Flächen fest, in denen Ihre Designelemente stehen.

2. Dateien importieren: Ziehen Sie Bilder, Icons und andere Medien direkt in Ihr Projekt.

3. Fertige Komponenten nutzen: In der Komponentenbibliothek steht Funktionalität, die Sie sofort einsetzen können.

Die Begriffe in Framer

Framer hat eine Handvoll Funktionen, die das Arbeiten so einfach machen. Bevor wir erklären, wie sie funktionieren, klären wir zuerst die Begriffe, die dabei immer wieder auftauchen.

Frames: Eine Website in Framer besteht komplett aus Blöcken, mit Blöcken darin und darin wieder Blöcken. Diese Blöcke heißen „Frames“. In ein Frame setzen Sie Text, ein Bild, einen CTA oder etwas anderes. 

Component: ein Designelement oder eine Gruppe von Elementen, die Sie im ganzen Projekt wiederverwenden. Pro Komponente legen Sie die Eigenschaften und die Interaktionen fest, sodass Sie das nur einmal durchdenken müssen.

Breakpoint: Sobald der Bildschirm eine bestimmte Breite in Pixeln erreicht, ändert sich das Layout passend zu Größe, Ausrichtung oder Seitenverhältnis. Denken Sie an ein Telefon neben einem Tablet: Dasselbe Layout passt dort nicht. Mit Breakpoints bestimmen Sie selbst, wie Ihre Website auf jedem Format aussieht.

Wichtige Funktionen

Stack: Haben Sie eine Reihe Frames, wählen Sie sie aus und lassen Framer sie automatisch anordnen, waagerecht oder senkrecht. Ausrichten und Verteilen erledigen Sie so in einem Schritt.

Prototype: das funktionierende Modell Ihres Entwurfs, das Sie testen und teilen können. In Framer verbinden Sie Frames und Komponenten mit Interaktionen und Animationen, sodass Sie den Weg durch eine App oder Website schon einmal ablaufen können.

Animation: die Bewegungen und Übergänge, die Sie den Elementen in einem Prototyp mitgeben. Framer bietet dafür eine ganze Reihe Optionen, damit sich Ihr Prototyp wie das echte Produkt anfühlt.

Selbst weiterlernen

Noch ein paar Stellen, an denen Sie mehr über Framer lernen, auch über die Funktionen jenseits der Grundlagen. Framer hat einen YouTube-Kanal mit viel Erklärung, auf dem Sie schnell etwas wiederfinden. Dazu kommt die Update-Seite von Framer mit allen Verbesserungen und Fixes; genau dort sehen Sie, was inzwischen alles geht. Kommen Sie mit der Website von Framer selbst nicht weiter, schauen Sie ins Community-Forum. Andere Nutzer stellen dort ihre Fragen und Lösungen ein, und die Chance ist groß, dass Ihre Frage schon dabeisteht.

Zum Schluss

Framer bringt Entwurf und Code in eine Umgebung, und das erspart UI/UX-Designern, Product Managern und Entwicklern viel Hin und Her. Mit Auto-Layout, Breakpoints und interaktiven Prototypen bauen Sie eine Website, die auf jedem Bildschirm stimmt und sich sofort fertig anfühlt. 

Weil komplizierte Schritte wegfallen und Sie gemeinsam in derselben Datei arbeiten, steht eine Idee schneller als in den meisten anderen Tools. Das macht Framer wertvoll für jeden, der an einer Website oder App arbeitet. Probieren Sie es aus und sehen Sie, wie weit Sie Ihre Entwürfe und Prototypen bringen.

Verlangt ein Projekt mehr, als Framer von Haus aus kann, baut das Custom-Development-Team von Flatline diese Funktionen dazu.

Schauen Sie auf die Website von Framer und starten Sie mit der Website, die Ihnen schon lange vorschwebt!