Réflexions et impressions sur Claude Design

• Avec le renforcement de la systématisation du design, Figma a développé une structure complexe centrée sur ses propres unités comme les composants, styles, variables et props, créant ainsi une distance avec le support réel d’implémentation
• Le format propriétaire de Figma a été naturellement exclu des données d’entraînement des LLM, et à l’ère des agents, avec la montée des outils fondés sur le code, la source of truth du design se déplace à nouveau vers le code
• Claude Design est un support honnête qui manipule directement HTML/JS ; au lieu de passer par une approximation avec perte (lossy approximation) du code comme Figma, l’approche consiste à travailler directement dans le support réel d’implémentation
• Grâce à sa relation fraternelle avec Claude Code, il bénéficie d’un avantage structurel permettant d’unifier dans une seule conversation la boucle de feedback entre design et implémentation
• À mesure que le marché des outils de design se scinde entre outils fondés sur le code et outils d’exploration pure, il devient possible que Figma suive la trajectoire de Sketch : **Sketch moment**

---

Le paradoxe de la systématisation chez Figma

• À mesure que les équipes produit grossissaient, le design a dû justifier son existence au sein des organisations d’ingénierie, ce qui l’a poussé vers la systématisation (systematization)
• Pour cela, Figma a inventé des primitives propriétaires comme les composants, styles, variables et props, mais certaines sont empruntées à la programmation et d’autres non, si bien que l’ensemble ne correspond proprement à aucun autre système
• Les guidelines changent sans cesse, les migrations s’accumulent, et pour automatiser quoi que ce soit il faut s’appuyer sur quelques plugins de mauvaise qualité
• La complexité a tellement augmenté qu’un rôle de design spécialisé dans la gestion de ce système a fini par apparaître

Le déplacement de la source of truth

• Entre Figma et le code, il a toujours existé une tension autour de ce qui doit constituer la source of truth
• En battant Sketch, Figma a adopté la position selon laquelle son outil deviendrait la référence canonique
• Mais cette victoire comportait un coût caché : un format verrouillé (locked-down), largement non documenté, difficile à manipuler par programmation, et donc naturellement exclu des données d’entraînement des LLM
• Les LLM ont été entraînés sur du code, pas sur les primitives de Figma ; le modèle n’a donc pas appris le système de Figma
• Comme écrire du code devient plus facile même pour les designers et que les agents progressent, la source of truth suit un mouvement de retour naturel vers le code
• En comparaison, l’infrastructure complexe que Figma a introduite au cours des dix dernières années peut difficilement ne pas paraître excessive
  > « Si l’on veut faire de la poterie, pourquoi peindre des aquarelles de poterie ? Pourquoi ne pas simplement modeler l’argile ? »

La complexité du système de design interne de Figma

• Dans le travail réel, le back-porting vers Figma de modifications de design effectuées directement dans le code est extrêmement pénible
• L’auteur prend comme exemple le fichier de design system du produit Figma lui-même, montrant qu’il est dans un état d’extrême complexité alors même qu’il a été produit par l’une des équipes de design system les plus compétentes
  • 946 variables de couleur sont organisées en groupes imbriqués comme bg/desktopBackgrounded, avec pour une même variable des valeurs pour 8 modes différents comme Light, Dark ou FigJam-Light
  • Le composant de pied de modal possède 12 variantes, ainsi qu’un menu déroulant avec des valeurs comme DS Library Swap et QA Plugin, plus 8 props
  • Le style d’effet du composant slider existe comme un style nommé séparément pour une seule ombre portée de 0.5px — parce que c’est la seule façon de documenter sa correspondance avec les variables CSS
  • Le composant d’entrée combo comporte 16 variantes, avec des noms de calques du type Default, Default, Close Button=False
• Lorsque les couleurs s’affichent mal, le processus de débogage exige un traçage en plusieurs étapes : vérifier le composant → vérifier la variable → vérifier une autre variable aliasée → vérifier le mode → vérifier les overrides au niveau de l’instance → vérifier les composants imbriqués auxquels un library swap a été appliqué

Figma Make vs Claude Design

• À mesure que la source of truth bascule vers le code, Figma se retrouve dans une position inconfortable avec un système passif et pré-agentique (pre-agentic)
• Les outils de design de demain pourraient se diviser en deux formes bien distinctes
  • La compétition recommence autour de la question à laquelle Figma répondait en 2016 : « Quel est l’outil qui me permet, en tant que designer, de sortir mon idée le plus vite possible ? »
• Figma Make est un outil pour les personnes déjà familières de l’écosystème Figma
  • Il lit les styles Figma, les bibliothèques de composants et les props propriétaires (Prop Props), et reste le seul outil de ce nouvel environnement à supposer que le fichier de design demeure la référence canonique
  • C’est un outil pour celles et ceux qui veulent rester dans ce système, ou qui n’ont pas d’autre choix que d’y rester
• Claude Design fait le pari exactement inverse
  • Il s’accorde avec le principe « truth to materials » du mouvement Arts and Crafts — l’idée qu’un objet doit être honnête à l’égard de sa nature et de son mode de fabrication
  • Figma est à l’opposé : une enveloppe libre et “vibey” posée sur un schéma extrêmement rigide — comparé à une personnalité de type A qui fait semblant d’être détendue tout en hurlant intérieurement au sujet des imbrications de frames et de la séparation des tokens
  • Claude Design est brut, mais au moins honnête sur ce qu’il est : du HTML et du JS jusqu’au bout

Les avantages structurels de Claude Design

• L’avantage structurel clé de Claude Design est que son frère est Claude Code, un outil très à l’aise avec le code
• À terme, la structure permettrait de transmettre directement de Claude Design à Claude Code, ou inversement
• L’onboarding de Claude Design propose déjà une fonction d’import de dépôt (repo)
• La boucle de feedback entre design et implémentation — historiquement toujours une source de friction — converge ainsi vers une seule conversation

L’émergence possible d’autres outils sans rapport avec le code : des environnements d’exploration pure

• L’autre branche de cette bifurcation pourrait voir apparaître des outils sans aucune attente vis-à-vis du code
• Des environnements d’exploration pure où l’on pose des rectangles, empile des styles de calque, manipule librement les modes de fusion et les dégradés, sans être contraint par un système ou des règles de prompt
• Cela pourrait prendre la forme d’une app compatible iPad + Pencil permettant d’esquisser rapidement des rectangles, ou d’un terrain où 37signals peut tenter quelque chose d’intéressant
• Dans l’autre direction, on pourrait aller vers un outil à la Photoshop, misant tout sur la composition haute fidélité (high-fidelity), libérant l’imaginaire des limites des effets CSS
• Il est étrange de constater que, pendant 90 % de sa durée de vie, Figma n’a proposé comme effets de calque que des ombres portées ou du flou

Le « Sketch moment » de Figma

• Le Sketch moment de Figma — le moment où Figma se fait dépasser comme Sketch l’a été par Figma — approche rapidement