App mit Figma gestalten

In dieser Anleitung lernen Schüler*innen Schritt für Schritt, wie sie eine eigene App in Figma entwerfen. Die App kann aus dem Gesundheitsbereich stammen, oder auch aus anderen Branchen – z. B. Bildung, Finanzen oder Freizeit. Wichtig: Erstelle maximal **3 Screens**, damit die App übersichtlich bleibt.

Arbeitsauftrag

Gestalte mit Figma einen klickbaren App-Prototyp mit maximal 3 Screens.

Entwickle eine klare App-Idee
Definiere 3 Hauptfunktionen
Gestalte maximal 3 übersichtliche Screens
Präsentiere deine App-Idee und den Prototyp

Bewertungskriterien

Kriterium	Beschreibung	Punkte
App-Idee	Idee ist klar, sinnvoll und zur Zielgruppe passend	0–4
Funktionen	Max. 3 Hauptfunktionen sind verständlich umgesetzt	0–4
Design	Übersichtlich, gut lesbar, passende Farben	0–4
Interaktivität	Navigation zwischen Screens funktioniert	0–4
Präsentation	App verständlich erklärt (Name, Idee, Funktionen)	0–4
Gesamt		/20

Schritt 1: Ideenfindung

Überlege, welche App du erstellen möchtest. Beispiele aus dem Gesundheitsbereich:

Fitness-Tracker
Ernährungs-App
Mental-Health-App (Stressmanagement, Meditation)
Wasser-Tracker
Einarbeitungs- & Lernpfad-App (Onboarding, Checklisten, „Was muss ich können?“)
Weiterbildungs- & Zertifikats-Tracker (Kurse, Schulungen, Nachweise, Erinnerungen)
Feedback- & Reflexions-App für den Arbeitsalltag (kurze Wochenrückblicke, Lernnotizen, Entwicklungsgespräche vorbereiten)

Ideen können auch aus anderen Bereichen kommen, z. B. Lern-Apps, Budgetplaner oder Aufgaben-Tracker.

Tipp: Wähle 3 Hauptfunktionen für deine App, z. B. Schritte zählen, Tagesziele setzen, Erinnerungen.

Idee finden
Problem erkennen & App-Idee wählen

Skizzieren
Ansichten, Funktionen, Ablauf planen

Umsetzen
App programmieren & testen

💡 Für die Ideenfindung kannst du diese Online‑Plattformen nutzen, um kreativ zu brainstormen, Mindmaps zu erstellen oder Ideen visuell zu strukturieren:

🧠 Miro – Online‑Brainstorming & Whiteboard: unendliche Arbeitsfläche, Sticky Notes, Mindmaps und Vorlagen für Brainstorming und Konzeptplanung. Kostenlos nutzbar nach Registrierung. :contentReference[oaicite:1]{index=1}
🗺️ Miro Mind Map Maker: visuelles Mindmapping, um Gedanken zu ordnen und Ideen miteinander zu verknüpfen – perfekt für erste App‑Konzepte. :contentReference[oaicite:2]{index=2}
🧩 MindMeister – Brainstorming mit Mindmaps: Mindmaps erstellen und Ideen strukturieren – solo oder im Team. :contentReference[oaicite:3]{index=3}
📝 Collaboard – Visuelle Ideensammlung: Online‑Pinnwand für Brainstorming, Notizen, Linien und Gruppenarbeit. :contentReference[oaicite:4]{index=4}

📌 Tipps für die Ideenphase:

Starte mit einer zentralen Frage wie: „Was soll meine App lösen?“
Schreibe alle Ideen auf — auch wenn sie zunächst ungewöhnlich erscheinen.
Ordne die Ideen in Kategorien (z. B. Funktion, Zielgruppe, Nutzen).
Fokussiere dich am Ende auf die **besten 3 Ideen**, bevor du sie in Figma visualisierst.

Schritt 2: Figma einrichten

Gehe auf Figma.com und melde dich an oder registriere dich.
Klicke auf “Neues Datei” → öffnet ein leeres Projekt.
Wähle auf der linken Seite das Frame-Tool (F) → z. B. iPhone 14 als Bildschirmgröße.

Schritt 3: Wireframe erstellen

Zeichne die **3 wichtigsten Bildschirme** deiner App, z. B.:

Startbildschirm (Logo, Login/Registrierung)
Dashboard (Übersicht über Daten)
Detailbildschirm (z. B. Schritte, Wasser, Ernährung)

Nutze rechteckige Blöcke, Kreise und Textfelder, um Buttons, Icons und Grafiken zu platzieren. Farben, Icons und Bilder kommen im nächsten Schritt.

Schritt 4: Design ausarbeiten

Gestalte die Screens ansprechend, nutze Schriftarten und Farben passend zum Thema. Du kannst z. B. beruhigende Grün- und Blautöne wählen.

Buttons: Rechteck + Text → Gruppieren (Rechtsklick → Group).
Icons: Nutze direkt aus Font Awesome, die bereits eingebunden sind.
Bilder: Direkt per Drag & Drop aus deinem Computer einfügen.

Tipp: Verwende maximal 3 Screens, damit dein Prototyp übersichtlich bleibt.

Schritt 5: Interaktivität hinzufügen

Oben rechts auf Prototyp klicken.
Button auswählen → blauen Pfeil zum Zielbildschirm ziehen.
Übergang wählen: z. B. “On Click → Navigate To”.
Prototyp testen: oben rechts auf Play klicken.

Schritt 6: Feedback einholen

Zeige dein Projekt Mitschüler*innen oder Lehrer*innen.
Fragen: Ist die App übersichtlich? Sind die Buttons verständlich? Fehlt etwas?
Design und Navigation basierend auf Feedback anpassen.

Schritt 7: Präsentation

Füge kurze Beschreibungen zu jedem Bildschirm hinzu.
Link zum Prototyp bereitstellen, den andere öffnen können.
Stelle die App-Idee vor: Name, Zielgruppe, Hauptfunktionen, Besonderheiten.

Extra-Tipps für Schüler

Figma-Komponenten verwenden, wenn Buttons oder Icons mehrfach vorkommen.
Auto Layout nutzen, um Listen oder Tabellen einfacher zu erstellen.
Farben und Schriftarten testen, aber auf Lesbarkeit achten.
Kleine Animationen (Hover-Effekte) machen die App spannender.