Skip to content
Robin Koch
DE/EN
← All work

Case study 04Consumer apps

From design to code with Flutter

Designed complete app screens – and turned my own designs into working Flutter interfaces.

Client
Various mobile app projects
Timeline
2025–2026
Role
UI/UX designer & junior Flutter developer
Platform
Mobile apps · iOS & Android
Tools
Figma, Flutter, Dart

01 Challenge

Quality often gets lost between design and development. So across several app projects I learned both sides: designing – and bringing the design into code myself.

02 Insights

  1. Insight 01

    Details get lost in handoff

    Spacing, states and edge cases are where design and app most often drift apart.

  2. Insight 02

    Shared names save alignment

    When a component has a different name in Figma than the widget in code, every conversation starts with translation.

  3. Insight 03

    Code reveals what the design hides

    Long texts, small screens, empty states: on a real device, problems surface that stay invisible in Figma.

03 Decisions

  1. 1

    Design tokens as the shared source

    Colours, spacing and typography as tokens – variables in Figma, the theme in Flutter. No hand-typed values.

    ← From insight 01
  2. 2

    One component, one name

    Figma components and Flutter widgets share the same name and the same variants.

    ← From insight 02
  3. 3

    Test edge cases early in code

    I check long texts, small screens and empty states directly in the Flutter UI – before the design is final.

    ← From insight 03

04 User flow

My design-to-code workflow

  1. 01Wireframe
  2. 02Figma components
  3. 03Tokens & theme
  4. 04Flutter widgets
    ◇ Feasible?Align with developers ↩
  5. 05Test on device

05 Wireframes

Component in Figma360 × 720
ItemmdmdItemCard / compactAdd12
12Spacing as tokens, not numbers
Widget tree360 × 720
ScaffoldAppBarListViewItemCardItemCardAppImageAppButton2
2The same names as in Figma
Edge cases360 × 720
OverviewExploreContinue33
3Long texts and empty states checked right in code

↔ Drag to scroll

Simplified, generalised representation – no original screens, data or client content.

06 Design system

Simplified, generalised representation – no original screens, data or client content.

Colours

  • color/primary#A395FFAppColors.primary
  • color/surface#17133AAppColors.surface
  • color/on-surface#EFEDFFAppColors.onSurface
  • color/warning#FFB21EAppColors.warning
  • color/success#7FE3C8AppColors.success

Typography

  • text/headline · 28/34 · 700textTheme.headlineSmall
  • text/title · 20/28 · 600textTheme.titleLarge
  • text/body · 16/24 · 400textTheme.bodyLarge
  • text/label · 14/20 · 600textTheme.labelLarge

Spacing

  • 4
  • 8
  • 16
  • 24
  • 32
  • 48

Radius

20px

Components

FigmaFlutter
  • color/primaryAppColors.primary
  • spacing/md · 16AppSpacing.md
  • radius/lg · 20AppRadius.lg
  • text/titletextTheme.titleLarge
  • Button / primaryAppButton(variant: .primary)
primarysecondaryghost
AppButton(
  variant: AppButtonVariant.primary,
  label: 'Add',
  onPressed: onAdd,
)

// padding: AppSpacing.md
// radius:  AppRadius.lg

Every Figma token has a counterpart in the Flutter theme – same name, same value.

07 Approach

  1. 1

    Screens & components

    Complete app screens and reusable components for consistent designs.

  2. 2

    Wireframe to prototype

    Wireframes, mockups and interactive prototypes for a range of mobile apps.

  3. 3

    Flutter & Dart

    First hands-on app development: built my own UI designs as working Flutter interfaces.

  4. 4

    Checking feasibility

    Aligned with developers on what's technically feasible – and deepened design-to-code workflows.

08 Deliverables

  • Complete app screens
  • Reusable components
  • Flutter UIs built from my own designs
  • Design-to-code workflow

Happy to show more in person.

I don't share this client's name or original screens publicly. In a call I'll gladly walk you through designs, prototypes and decisions.

Book a call →

Next project — 01

Inspection app for technical field service