Claude Code et Figma Make : Révolution dans le design par l'IA

Une transformation dans le monde du design

Mon parcours dans l'industrie du design

Après avoir passé sept années dans le secteur du design, j'ai constaté que la majeure partie de mon travail consistait à créer des visuels et des wireframes. Ces éléments étaient ensuite transmis aux ingénieurs pour être traduits en code. Mon rôle se résumait souvent à celui d'un traducteur, transformant des exigences en concepts, puis en fichiers, en attendant que d'autres les convertissent en produits finis.

Évolution de mon flux de travail

L'année 2024 a marqué un tournant décisif dans ma carrière. Avec l'introduction de Claude Code, Figma Make et les modèles de langage avancés (LLMs), mes méthodes de travail ont radicalement changé. Les livrables statiques ont cédé la place à des démos fonctionnelles. Plutôt que de naviguer dans des bibliothèques de composants, je connecte désormais mon système de design à Claude Code pour générer des interfaces. Je mène mes recherches et synthèses via des projets ChatGPT. Dans ce nouveau rôle, je ne suis plus simplement un traducteur, mais un chef d'orchestre, dirigeant l'IA pour exécuter des tâches tout en appliquant mon expertise pour évaluer les résultats. Mon expérience de sept ans n'est pas devenue obsolète, elle a simplement évolué, les compétences restant les mêmes, mais leur application changeant.

Développer un « sens du design » dans le code

Les designers ont souvent ressenti une frustration : l'écart entre ce qu'ils imaginent et ce qu'ils peuvent réellement construire. Figma est un outil formidable qui ralentit le processus et incite à la réflexion, car il agit comme une couche intermédiaire. Les instincts développés sont principalement spatiaux et visuels, similaires au dessin sur papier. Cependant, dans un produit réel, le design se manifeste dans le système et le temps, à travers le comportement de l'interface avec des données réelles, la fluidité des animations, et la logique entre les interactions. Ces compétences nécessitent un ensemble de muscles complètement différent.

Comment développer le sens du design dans le code ?

• Externalisez votre connaissance tacite : Avec l'IA, le coût de création d'un premier brouillon est considérablement réduit. Le défi réside dans la production d'un premier jet de qualité et dans l'itération efficace à partir de celui-ci, testant ainsi votre capacité à transmettre votre savoir implicite à l'IA.

• Le cadre 3C aide : Contexte, Composants, Critères.

  • Contexte : Fournissez à l'IA une vue d'ensemble de votre projet, incluant les objectifs, le public cible, les contraintes, et les décisions antérieures. Pour les projets en cours, je maintiens un fichier de contexte mis à jour que l'IA consulte à chaque session.

  • Composants : Les outils que vous fournissez à l'IA pour accomplir le travail. Bien que les LLMs possèdent des capacités de raisonnement et de récupération, des échafaudages spécifiques sont nécessaires pour des tâches spécialisées comme la révision de code ou le design frontend.

  • Critères : Définissez clairement les normes de qualité pour la sortie de l'IA, en précisant ce qu'elle ne doit pas générer. Les contraintes négatives sont souvent plus efficaces que les instructions positives, et il est crucial d'intégrer un mécanisme d'auto-évaluation pour l'IA.

Exécutez-le vous-même

Observer quelqu'un accomplir une tâche et la réaliser soi-même sont deux expériences distinctes. Bien qu'il existe de nombreux tutoriels sur l'IA, la véritable compréhension vient de la pratique.

• Mon guide en 3 étapes sur le prototypage IA : Demandez à l'IA de concevoir une architecture de projet et observez l'organisation des fichiers et modules. Sollicitez-la pour écrire des tests et analysez sa gestion des cas limites. Suivez un message d'erreur jusqu'à sa compréhension complète.

En parcourant ce processus, vous découvrirez que de nombreuses peurs techniques étaient infondées.

Redéfinir le processus de design

Jenny Wen, responsable design pour Claude, a déclaré dans le podcast de Lenny que le processus de design traditionnel est dépassé. Plus précisément, la rapidité de l'ingénierie a surpassé les méthodes linéaires de design, les designers n'ayant plus le temps de se concentrer sur des spécifications visuelles statiques. La vision de design à long terme est devenue impraticable.

Retour aux principes fondamentaux

Avant l'ère de l'IA, les designers avaient une compréhension limitée du fonctionnement interne des logiciels, opérant principalement au niveau de l'abstraction : visuels, interactions, architecture de l'information. L'IA a modifié ce ratio, réduisant presque à néant le coût de « comment construire », libérant ainsi du temps et des ressources cognitives pour se concentrer sur la question fondamentale : que devrait être cette chose ?

Construire votre propre échafaudage

Chaque designer rencontre des obstacles dans le flux de travail où les outils ne s'adaptent pas parfaitement. Les options étaient limitées : tolérer les frictions ou investir plus d'efforts manuels. Attendre un nouvel outil était rarement une option. Désormais, les designers peuvent créer leurs propres outils, un échafaudage personnalisé pour chaque tâche spécifique.