Aller au contenu

Design-in-code

Playground-driven design, spécifier tous les états dans le code avant le branchement API

Le playground est un artefact de design qui vit dans le codebase, pas à côté. Ni du prototypage jetable, ni du design-to-code généré : du design-in-code. Le designer y voit chaque écran dans tous ses états (défaut, chargement, vide, erreur, succès) en quelques secondes, sans backend, et produit le vrai code que le développeur branchera ensuite à l'API. La valeur n'est pas le prototype, c'est le contrat d'interface : tous les états sont spécifiés avant que le développeur écrive l'intégration.

Démonstration

Tous les états, à portée d'un clic

Le même écran, dans chacun de ses états. C'est ce que le designer manipule en local, sans backend. Montrer plutôt que décrire, parce que c'est le principe même de la méthode.

Studio Nord

Lille, France

Profil complet

Agence partenaire depuis 2019. Trois certifications actives, douze projets référencés.

Problème adressé

Dans la plupart des organisations produit, le design vit à côté du code : maquettes, prototypes cliquables, specs. Le passage du design vers le développement est une traduction, et chaque traduction perd de l'information. Même quand une discovery rigoureuse spécifie tous les états, la maquette reste une représentation statique : les transitions et les micro-interactions s'y approximent, et le développeur la ré-implémente dans un autre langage. La maquette et le code deviennent deux sources de vérité qui divergent. Le coût n'apparaît pas dans le handoff, il apparaît trois semaines plus tard en retravail.

Le design à côté du code

Le handoff reste une traduction

  1. Même complète, la spec reste une représentation statique.
  2. Le développeur la ré-implémente : transitions et micro-interactions s'approximent.
  3. Deux sources de vérité, la maquette et le code, divergent avec le temps.

États dessinés, à retraduire en code

défaut chargement vide erreur succès

Le coût n'apparaît pas au handoff. Il revient en retravail quand la traduction dérive.

Le design dans le code

La vue rendue est la spec

  1. Les états ne sont pas dessinés, ils sont implémentés et tournent.
  2. La vue du playground est celle qui part en prod : données, tokens, responsive réels.
  3. Une seule source de vérité. Le développeur branche l'API, il ne retraduit rien.

États exécutés, prêts pour le branchement

défaut chargement vide erreur succès

Le moment où la maquette et le code divergeaient disparaît.

Étapes

La méthode en 4 étapes

  1. Étape 1

    Observer le produit réel

    Pointer l'environnement local vers une préproduction, naviguer dans le produit existant, comprendre la structure des pages, les patterns d'interface et la nomenclature. Identifier les deux ou trois zones de données les plus structurantes à simuler en premier. Pas de construction à l'aveugle : on part de ce qui existe, pas d'une page blanche.

  2. Étape 2

    Simuler la couche de données

    Créer un mode de données factices sur les zones identifiées, en amont du client API. Les écrans lisent leurs données depuis un store intermédiaire alimentable sans toucher au backend. Chaque point de branchement futur est marqué explicitement, pour que le développeur sache où l'API viendra se connecter.

  3. Étape 3

    Implémenter tous les états avant le branchement

    Poser sur chaque écran un sélecteur qui bascule entre défaut, chargement, vide, erreur et succès, et implémenter le rendu réel de chacun. C'est l'étape qui produit le contrat : le développeur n'a plus à ré-implémenter les états depuis une représentation statique, ils sont déjà là, exécutés et validés. Le visuel avance indépendamment de l'API, c'est un découplage dans le temps.

  4. Étape 4

    Industrialiser et transmettre

    Documenter les conventions par dossier, formaliser les actions récurrentes, accompagner les premières applications côté développement et côté produit. La formalisation n'est pas un livrable de fin, c'est ce qui permet à la méthode de survivre au départ de son auteur et de rendre une nouvelle personne productive vite.

Conditions de réussite

Ce qui signe que ça marche

Contre-indications

Quand ne pas utiliser

Exemples d'application

Là où la méthode a vécu

Diagnostic

Fais ton diagnostic

Avant de déployer la méthode, mieux vaut savoir où en est ta squad. Réponds aux six conditions, le score se calcule en direct. Le playground est le résultat quand le score le permet, pas un livrable à copier tel quel.

  • 01 Découplage front/back Fondation

    Peut-on lancer le front avec une seule commande, sans monter le backend ?

    Découplage front/back
  • 02 Couche de données mockable Fondation

    Les composants lisent-ils depuis un store intermédiaire, ou directement depuis le client API ?

    Couche de données mockable
  • 03 Design system exploitable en code

    Existe-t-il une library de composants documentée que l'on peut importer ?

    Design system exploitable en code
  • 04 Workflow Git compatible

    Peut-on dédier un espace de branches au design, avec ses règles ?

    Workflow Git compatible
  • 05 Environnement de preview automatisé

    Les branches déploient-elles un aperçu visible par le produit et le développement, par URL ?

    Environnement de preview automatisé
  • 06 Point de contact technique

    Qui appelle-t-on quand ça ne compile pas ?

    Point de contact technique

