The Framer X-perience.

Im Test: die neue Interaction Design Software Framer X.

Framer X Logo

Auf den bekanntesten UX Design Blogs wird seit geraumer Zeit ein neues Software-Tool promoted. Als UX-Designer der Skillgroup Concept & Interaction bei Namics in Frankfurt, testen wir immer gerne neue Tools, um f√ľr unsere Kunden die digitalen Produkte bestm√∂glich umzusetzen. Somit auch dieses neue Werkzeug. Framer verspricht Design und Code zu vereinen und damit unbegrenzte M√∂glichkeiten in der weiteren Bearbeitung der Interaktionen und Flows zu erm√∂glichen. Im folgenden Artikel m√∂chte ich¬†mit euch¬†meine Erfahrungen mit diesem neuen Designprogramm teilen und euch einige Keyfacts sowie¬†Besonderheiten vorstellen. Was ist Framer X?

Framer X ist eine neue UX & Interaction Design Software, die mit aktuellen Tools, Funktionen und erweiterten Features im Code-Bereich neue Einsatzmöglichkeiten verspricht.

Sehr fortgeschrittene Interaktionen k√∂nnen im Vergleich zu anderen Design-Apps animiert werden. Hierzu f√ľhrt die neueste Version von Framer X (v14), die eingebaute Verwendung von React-Komponenten ein. Insbesondere dieses Code basierte Arbeiten verspricht neue Interactions, die realistische Prototypen f√ľr Apps und Websites verwirklichen lassen.¬†Designer & Entwickler kommen so dem High-Fidelity-Prototyping n√§her und¬†k√∂nnen somit den Kunden optimal √ľberzeugen.

Frames

Frames

Mit dem Frames Tool k√∂nnt ihr Screens und Interface Elemente erstellen. Es erm√∂glicht¬†euch ein responsives Layout zu entwerfen. Weitere voreingestellte Gr√∂√üen f√ľr beliebte Ger√§te sind vorhanden. So¬†entsprechen die Screens zum Beispiel den Standard Devices des iPhones und¬†PixelPhones. Von Watch, zu Tablet, Computer und TV Aufl√∂sungen existieren diverse Standard Frames.¬†

Einen Frame k√∂nnt ihr durch Dr√ľcken von F oder √ľber das Plus-Symbol links generieren. Jeder Frame, den ihr auf einen anderen platziert, wird automatisch als untergeordnetes Element der Basisebene angezeigt, so entsteht eine klare Hierarchie.¬†

Die Frames passen sich automatisch an, wenn ihr die Größe ändert. So könnt ihr sie zusammen mit UI-Elementen als Schaltflächen und Formen verwenden.

Stacks

Framer -Stacks
Play

Mit dem Stacks Tool lassen sich flexible Interfaces gestalten.¬†Besonders n√ľtzlich ist Stacks f√ľr euch, in Zusammenhang mit der Arbeit mit Rastern und Listen. Es funktioniert wie eine Darstellung von Flexbox- und CSS-Grid-Technologien. Die Verteilung und Ausrichtung in den Designs und Entw√ľrfen k√∂nnt ihr automatisch steuern. Indem ihr S dr√ľckt und dann eine Auswahl √ľber allen Elementen trefft, die darin platziert werden sollen, baut ihr einen Stack auf. Hierdurch wird es euch m√∂glich mehrere Elemente automatisch horizontal oder vertikal auszurichten. Auch die Abst√§nde zwischen den Elementen sind einfach anpassbar.

 

Linking

Framer -Linking
Play

Mit dem Link Tool kreiert ihr im Handumdrehen Interactions und Screen-to-Screen Flows. Wenn ihr L dr√ľckt k√∂nnt ihr zudem ein Element - beispielsweise einen Button - von einem Frame zum anderen Frame verbinden.

Scrolling

Framer -Scrolling
Play

Das Scrolling-Tool dient dazu scrollbaren Content zu generieren. Somit ermöglicht es euch diesen Inhalt anschließend horizontal oder vertikal im Prototyp zu scrollen.

Page

Framer -Page
Play

Wenn ihr swipeable Pages erstellen wollt ist das Page Tool die ideale Wahl. Ihr verlinkt einfach das Page Feld mit Bildern, um es anschließen in der Vorschau zu testen.

Graphics

Framer -Graphics

F√ľr Graphics und Icons verwendet ihr am besten die Graphic Tools. Hierzu wechselt ihr √ľber die Taste G in den Drawing Mode. In diesem stehen euch viele Standard Formen zur Verf√ľgung. Es lassen sich im Zeichen Modus mit dem Vektoren Tool zudem neue Grafiken entwickeln.¬†Somit verf√ľgt Framer X √ľber alle Funktionen, die ihr zum Zeichnen von benutzerdefinierten Symbolen bis hin zu komplizierten Illustrationen ben√∂tigt. Die Entw√ľrfe lassen sich mit dem erweiterten Pfad Editor verfeinern und von der Leinwand exportieren.

Components

Framer -Components

Components funktionieren √§hnlich wie die Symbole in Sketch. Mit ihnen lassen sich Master Components gestalten, die euch als Grundlage f√ľr die weiteren Instanzen dienen. Somit werden alle √Ąnderungen in der Master Component automatisch auf die Instanzen angewendet.

Im Gegensatz zu Sketch sind in Framer X diese Components zusätzlich interaktiv. Was es wiederum ermöglicht Aktionen auf weitere Instanzen zu vererben.

Framer -Code

Code Components:

