Framer-Tutorial: So erstellen Sie beeindruckende interaktive Prototypen

Sehen Sie sich die Beispielprototypen unten an. Diese wurden in Framer erstellt. Nach diesem Tutorial können Sie im Handumdrehen mit der Erstellung Ihrer eigenen beeindruckenden animierten Prototypen beginnen.

Framer hat vor einer Woche seine neueste Version herausgebracht, und der Markt für Prototypen wird nie mehr derselbe sein. Das Framer-Prototyping-Tool war früher schwer zu beherrschen, aber nützlich als die genaueste und grenzenloseste Prototyping-Software. Jetzt haben sich die Dinge geändert. Framer verfügt jetzt über Design + Code + Collaborate-Funktionen, was bedeutet, dass Sie Ihren Prototyp direkt in Framer erstellen und einen voll funktionsfähigen Prototyp ohne Software von Drittanbietern und ohne Programmierkenntnisse entwickeln können.

Hier zeige ich Ihnen, wie Sie einfachen Framer-Code verwenden, ohne dass Vorkenntnisse in der Codierung erforderlich sind. Sie lernen, wie Sie die besten Funktionen aus dem Design- und Code-Modus in Framer kombinieren, um animierte und interaktive Prototypen zu erstellen. Lassen Sie uns also in dieses Tutorial springen und ein paar kleine Codeschnipsel holen, um Ihre Prototypen zu verbessern.

Framer-Grundlagen

Lass uns anfangen! Gehen Sie einfach auf framer.com und laden Sie eine Testversion herunter. Sie geben Ihnen zwei Wochen lang ihre voll funktionsfähige Demo, und glauben Sie mir, es ist genug Zeit, um viel über diese Prototyping-Software zu lernen.

Nach der Installation möchten Sie vielleicht einige der bereitgestellten Beispiele durchgehen und ein wenig damit spielen. Wenn Sie fertig sind, ist es an der Zeit, mit dem Prototyping zu beginnen.

(In diesem Framer-Tutorial konzentriere ich mich darauf, Prototypen direkt in Framer.js zu erstellen. Sie sollten auch wissen, dass es andere Möglichkeiten gibt, mit dem Prototyping in Framer zu beginnen. Sie können beispielsweise direkt mit Sketch-Dateien arbeiten. Ich werde diesen Workflow in behandeln ein anderer Artikel.)

Der brandneue Framer – Design-Modus

In diesem Artikel werden wir drei coole Prototypen innerhalb von Minuten mit minimalem Codeverbrauch erstellen: grundlegende Interaktionen, Bildlaufkomponente und Seitenkomponente

Die neueste Version von Framer hat eine großartige neue Funktion: den Designmodus. Sie können damit fast genauso arbeiten wie in Sketch oder Figma. Sie können Vektorebenen erstellen, Bilder importieren oder Textebenen erstellen und formatieren. All dies wird sehr praktisch, wenn Sie schnell ohne Apps von Drittanbietern Prototypen erstellen möchten.

Lassen Sie uns ein App-artiges Design erstellen

Im ersten Teil dieses Tutorials bereiten wir einen Playground für unseren Framer-Prototyp vor. Wir werden ein App-artiges Design mit drei verschiedenen Arten von Ebenen erstellen: Vektor, Bild und Text.

Schritt 1: Erstellen Sie eine einfache Schaltfläche und einen Hintergrund.

Um mit dem Design zu beginnen, wählen Sie die erste Registerkarte – das ist der Designmodus – und fügen Sie eine Zeichenfläche hinzu, genau wie in Sketch. In diesem Tutorial arbeiten wir an einem iPhone 7-Prototyp, daher habe ich diese Voreinstellung als meine Zeichenflächengröße ausgewählt. Ich habe auch eine blaue Hintergrundfüllung hinzugefügt.

Wählen Sie als Nächstes das Rechteck- Werkzeug aus und erstellen Sie eine Form in Form einer einfachen runden Schaltfläche.