Conditions réunies

0/6

Réponds aux six conditions, la lecture du score s'affiche ici.

Pour aller plus loin

Un contrat d’interface, pas un prototype

La confusion la plus fréquente est de ranger le playground avec les outils de prototypage. C’en est l’inverse. Un prototype sert à valider une intention puis à être jeté. Le playground produit le code réel du produit, celui que le développeur branchera, pas une représentation qu’il faudra retraduire.

La distinction avec le design-to-code compte tout autant. Le design-to-code génère du code à partir d’une maquette, avec le risque classique du code généré qui s’éloigne du codebase. Le playground-driven design travaille directement dans le codebase : c’est du design-in-code. Ce que le designer voit dans le playground est exactement ce qui partira en production, parce que c’est la vraie vue qui rend, pas une copie.

Ce qui fait la valeur n’est donc pas la vitesse de prototypage, c’est le contrat : au moment où le développeur ouvre l’écran pour brancher l’API, tous les états sont déjà implémentés et validés dans la vraie vue. Le moment habituel où il ré-implémente ces états depuis une maquette statique, et où l’écart se règle au coup par coup avec le design, disparaît.

La règle de souveraineté

La méthode tient sur une règle qui protège les deux métiers : le designer ne touche jamais à la logique backend ni aux appels API, le développeur ne reconstruit jamais le visuel depuis zéro. Chacun intervient sur sa couche.

Ce découplage est d’abord temporel. Le visuel et tous ses états avancent pendant que l’API n’existe pas encore, puis le branchement vient se poser sur une structure déjà complète. Ce n’est pas une prise de pouvoir du design sur l’engineering, c’est une réorganisation de l’ordre dans lequel les choses se décident. Nommer cette règle explicitement évite le malentendu le plus coûteux, celui qui ferait lire la méthode comme une intrusion plutôt que comme une collaboration mieux séquencée.

Les conditions qui rendent la méthode viable

Le piège serait de promettre une réplication identique partout. L’intention et la grille sont portables, l’implémentation reste spécifique à chaque stack. Avant de déployer la méthode, mieux vaut diagnostiquer six conditions, qui relèvent des pratiques de la squad plus que d’un aléa. Ce sont elles que le diagnostic plus haut donne à évaluer une à une.

Les deux premières sont des fondations : si le découplage front/back ou la couche mockable manquent, le playground n’est pas le premier chantier. Les autres sont des accélérateurs. La condition de preview automatisé est souvent celle qui manque, et ce n’est pas bloquant : le playground tourne en local sans elle, elle ne sert qu’à rendre le rendu visible sans récupérer la branche.

Poser ces six conditions sous forme de grille à remplir transforme la conversation. On ne promet pas une méthode qui casserait sur une stack non découplée, et on ne se fait pas refuser la méthode alors que le vrai blocage est une condition d’infrastructure nommable et budgétable.

Vendre la grille, pas l’outil

Trois principes aident à défendre la méthode au-delà de sa première application.

Auditer avant de demander change la nature de la demande. On n’arrive pas en réclamant des accès, on arrive avec une lecture du code et une proposition de collaboration informée. Montrer avant d’argumenter, ensuite : une démo de cinq minutes du playground pèse plus qu’un document de trois pages avec des cases à cocher. L’ordre qui fonctionne va de la démo vers le one-pager de leadership, puis vers la diffusion.

Le point le plus structurant est le dernier : c’est la grille de readiness qui s’installe sur la table à chaque nouvelle squad, pas le playground. Le playground est le résultat quand le score le permet, la grille est l’entrée de discussion. Ce déplacement protège des deux échecs symétriques, promettre une réplication qui se brise, ou se voir refuser la méthode pour une raison qui n’avait jamais été nommée.

Maturité
consolidated
Tags
design-engineering · design-systems · design-to-code · workflow
Dernière mise à jour
juin 2026

Écrit avec terquedad colombiana, dans le sud de la France.

Pas avec amour, avec du contexte et un agent patient.

Encore en train d'apprendre.

© 2026 Tous droits réservés.