Ein maßgebliches Feature in dem sich Framer X von anderen UX und IXD Tools unterscheidet ist die Anbindung eines Code Editors. Mit diesem optimiert ihr die Components mit Code und passt mit der Scriptsprache React das Design an. Mit den React-Components ist es uns Designern & Entwicklern in Framer X folglich möglich, noch näher an das High-Fidelity-Prototyping heran zu kommen. React Documentation:

Interaktive Komponenten sind Code-Komponenten, die in React geschrieben werden. Ihr rendert einfache HTML-Elemente und gestaltet mit CSS. Somit ist das Einrichten der ersten Code-Komponente leichter, als ihr denkt. Im Components Menu auf der linken Seitenleiste klickt ihr auf neue ‚ÄúComponent from Code‚ÄĚ und kreiert so ein Component. Dies verseht ihr ohne Leerzeichen mit einem neuen Namen und w√§hlt ‚ÄúCreate and Edit‚ÄĚ aus. Dieses neue Code-Component zieht ihr zum Beispiel als ‚ÄúHello World!‚ÄĚ von der linken Men√ľleiste in unser Framer Document. Hier dient ein ‚ÄúEdit Code‚ÄĚ Button auf dem rechten Property Panel zur direkten Bearbeitung im Editor.

Es macht daher Sinn sich zusätzlich Visual Studio Code als Editor zu installieren, um hier ergänzend mit Framer X zusammenzuarbeiten.

Framer -code.video
Play

Tutorial FramerX and Visual Studio Code: (React Components in Framer X, Building your first code component using npm libraries)

F√ľr die weitere Bearbeitung sind Grundkenntnisse in HTML / CSS / Javascript erforderlich. Wenn ihr eine Auffrischung oder weitere Informationen braucht kann ein Blick in das React Getting-Started-Handbuch¬†helfen.

Hier findet ihr ein weiteres¬†Tutorial des Designers Meng To. Es ist kostenlos und verdeutlicht sehr gut, wie man ein Projekt und den entsprechenden Editor aufsetzt. Ferner werden weitere Funktionen und detaillierte Anwendungen n√§her beleuchtet und alles sehr ausf√ľhrlich erkl√§rt. Anschauliche Videos erg√§nzen das Tutorial und geben euch zudem einen guten Einstieg in das erste Arbeiten mit Code-Components.

Store

Framer -Store

Der sogenannte ‚ÄúStore‚ÄĚ in Framer X bietet euch im Bereich der Design Software diverse zus√§tzliche Tools und ein breites Angebot an Components, die ihr sofort in euer aktuelles Framer Projekt ziehen k√∂nnt. Die Store Components reichen vom n√ľtzlichen Youtube Player Package, mit dem sich Videos live in den Prototyp integrieren lassen, bis hin zu interaktiven Toolbars mit Standard iOS Verhalten mit deren Hilfe sich nahezu Alles animieren l√§sst.

 

Framer -Store
Play

Hier, ein kurzes Video, welches euch den Store ein bisschen näher bringen soll.

Fazit

Warum solltet ihr Framer X nutzen?

Neben der Vielfalt des Stores und der Freiheit des Codes, haben mich die erweiterten und f√ľr Designer besonders sinnvollen Grundfunktionen √ľberzeugt. Auch die Animations und das Prototyping wird durch viele n√ľtzliche Funktionen und Tools ma√ügeblich unterst√ľtzt. Framer X ist intuitiv und daher schnell erlernbar. Besch√§ftigt man sich jedoch l√§nger mit dem Programm stellt sich heraus, dass der eigentlich positive Faktor der zahlreichen High-Fidelity-M√∂glichkeiten des Coding oftmals viel Zeit in Anspruch nimmt.

Wer von euch jedoch gerne mit einem brandneuen Tool User Experience und Interaction Design kreiert und das Coding nicht scheut, f√ľr den ist Framer X ein gro√üartiges Werkzeug. Besonders herausragend ist die Tatsache, dass durch Framer X erstmals die L√ľcke zwischen Designer und Entwickler geschlossen wird. Mit den Code-Komponenten sprechen Designer und Entwickler eine gemeinsame Sprache. Statt durch den Designer einen Entwurf zu erstellen, den dann der Entwickler in Code √ľbersetzt, ist dank Framer X bereits ein kleiner Teil des Codings erledigt. Desweiteren k√∂nnt ihr alle Designs in der Vorschau per Rechtsklick ausw√§hlen und inspizieren, sowie den Code direkt editieren und kopieren.

Nach R√ľcksprache mit Kollegen aus dem Bereich Frontend, muss ich zudem anmerken, dass diese den bestehenden Code in Framer X sinnvoll verwerten und weiterentwickeln k√∂nnen. Dies macht die Arbeit mit dem Programm besonders in Hinblick auf die √úbergabe zwischen Designer und Entwickler interessant. Dennoch wird durch Framer X die wertvolle Arbeit unserer Entwickler keineswegs hinf√§llig, da React in der projektspezifischen Aufbereitung durch die Frontend-Coder weiterentwickelt werden muss.

Den gr√∂√üten Vorteil von Framer X sehe ich in der Genese eines starken High-End-Prototypings. Alle UX und Interaction Design Patterns k√∂nnen bis ins kleinste Detail individuell angepasst werden. Die bekannten Experiences von iOS und Android im App-Bereich und Web k√∂nnen daher so gestaltet werden, dass der Kunde und User nachhaltig von dem Produkt und Concept √ľberzeugt wird.

Dieses realistische und erfolgsorientierte Einsatzszenario, das den Kunden und die optimale Umsetzung des Prototypings im Fokus hat, macht Framer X zu einem Design-Tool mit Zukunft.

 

Have fun & happy Prototyping!