Schritt 2: Fügen Sie eine Karte mit einem Bild hinzu.

Die zweite Methode zum Hinzufügen von Ebenen ist die Drag-and-Drop -Funktion. Sie können eine beliebige Bilddatei von Ihrem Computer auswählen, in Framer ablegen und mit der rechten Seitenleiste formatieren. Ich habe eine einfache Illustration verwendet und sie als Karte gestaltet.

Schritt 3: Fügen Sie einen App-Titel hinzu.

Mit Framer können Sie auch eine Textebene hinzufügen. Auch hier ist das Styling im Grunde das gleiche wie in jeder Grafiksoftware. Sie können Schriftart, Größe, Ausrichtung, Buchstabenabstand und mehr auswählen.

Schritt 4: Teilen Sie Framer mit, welche Ebenen interaktiv sind.

Wir haben noch einen Schritt, bevor wir mit unserem Framer-Prototypen beginnen. Wir müssen Framer nur mitteilen, welche Ebenen interaktiv sein werden. Klicken Sie einfach auf den Punkt neben dem Ebenennamen im Ebenenbedienfeld. Es ist gut, jede Ebene für die weitere Verwendung richtig zu benennen. Ich habe meine Ebenenkarte und -schaltfläche benannt.

Schritt 5 (Bonus): Definieren Sie Ihre globalen Farben.

Eine bewährte Vorgehensweise besteht darin, einige Variablen für den gesamten Prototyp zu definieren. Sie können die Farbpalette, die Typografie und die grundlegenden Abmessungen festlegen, die Sie von Anfang an verwenden werden. Dies hilft, Zeit auf der ganzen Linie zu sparen.

Wenn Sie Ihre Farben einrichten, benennen Sie sie einfach im Code-Editor und geben Sie HEX-, RGB- oder RGBa-Werte nach dem entsprechenden „=“-Zeichen an. Denken Sie daran, alle Variablen ganz oben in Ihrem Code zu halten.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Schritt 6 (Bonus): Relative Position hinzufügen.

Mit dem neuen Framer ist es sehr einfach, Ihren Prototyp reaktionsfähig zu halten. Sie können relative Positionen im Entwurfsmodus festlegen, wie unten gezeigt:

Hier ist eine kurze Liste von Eigenschaften, die zum Ausrichten und Berechnen der Ebenenposition direkt im Code nützlich sind. Sie können die erforderlichen Berechnungen durchführen, um Ebenenpositionen zu berechnen. Dies wird notwendig, wenn Sie später Interaktionen hinzufügen und Ihren Prototyp reaktionsfähig halten möchten.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Jetzt sind Sie eingerichtet – lassen Sie uns unser Projekt starten

Wir haben verschiedene Arten von Framer-Ebenen erstellt. Jetzt ist unser Interaktionsspielplatz startklar.

Endlich! Der langweilige Teil hat ein Ende. Jetzt ist es Zeit für etwas Interaktionsdesign.

Laden Sie hier den gesamten Prototyp herunter.

1. Erstellen einer Button-Feedback-Interaktion

Um eine Interaktion zu gestalten, brauchen wir einen Auslöser, um sie zu ermöglichen. Es kann fast alles sein: ein Antippen des Bildschirms, das Ende einer Animation, das Ende des Ladens eines Bildes oder der Beschleunigungsmesser Ihres Telefons.

Schritt 1: Erstellen des Ereignisses für die Interaktion.

Wir werden es einfach halten. Lassen Sie uns mit dem folgenden Befehl ein Schaltflächen-Feedback erstellen, wenn Sie darauf tippen:

 layerA.onTap (event, layer) ->

Framer hat gerade diese Codezeile für Sie geschrieben. Das bedeutet, dass etwas passiert, wenn Sie auf die Schaltflächenebene tippen.

Schritt 2: Animation zum Ereignis hinzufügen.

