The Framer X-perience

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.

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.

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.

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.

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.