Newsletter heise-Bot heise-Bot

Klickbare Prototypen mit Figma: So gestalten sie Webseiten und Apps

Wer ein digitales Produkt benutzt, erwartet, dass es ansprechend und intuitiv zu bedienen ist. Die UI/UX-Design-Software Figma bietet alles fürs Konzepten.

Artikel verschenken
In Pocket speichern vorlesen Druckansicht
,
Lesezeit: 49 Min.
Mac & i
Von
  • Indra Burkart
Inhaltsverzeichnis

Figma ist mittlerweile der Marktführer für die Gestaltung von Bedienoberflächen und Interaktionen. Im September 2022 wurde die Übernahme durch Adobe angekündigt – Figma soll aber eigenständig bleiben. Die Macher haben früh erkannt, dass es für eine moderne Arbeitsweise essenziell ist, mit mehreren Mitstreitern gleichzeitig an einem Design zu arbeiten.

Hinzu kommen ein großer Funktionsumfang und die Plattformunabhängigkeit: Figma ist komplett webbasiert und läuft somit im Browser. Es gibt zwar eine Desktop-Applikation, doch die ist im Prinzip nur ein separater Browser. Um mit Figma zu arbeiten, benötigen Sie deshalb eine stabile Internetverbindung. Sie können zwar auch offline an bereits erstellten Dateien weiterarbeiten, jedoch gibt es einige Einschränkungen, wenn Sie Bibliotheken oder Plug-ins nutzen oder mit anderen zusammenarbeiten möchten. Schöne Nebeneffekte eines solchen Webdienstes sind die automatische Speicherung, eine Versionshistorie und dass man sich nicht um Updates kümmern muss.

Mehr zu Webentwicklung

Wenn Sie ein Produkt wie einen Webshop entwickeln, ist es wichtig, dass Sie sich vorher über die Interaktion und die visuelle Gestaltung Gedanken machen und diese definieren. Mit Figma kann man einen sogenannten Klickdummy oder auch Prototyp erstellen, also eine Simulation des späteren Produkts – für sich selbst, für potenzielle Kunden oder den Chef. Sie können dabei festlegen, was bei einem Klick passieren soll; eine komplexe Logik oder Programmierung lässt sich aber nicht abbilden. Der Hauptzweck eines Klickdummys ist, Ihr Konzept mithilfe von Nutzern zu testen. Im Folgenden zeigen wir, wie auf Basis von Figma der Prototyp eines Onlineshops für Apple-Hardware entsteht. Die gezeigten Funktionen lassen sich natürlich auf jedes andere digitale Produkt wie Smartphone-oder Desktop-Apps übertragen. Über den Webcode am Ende des Artikels können Sie sich die Figma-Datei zu diesem Artikel auch herunterladen.

Das war die Leseprobe unseres heise-Plus-Artikels "Klickbare Prototypen mit Figma: So gestalten sie Webseiten und Apps". Mit einem heise-Plus-Abo können sie den ganzen Artikel lesen und anhören.

Immer mehr Wissen. Das digitale Abo für IT und Technik.

Immer mehr Wissen. Das digitale Abo für IT und Technik.

Spiele

nach oben
Alle Angebote
Newsletter heise-Bot heise-Bot