Tipps, Tricks, Tutorials, Design und Praxis

Ein Einstieg ins Prototyping mit Figma

29.08.2019

figma

In wenigen Klicks zum «fast» fertigen Design

Wer Google Docs nutzt, weiss die Vorteile der Kollaboration in Echtzeit und das Verwalten von Dateiversionen zu schätzen. Figma hat diese Features neben vielen anderen in ein Design-Tool verpackt. David Maissen

Wer kann sich noch an das Erstellen von Maquetten erinnern? Mit Wachs wurden Papierstreifen mit Text- und Grafikelementen auf den Satzspiegel geklebt bzw. montiert, um das künftige Layout vereinfacht darstellen zu können. Prototyping-Tools im Bereich des Designs verfolgen eine ähnliche Idee, natürlich ohne Wachs, dafür mit vielen inter-aktiven Features, welche die Arbeit effizien-ter machen.

Figma – eine Browserlösung zur Kollaboration
Lange galt Sketch als das Tool für User Interface Design. Mittlerweile gibt es in diesem Bereich auch andere grosse Namen wie Adobe XD, Invision oder natürlich Figma, welches ich in diesem Artikel näher vorstellen möchte. Die erste Version von Figma wurde 2015 veröffentlicht. Das Tool besticht durch ein modernes cloudbasiertes User Interface und ermöglicht das parallele Bearbeiten im Team. Arbeiten mehrere Perso-nen aktiv am Projekt, sehen alle Teammitglieder die Änderungen in Echtzeit. Durch zahlreiche Werkzeuge wie den Pen oderdas Textwerkzeug lässt sich das Tool auch für komplexes Grafikdesign «entfremden».

Aller Anfang ist leicht!

Wer bereits Erfahrungen mit Grafiktools gemacht hat, wird sich mit dem Einstieg in Figma nicht schwer tun. Auf der Seite figma.com kann man als Einzelanwender einen kostenlosen Account erstellen oder sich beispielsweise mit seinem Google-Account verifizieren. Die Oberfläche von Figma ist schlicht gehalten und bietet eine Übersicht über aktuelle Projekte und Teams. Eine wichtige Funktion von Figma ist das Erstellen von Teams, um Projekte kollaborativ bearbeiten zu können. Die kostenlose Version ist auf Teamgrössen bis maximal zwei Personen (Editors) und drei Projekte beschränkt. Teamkollegen können ganz einfach via E-Mail ins Team eingeladen werden. Innerhalb eines Teams können Projekte und Files erstellt werden.

Frames, Ebenen und Komponenten

Wie jedes Grafikprogramm bietet auch Figma eine weisse, reine «Zeichenfläche», sobald man ein neues File erstellt hat. Figma unterscheidet zwischen Pages und Frames. Auf einer Seite können beliebig viele Frames erstellt werden. Für Frames gibt es vordefinierte Standardgrössen beispielsweise für Smartphones, Tablets oder verschiedene Desktops. Ein Frame definiert also quasi die Grenzen eines Screens und ist somit die Gestaltungsfläche für das Design.

Auf einem Frame können nun beliebig viele Elemente platziert bzw. erstellt werden. Es stehen Werkzeuge für vordefinierte geometrische Formen sowie Freihandwerkzeuge zur Verfügung. Wer Bézierkurven von Illustrator schätzen gelernt hat, findet dieses Werkzeug auch in Figma als Pen wieder. Alle Werkzeuge befinden sich im linken Bereich der Navigationsleiste.

Um Elemente zu ordnen, kann man diese gruppieren und individuell benennen. ­Zudem stellt Figma die Funktion der sogenannten Komponenten zur Verfügung. Komponenten dienen dazu, sich wiederholende Elemente wie zum Beispiel das Menu einer App zusammenzufassen, um sie im Dokument mehrfach verwenden zu können. Platziert man nun eine Komponente mehrmals und ändert die Hauptkomponente, werden alle abhängigen Elemente ebenfalls angepasst. Alle Komponenten sind im Panel Assets ersichtlich.

Die Menu-Palette

Im rechten Bereich befindet sich ein Bedienfeld, welches alle wichtigen Optionen enthält. Das intelligente Menu passt sich anhand der selektierten Objekte an, so werden bei Texten beispielsweise zusätzlich Formatierungsoptionen eingeblendet.
Neben Ausrichtungsoptionen, Effekten und Fülloptionen, welche für die jeweiligen Elemente definiert werden können, beinhaltet das Menu auch eine Export-Funktion, um Screens als Bilddateien zu exportieren.

Ein Grid für Ordnung

Selektiert man einen Frame, kann im Menu-­Bedienfeld das sogenannte Layout Grid ­definiert werden. Es kann sowohl der Rasterabstand wie auch die Farbe individuell angepasst werden. Zusätzlich stehen Hilfslinien zur Verfügung, welche über das aufklappbare Menu im rechten oberen Bereich eingeblendet werden können. Das Prinzip der Hilfslinien sollte für alle selbsterklärend sein, welche bereits mit anderen bekannten Grafik- oder Layoutprogrammen gearbeitet haben.

Dem Design Leben einhauchen

Ein Prototyp soll einer vereinfachten Darstellung des künftigen Designs entsprechen. Apps oder Webseiten sind nicht statisch und verfügen über scrollbare Fenster sowie Links zu anderen Seiten. Wie auch andere Tools bietet Figma diverse Funktionen, um einem Prototypen Interaktivität zu verleihen. Diese stehen in der Menu-Palette unter Prototype zur Verfügung.

Um beispielsweise zwei Frames miteinander zu verbinden, selektiert man das entsprechende Element, welches über den Link verfügen soll, klickt auf den sichtbaren Kreis und zieht mit gedrückter Maustaste die Verbindung zum gewünschten Ziel-Frame auf. Über den Play-Button im rechten Bereich der Menuleiste aktiviert man den Präsentationsmodus. Der Prototyp kann nun wie eine gewöhnliche Webseite oder eine App bedient und erkundet werden.

Fazit

Figma bietet vor allem im Bereich der Kollaboration ein starkes Werkzeug. Durch die Browserlösung müssen Files nicht mehr heruntergeladen und später wieder geteilt werden. Die integrierte Funktion des interaktiven Prototypings macht den Export von Screens hinfällig und ermöglicht so das Arbeiten in einem einzigen Tool. Wer nicht im Browser arbeiten möchte, kann sich alterna­tiv die zur Verfügung stehenden Clients für Mac oder Windows herunterladen.

Für den Einstieg ins Prototyping bietet Figma die nötigen Werkzeuge und hält auch für versierte Benutzer einige tolle Funktionen bereit. Durch fortlaufende Updates wächst die Anzahl der Features zudem ­stetig weiter.

Weiter zum Artikel

Quelle / Autor:
Publiher / Guido Köhler
Thema: Prototyping mit Figma

HDS Portalpartner
HDS Portalpartner
PBU_Logo_weiss
HDS Portalpartner
AXA_Company_logo_rgb_Graustufen
HDS Portalpartner
callas_grau
HDS Portalpartner
Die Satzkiste Stuttgart - Startseite