Lassen Sie uns nach diesem Auslöser eine Animation starten. Klicken Sie dazu im Ebenenbedienfeld auf den Punkt neben der Schaltflächenebene und wählen Sie dann Animation hinzufügen . Wenn Sie eine Animation hinzufügen, springt Framer in den Animationsbearbeitungsmodus. Sie können jeden Parameter der Ebene skalieren, verschieben, drehen oder ändern:

Framer fügte ein paar weitere Codezeilen hinzu. (Keine Sorge – Sie können Ihre Animation immer noch mit dem Animationsfenster bearbeiten.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Glückwünsche! Sie haben gerade Ihre erste Interaktion erstellt. Es funktioniert im Moment nur einmal, aber wir werden das beheben. Der Grund, warum Sie diese Animation nur einmal auslösen können, ist, dass nach Abschluss der Animation nichts passieren soll. Wir müssen alle Parameter nach dem Ende der ersten Animation so zurücksetzen, wie sie vorher waren.

Schritt 3: Animation zurücksetzen.

Fügen Sie ein weiteres Ereignis hinzu, fast so wie wir es zuvor getan haben. Der Unterschied besteht darin, dass wir nach einem Ereignis suchen, wenn die Animation endet:

Diesmal sieht der von Framer hinzugefügte Code folgendermaßen aus:

 button.onAnimationEnd (event, layer) ->

Wenn also die Animation auf der Schaltflächenebene abgeschlossen ist, können wir die nächste Animation hinzufügen, die die Parameter der Schaltflächenebene zurücksetzt:

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Das ist es! Wir haben jetzt funktionierendes Feedback nach einem Tippen auf unsere Schaltfläche.

2. Erstellen unterschiedlicher Zustände für Kartenschicht-Interaktionen

Ok, jetzt wissen Sie, wie man eine Animation entwirft und auslöst. Häufiger müssen Sie verschiedene Zustände einer Ebene entwerfen. Sie können mehrere Zustände derselben Ebene entwerfen, indem Sie nur einige Parameter wie Position, Größe oder Deckkraft ändern.

Schritt 1: Hinzufügen und Erstellen von Zuständen für eine Kartenebene.

Das Hinzufügen eines Zustands zur Karte ist fast dasselbe wie das Hinzufügen einer Animation. Sie müssen auf den Punkt neben der Kartenebene klicken und dann auf Status hinzufügen klicken. Jetzt sind Sie in den Zustandsbearbeitungsmodus gesprungen. Gestalten Sie es nach Ihren Wünschen:

Bitte achten Sie auf die Einrückung des Codes. Es sollte in der ersten Reihe beginnen.

Ich habe zwei verschiedene Zustände für meine Kartenebene entworfen:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Schritt 2: Ereignisse hinzufügen.

Es gibt nur einen weiteren Schritt, damit es funktioniert. Wir müssen ein Ereignis erstellen, um diese Zustände zu ändern.

 button.onTap -> card.stateCycle()

Dadurch werden alle Zustände der Ebene nacheinander geändert, jedes Mal, wenn Sie eine Aktion ausführen. In unserem Fall wechseln wir also jedes Mal, wenn wir auf die Schaltflächenebene tippen, in den Kartenstatus . Wenn Sie mehr Zustände erstellen und diese korrekt auslösen möchten, funktioniert das folgende Snippet viel besser für Sie:

 button.onTap -> card.stateSwitch("b")

Dieses Snippet ist nützlich, wenn Sie einen bestimmten Status der Ebene auslösen möchten.

Die letzte Anpassung, die ich an meinem Prototyp vorgenommen habe, ist eine Änderung der Animationsgeschwindigkeit und -kurve zwischen den Zuständen:

 card.animationOptions = curve: Spring time: 0.8 

Es gibt noch viel mehr, was Sie mit Ereignissen tun können, aber an diesem Punkt können Sie fast jede grundlegende Interaktion erstellen. Es ist eine der am besten geschriebenen Dokumentationen, die ich je gesehen habe.

Beschleunigung Ihrer Arbeit in Framer: Komponenten

Es ist an der Zeit, Komponenten hinzuzufügen, um Ihre Arbeit zu beschleunigen. Um von diesem Punkt an das Beste aus diesem Tutorial herauszuholen, laden Sie diesen Prototyp herunter.

1. Die erste Komponente: Scrollen

Ich habe unseren Prototyp etwas modifiziert. Jetzt haben wir eine Liste drin, aber ihre Höhe liegt über der Bildschirmauflösung. Wir müssen ein Scrolling erstellen, um die gesamte Liste im Prototyp sehen zu können.

Schritt 1: Ebenen erstellen und Komponenten einrichten.

Beginnen wir damit, eine Ebene zu erstellen, deren Höhe größer ist als unser Bildschirm. Markieren Sie diese Ebene als interaktiv und nennen Sie sie Liste . Wechseln Sie dann in den Codemodus. Wir werden diesmal nicht die praktische linke Seitenleiste verwenden. Lassen Sie uns unseren gesamten Bildschirm so einrichten, dass er scrollbar ist:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Dieser Code erstellt einen unsichtbaren Bereich mit der Breite und Höhe des aktuellen Geräts.

Schritt 2: Teilen Sie Framer mit, welche Ebenen Sie scrollen möchten.

Noch ist nichts passiert. Wir müssen Framer mitteilen, welche Ebenen scrollbar sein sollen. Dazu fügen wir unseren Listen -Layer zur Scroll-Komponente hinzu:

 list.parent = scroll.content

Schritt 3: Vertikales Scrollen sperren.

Wir dürfen jetzt scrollen, aber es passiert in alle Richtungen. Wir müssen den Bildlauf auf einer vertikalen Achse sperren:

 scroll.scrollHorizontal = false 

Beeindruckend! Sie haben in Ihrer App mit nur fünf Zeilen einfachen Codes eine Schriftrolle erstellt.

2. Die Seitenkomponente: Wischen von Bildschirm zu Bildschirm

Eine sehr beliebte Interaktion zum Wechseln zwischen Bildschirmen ist das Wischen. Die Idee hier ist der Bildlaufkomponente sehr ähnlich. Einen funktionierenden Prototypen können Sie hier herunterladen.

Schritt 1: Einrichten der Komponente.

Zuerst müssen wir im Code-Editor eine „Box“ erstellen, in der die Magie geschehen wird:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

An dieser Stelle sollten Sie mit dem gesamten Code hier vertraut sein. Es ist nur eine einfache Einrichtung der Komponente und ihres Bereichs. Jetzt müssen wir einige Ebenen zum Wischen erstellen.

Schritt 2: Ebenen erstellen

Wir werden unser erstes Prototyp-Design verwenden und es ein wenig modifizieren. Statt einem Kartenbild habe ich dieses Mal zwei Bilder importiert.

Zuerst müssen wir die Zeichenfläche zweimal breiter machen. Suchen Sie im Eigenschaftsfenster der Zeichenfläche die Breite und multiplizieren Sie sie mit zwei (oder addieren Sie einfach *2 ). Legen Sie die Karten nebeneinander, aktivieren Sie sie mit dem blauen Punkt und benennen Sie sie richtig: Karte1 und Karte2 .

Schritt 3: Ebenen zur Seitenkomponente hinzufügen.

Am Ende unseres Codes im Code-Editor müssen wir hinzufügen:

 card1.parent = page.content card2.parent = page.content

Das heißt, wir fügen diese Schichten der Komponente hinzu.

Die Seitenkomponente ist jetzt einsatzbereit!

Letztes Wort

Das war's Leute! Ich hoffe, Sie fanden dieses Framer-Tutorial hilfreich, um Ihre Reise mit dem leistungsstärksten Prototyping-Tool auf dem Markt zu beginnen. Außerdem sollten Sie erwägen, der Framer-Gruppe auf Facebook beizutreten. Es gibt eine riesige Community und sie sind hilfreich, wenn Sie anfangen.

Wenn Sie noch tiefer in Framer einsteigen möchten, lesen Sie die Framer-Dokumentation.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft