Arbeiten mit Vorlagen
Kostenlose Figma-Vorlagen für mobile Apps können einem App-Design-Projekt einen sichtbaren Ausgangspunkt geben. Wählen Sie ein Layout, das zu Ihrer Aufgabe passt, ersetzen Sie die Beispielinhalte und prüfen Sie, ob der Ablauf weiterhin sinnvoll ist.
Ein vorlagenbasierter Weg beginnt mit einem bestehenden Bildschirmmuster; allgemeines App-Design beginnt mit dem Problem und wählt erst danach ein Muster. Der folgende Vergleich verdeutlicht diesen Unterschied.
Eine nützliche Vorlage bietet eine Bildschirmstruktur, ein wiederverwendbares visuelles Muster und eine konkrete Grundlage für Feedback. Die eigentliche Arbeit besteht darin, zu entscheiden, welche Teile bleiben sollen.
Sie möchten jemandem eine Buchungsidee zeigen, der anhand einer Funktionsliste allein kein Urteil fällen kann.
Passen Sie einen passenden Bildschirm an, damit sich das Gespräch auf Auswahlmöglichkeiten, Beschriftungen und den nächsten Schritt konzentriert – statt auf Dekoration.
Sie vergleichen zwei Möglichkeiten, einen mobilen Bezahlvorgang zu gestalten.
Nutzen Sie eine Vorlage als eine mögliche Lösung und beurteilen Sie ihre visuelle Hierarchie anhand der Aufgabe, statt sie als fertige Antwort zu betrachten.
Ein Beispielbildschirm sieht ausgereift aus, aber seine Navigation passt möglicherweise nicht zum vorgesehenen Gerätekontext.
Behalte die nützliche Inhaltsstruktur bei und überprüfe zugleich Plattformkonventionen, Abstände und Touch-Ziele.
Du kannst einen Bildschirm bearbeiten, bist aber unsicher, was du zuerst ändern sollst.
Gehe von der Hauptaufgabe der Nutzer aus und arbeite dich in einer bewussten Reihenfolge zu Beschriftungen, Zuständen und visueller Gewichtung vor.
Betrachte die Vorlage als Entwurf, den du hinterfragen solltest, nicht als Abkürzung, um Produktentscheidungen zu umgehen.
Halte fest, wer den Bildschirm nutzt und was diese Person erreichen muss. Für das App-Design gibt „einen Termin buchen“ eine klarere Richtung vor als „einen modernen Startbildschirm gestalten“.
Suche nach einer Vorlage mit einer ähnlichen Aufgabe und Inhaltshierarchie. Prüfe die Nutzungsbedingungen und Bearbeitbarkeit, bevor du Zeit investierst; eine optische Übereinstimmung allein reicht nicht aus.
Füge realistische Beschriftungen und Inhalte ein. Verfolge die primäre Aktion bis zum nächsten Bildschirm und prüfe dann fehlende Zustände wie Fehler, leere Ergebnisse und Bestätigungen.
Nutze diese Gegenüberstellung, um zu entscheiden, ob ein vorhandenes mobiles Layout bei deiner konkreten App-Design-Aufgabe hilft.
| Figma-Vorlage als Ausgangspunkt | Allgemeiner Ausgangspunkt für das App-Design | |
|---|---|---|
| Erste Entscheidung | Welcher vorhandene Bildschirm passt am besten zur Aufgabe? | Was müssen die Nutzer erreichen? |
| Ausgangsmaterial | Ein vorhandenes Layout, sofern die erstellende Person es zur Nutzung bereitstellt | Eine Aufgabenbeschreibung, ein grober Ablauf oder eine leere Arbeitsfläche |
| Anfänglicher Vorteil | Eine sichtbare Hierarchie, die bewertet und geändert werden kann | Die Freiheit, die Struktur festzulegen, bevor sie gestaltet wird |
| Hauptrisiko | Ansprechende Elemente beizubehalten, die die Aufgabe nicht unterstützen | Zu viel Zeit mit der Entscheidung zu verbringen, wo man anfangen soll |
| Arbeit an den Inhalten | Beispieltexte, Bilder und Daten ersetzen | Den Bedarf an Inhalten festlegen, bevor sie angeordnet werden |
| Arbeit am Ablauf | Prüfen, was vor und nach dem bereitgestellten Bildschirm geschieht | Den Ablauf skizzieren, bevor einzelne Bildschirme verfeinert werden |
| Frage für die Überprüfung | Was sollte entfernt oder angepasst werden? | Welche Struktur sollte geschaffen werden? |
Dieser Leitfaden bezieht sich auf die Arbeit mit Figma; App Design ist nicht Figma und stellt keine Figma-Vorlagenbibliothek bereit oder überprüft eine solche.
Diese Seite stellt keine bestimmte Figma-Datei bereit und bestätigt nicht, dass eine Datei von Drittanbietern weiterhin verfügbar ist.
Was Sie stattdessen tun können
Prüfen Sie die Quelle jeder Vorlage, die Sie finden, einschließlich der aktuell geltenden Nutzungsbedingungen.
Ein für eine andere App erstellter Bildschirm kann fehlende Entscheidungen über Ihre Nutzer, Inhalte und Navigation verdecken.
Was Sie stattdessen tun sollten
Vergleichen Sie jedes auffällige Element mit der Aufgabe, die Sie notiert haben, bevor Sie es übernehmen.
Auch eine als kostenlos bezeichnete Vorlage kann Bedingungen für die Namensnennung, Weiterverbreitung oder kommerzielle Nutzung haben.
Was Sie stattdessen tun sollten
Lesen Sie die Lizenz der erstellenden Person für genau die Datei, die Sie anpassen möchten.
Ein ausgefeilter Bildschirm zeigt nicht, ob jemand den Ablauf versteht oder die Aufgabe erledigen kann.
Was Sie stattdessen tun sollten
Gehen Sie realistische Szenarien durch und beobachten Sie, bei welchen Bezeichnungen oder nächsten Schritten Unsicherheit aufkommt.
Beschreiben Sie die Aufgabe der Nutzer, die benötigten Bildschirminhalte und die anschließende Aktion. Ob Sie eine externe Vorlage anpassen oder ohne Vorlage beginnen: Diese Entscheidungen geben Ihrer App-Design-Arbeit eine solidere Grundlage.
Suchen Sie nach Vorlagen, die von ihren Erstellern geteilt wurden, und prüfen Sie die aktuellen Zugangs- und Nutzungsbedingungen der jeweiligen Quelle. Diese Seite erklärt, wie Sie eine Vorlage bewerten und anpassen; sie ist kein Verzeichnis für Figma-Vorlagen.
Das hängt von der Lizenz der jeweiligen Datei ab, nicht vom Wort „kostenlos“ in einem Suchergebnis. Prüfen Sie die Bedingungen für kommerzielle Nutzung, Namensnennung und Weiterverbreitung, bevor Sie die Vorlage in ein Produkt übernehmen.
Ein vorhandener Bildschirm kann es erleichtern, Hierarchie und Abstände zu beurteilen. Anfänger müssen dennoch Beispielinhalte ersetzen, den vorgesehenen Ablauf verstehen und Elemente hinterfragen, die ihrer App nicht dienen.
Notieren Sie zuerst die Hauptaufgabe und eine grobe Abfolge der Bildschirme. Wählen Sie dann eine Vorlage, die diese Abfolge unterstützt, statt das Produkt an ein bequemes Layout anzupassen.
Auf dieser Seite wird weder eine Figma-Datei noch eine Vorlagenbibliothek zugesagt, und App Design ist nicht mit Figma verbunden. Nutzen Sie diese Hinweise, um einen vorlagenbasierten Arbeitsablauf zu planen, und prüfen Sie Ressourcen von Drittanbietern an ihrer Originalquelle.