Case Study 04Consumer Apps
Vom Design zum Code mit Flutter
Komplette App-Screens gestaltet – und eigene Designs selbst in funktionierende Flutter-Oberflächen umgesetzt.
- Kunde
- Diverse Mobile-App-Projekte
- Zeitraum
- 2025 – 2026
- Rolle
- UI/UX Designer & Junior Flutter Developer
- Plattform
- Mobile Apps · iOS & Android
- Werkzeuge
- Figma, Flutter, Dart
01 Ausgangslage
Zwischen Design und Entwicklung geht oft Qualität verloren. In mehreren App-Projekten habe ich deshalb beide Seiten kennengelernt: gestalten – und das Gestaltete selbst in Code bringen.
02 Erkenntnisse
- Erkenntnis 01
Bei der Übergabe gehen Details verloren
Abstände, Zustände und Grenzfälle sind die Stellen, an denen Design und App am häufigsten auseinanderlaufen.
- Erkenntnis 02
Gleiche Namen sparen Abstimmung
Wenn eine Komponente in Figma anders heißt als das Widget im Code, beginnt jede Abstimmung mit Übersetzen.
- Erkenntnis 03
Code zeigt, was das Design verschweigt
Lange Texte, kleine Displays, leere Zustände: Im echten Gerät tauchen Probleme auf, die in Figma unsichtbar bleiben.
03 Entscheidungen
- 1← Aus Erkenntnis 01
Design Tokens als gemeinsame Quelle
Farben, Abstände und Typografie als Tokens – in Figma als Variablen, in Flutter im Theme. Keine Werte von Hand.
- 2← Aus Erkenntnis 02
Eine Komponente, ein Name
Figma-Komponenten und Flutter-Widgets tragen denselben Namen und dieselben Varianten.
- 3← Aus Erkenntnis 03
Grenzfälle früh im Code testen
Lange Texte, kleine Displays und leere Zustände prüfe ich direkt in der Flutter-Oberfläche – bevor das Design final ist.
04 User Flow
Mein Design-to-Code-Workflow
- 01Wireframe
- 02Figma-Komponenten
- 03Tokens & Theme
- 04Flutter-Widgets◇ Technisch machbar?Mit Entwicklern abstimmen ↩
- 05Test auf dem Gerät
05 Wireframes
↔ Zum Scrollen ziehen
Vereinfachte, verallgemeinerte Darstellung – keine Original-Screens, Daten oder Kundeninhalte.
06 Design-System
Vereinfachte, verallgemeinerte Darstellung – keine Original-Screens, Daten oder Kundeninhalte.
Farben
- color/primary#A395FFAppColors.primary
- color/surface#17133AAppColors.surface
- color/on-surface#EFEDFFAppColors.onSurface
- color/warning#FFB21EAppColors.warning
- color/success#7FE3C8AppColors.success
Typografie
- text/headline · 28/34 · 700textTheme.headlineSmall
- text/title · 20/28 · 600textTheme.titleLarge
- text/body · 16/24 · 400textTheme.bodyLarge
- text/label · 14/20 · 600textTheme.labelLarge
Abstände
- 4
- 8
- 16
- 24
- 32
- 48
Radius
Komponenten
- color/primaryAppColors.primary
- spacing/md · 16AppSpacing.md
- radius/lg · 20AppRadius.lg
- text/titletextTheme.titleLarge
- Button / primaryAppButton(variant: .primary)
AppButton(
variant: AppButtonVariant.primary,
label: 'Hinzufügen',
onPressed: onAdd,
)
// padding: AppSpacing.md
// radius: AppRadius.lgJeder Figma-Token hat ein Gegenstück im Flutter-Theme – gleicher Name, gleicher Wert.
07 Vorgehen
- 1
Screens & Komponenten
Komplette App-Screens und wiederverwendbare Komponenten für konsistente Designs.
- 2
Wireframe bis Prototyp
Wireframes, Mockups und interaktive Prototypen für verschiedene mobile Anwendungen.
- 3
Flutter & Dart
Erste praktische Erfahrung in der App-Entwicklung: eigene UI-Designs als funktionierende Flutter-Oberflächen umgesetzt.
- 4
Machbarkeit prüfen
Mit Entwicklern abgestimmt, was technisch umsetzbar ist – und Design-to-Code-Workflows vertieft.
08 Lieferumfang
- Komplette App-Screens
- Wiederverwendbare Komponenten
- Flutter-Oberflächen aus eigenen Designs
- Design-to-Code-Workflow
Mehr zeige ich gern persönlich.
Kundenname und Original-Screens dieses Projekts teile ich nicht öffentlich. Im Gespräch führe ich dich gern durch Entwürfe, Prototypen und Entscheidungen.