Skip to content
Learni
View all tutorials
Design & Développement

How to Design Advanced User Flows in 2026

18 minADVANCED
User FlowXStateUX Avancé
Lire en français

Introduction

Advanced user flows go beyond simple linear wireframes. They incorporate conditional branches, persistent states, and multi-device interactions. In 2026, teams require modeled flows that sync directly with code. This approach reduces gaps between design and development while improving UX decision traceability. We will build a complete system combining executable diagrams and application logic.

Prerequisites

  • Node.js 20+
  • Solid knowledge of TypeScript and React
  • Understanding of state machines (XState)
  • Mermaid CLI or compatible editor
  • Figma or advanced prototyping tool

Project Initialization

terminal
npm create vite@latest user-flows-2026 -- --template react-ts
cd user-flows-2026
npm install @xstate/react xstate mermaid

We initialize a React TypeScript project and install XState to manage flow states along with Mermaid for executable diagram visualization.

Flow Definition with Mermaid

flows/onboarding.mmd
flowchart TD
    A[Landing] -->|non authentifié| B[Login]
    B --> C{Email vérifié ?}
    C -->|oui| D[Dashboard]
    C -->|non| E[Vérification OTP]
    E --> D
    D --> F[Onboarding complet]

This Mermaid diagram represents the onboarding flow with a conditional branch. It can be rendered directly in the application or exported for documentation.

XState Flow Configuration

flows/onboardingMachine.ts
import { createMachine } from 'xstate';

export const onboardingMachine = createMachine({
  id: 'onboarding',
  initial: 'landing',
  states: {
    landing: { on: { LOGIN: 'login' } },
    login: { on: { VERIFY: 'verification', SUCCESS: 'dashboard' } },
    verification: { on: { SUCCESS: 'dashboard' } },
    dashboard: { type: 'final' }
  }
});

The state machine formalizes the Mermaid diagram exactly. Each transition corresponds to a real user action and can be tested automatically.

React Flow Integration

components/OnboardingFlow.tsx
import { useMachine } from '@xstate/react';
import { onboardingMachine } from '../flows/onboardingMachine';

export const OnboardingFlow = () => {
  const [state, send] = useMachine(onboardingMachine);
  return (
    <div>
      {state.value === 'landing' && <button onClick={() => send({ type: 'LOGIN' })}>Commencer</button>}
      {state.value === 'dashboard' && <p>Accès autorisé</p>}
    </div>
  );
};

The useMachine hook connects the flow to the interface. Transitions are triggered by user interactions and stay synchronized with the diagram.

Automated Export and Synchronization

scripts/syncFlows.ts
import { writeFileSync } from 'fs';
import { onboardingMachine } from '../flows/onboardingMachine';

const mermaid = `flowchart TD
  ...`; // generated from the machine
writeFileSync('docs/onboarding.mmd', mermaid);

A simple script converts the XState definition to Mermaid to keep documentation automatically up to date during deployments.

Best Practices

  • Always synchronize the visual diagram with the source state machine
  • Name states and events explicitly using business terminology
  • Add coverage tests for each critical transition
  • Version flows like source code
  • Use guards and actions to avoid logic in UI components

Common Mistakes to Avoid

  • Creating diagrams that no longer match the code after the first iteration
  • Forgetting error and recovery states in the flow
  • Using implicit transitions without explicit events
  • Neglecting state machine performance on long journeys

Going Further

Deepen your modeling of complex flows with our Learni training courses dedicated to UX architecture and state machines.