Je déménage bientôt, et comme je quitte ma jolie campagne pour aller dans un endroit plus petit et sans nature (ouin), je dois me débarrasser de pas mal de matériel... Ponceuse, débroussailleuse, taille-haie, tronçonneuse, canapé, tracteur tondeuse.... la totale quoi. Et Le Bon Coin, même si à un moment, je vais devoir y passer, ça me stresse. Je me suis déjà fait menacer par un connard, quand je vendais ma Clio y'a longtemps et entre les acheteurs fantômes et les négociateurs relous, je trouve que les gens s'y comportent comme des bêtes. Du coup, pour commencer en douceur, j'ai choisi la méthode old school à savoir faire un petit catalogue recto verso glissé dans les boîtes aux lettres des voisins.

Sauf qu'aligner des colonnes sur un logiciel de mise en page un soir de semaine, ça heurte très violemment ce que je peux encaisser émotionnellement en ce moment ^^. L'idée m'est donc venue de prendre un petit abonnement et de tester Figma MCP (la passerelle qui laisse un agent IA piloter Figma à votre place) branché à Claude Code : vous donnez votre brief (idées, textes, prix) et un dossier de photos, et l'agent construit la mise en page à votre place.

Comme ça, plus besoin de toucher à rien.

Et si je fais cet article, c'est parce que j'ai été impressionné ! Ça fonctionne super bien. J'ai pas eu besoin de faire 50 aller-retour du genre "décalle ce truc de 2 px vers la gauche" et l'IA s'est démerdée pour tout faire rentrer sur un A4 recto verso.

Puis après, j'ai fait le même tour de magie avec la plaquette commerciale qui sert à vendre du sponsoring sur le site (le Patreon , aussi généreux soit-il, ne permet pas encore d'en vivre sans annonceurs, sniiiif). Je lui ai donné mes data, je lui ai dit ce que je voulais et Claude Code a réalisé le design et assemblé les slides à partir de tout ça.

Figma MCP, pour ceux qui débarquent, ça désigne le Model Context Protocol appliqué à Figma. C'est un standard ouvert qui permet à un agent IA comme Claude Code de discuter directement avec un logiciel, ici Figma. En clair, l'agent peut lire ce qui se passe dans votre fichier ET écrire dessus, créer des frames, poser du texte, aligner des composants, un peu comme si vous étiez aux commandes vous-même, sauf que c'est vous qui donnez les instructions et lui qui exécute.

Pour l'activer, ouvrez Figma desktop, créez un nouveau document DESIGN

Puis basculez en Dev Mode (raccourci Shift+D ou le bouton tout en bas de l'écran) où la section MCP server du panneau d'inspection permet d'activer un serveur local, à l'adresse http://127.0.0.1:3845/mcp.

Ensuite, pour que Claude Code construise et modifie réellement votre design comme je l'ai déjà fait pour mon catalogue, vous devrez le connecter au MCP de Figma depuis votre terminal avec cette commande :

claude mcp add --transport http figma https://mcp.figma.com/mcp

Une fenêtre d'authentification s'ouvre, vous validez avec votre compte Figma, et c'est plié ! Anthropic propose aussi un plugin tout-en-un si taper la commande à la main vous gonfle. Notez que cette connexion gratuite est en bêta, et Figma a prévenu que ça basculera un jour sur un modèle payant à l'usage. C'est tellement dommage de faire payer pour ça...

Reste ensuite à coller le lien du document Design dans votre prompt (ou à sélectionner le bon frame), et l'agent saura exactement où écrire.

Pour faire un peu de PAO, un petit design ou une présentation à monter vite fait, c'est super fluide. Moi j'ai branché mon outil Kassis (anciennement VoxDrop), j'ai tout dicté dans Claude Code et j'ai obtenu ce que je voulais sans effort. Claude est même parti chercher des infos sur le matos en ligne.

Figma est un chouette outil et il n'a pas l'air si complexe que ça mais quand on n'a pas envie d'apprendre à maîtriser toute cette machinerie pour faire un mini truc, ce MCP est bien pratique. Il sait tout gérer, les calques, composants, auto-layout, et compagnie et ça annihile totalement cette courbe d'apprentissage qui m'aurait fait perdre du temps sur d'autres projets plus importants.

Si vous bossez régulièrement sur des prez, des maquettes ou tout ce qui ressemble à de la PAO, ça vaut clairement le coup d'essayer en tout cas, même si vous maîtrisez Figma.

Bonne nouvelle pour ceux qui en ont ras la casquette de se taper des allers-retours entre Figma et VS Code ! Parce qu'avec Onlook , l'éditeur visuel open source qui vous permet de modifier le design de vos apps React directement dans le navigateur, vous allez pouvoir cliquer simplement sur un élément de design, et en changer la couleur, la typo...etc et hop, ça modifiera le code derrière.

Pas mal, non ?

Vous ouvrez votre projet Next.js dans Onlook, et vous vous retrouvez avec une interface à la Figma, sauf que c'est branché sur votre code source. Vous sélectionnez un titre, un bouton, n'importe quel composant, et vous modifiez son style visuellement... couleurs, padding, marges, polices, tout y passe.

Et en fait, le truc qui change tout par rapport à un inspecteur CSS classique, c'est que quand vous cliquez sur "Publish", les modifications atterrissent DIRECTEMENT dans vos fichiers .tsx. C'est donc du vrai code propre, pas du CSS inline dégueulasse.

Côté technique, l'outil gère nativement TailwindCSS (parce que bon, en 2026, si vous faites du React sans Tailwind, vous aimez forcément le cuir qui claque et la souffrance). Vous éditez en mode visuel, ça génère les bonnes classes Tailwind, et vous gardez un contrôle total. Y'a aussi un mode LLM intégré... "rends ce bouton bleu avec des coins arrondis" et hop, c'est fait. Comme ça, pas besoin de chercher si c'est rounded-lg ou rounded-xl dans la doc.

J’sais pas si vous avez vu, mais Google a sorti en beta, encore un truc qui va mettre les experts UX/UI au chomdu ! Son petit nom c’est Stitch (rien à voir avec Lilo) et vous pouvez le découvrir sur stitch.withgoogle.com . En gros, Stitch c’est une boîte à outils expérimentale qui utilise de l’IA pour transformer vos idées de site ou d’appli mobiles en interfaces utilisateur fonctionnelles en un rien de temps.

Le principe c’est comme d’hab, vous entrez une description en langage naturel du style “Vazy crée-moi une app mobile dark theme avec une navbar, une carte de profil et un bouton d’action flottant, wesh”, et hop ! Stitch vous sort de son chapeau l’interface complète avec le code HTML/CSS qui va bien. C’est annoncé officiellement depuis mai sur le blog Google Developers depuis Google I/O 2025. Oui, je sais, j’suis pas pressé. J’ai un métier moi (non).

Et si vous n’êtes pas inspiré, mais que vous trouver l’app ou le site d’un concurrent sexy, vous pouvez également uploader une capture écran de son interface ou d’un gribouillis de votre cru, ou même un wireframe fait à l’arrache. Et Stitch analysera l’image et vous crachera une version propre et fonctionnelle.

Gemini 2.5 est bien sûr le maître d’œuvre et Stitch vous propose deux modes : Gemini 2.5 Flash pour la rapidité (350 générations par mois), ou Gemini 2.5 Pro pour des résultats plus sophistiqués (50 générations par mois). Notez que le mode Pro est particulièrement bon quand vous travaillez avec des inputs visuels complexes.

L’intégration avec Figma est aussi un vrai plus. Vous pouvez donc exporter directement votre design dans Figma tout en préservant les calques et les composants ce qui est pratique pour les designers qui veulent peaufiner le résultat ou pour les équipes qui bossent déjà avec cet outil. Par contre, moi j’y ai pas accès, donc je pense qu’il faut un abonnement pro pour profiter de cette option.

Pour les développeurs, le code généré est également plutôt propre et bien structuré. Moi j’ai testé en demandant une interface pour une potentielle application Korben sur iOS / Android (j’suis pas sûr qu’il y ait un vrai besoin cela dit) et il m’a pondu un truc assez classique mais très propre, basé sur Tailwind CSS.

Et évidemment, chez Google, ils vous diront que l’objectif n’est pas de remplacer Figma ou Adobe XD, mais plutôt de faciliter la phase initiale de prototypage qui peut être fastidieuse. Mais bon, à terme, je pense que ce sera la fin pour ce genre d’outils sauf s’ils embrassent eux aussi, l’IA générative.

L’outil propose évidemment un chat interactif pour affiner le design, des sélecteurs de thèmes, et la possibilité de modifier le résultat en temps réel. Vous pouvez aussi jongler entre les versions web et mobile de votre interface en un clic. Pour l’instant, c’est gratuit mais avec des limitations mensuelles. Il vous faut un compte Google et c’est disponible dans 212 pays, uniquement en anglais.

C’est donc parfait pour les débutants avec des idées d’apps, les développeurs qui veulent prototyper rapidement, et les designers qui cherchent à explorer des variantes rapidement avec une bonne UX/UI faite dans les règles de l’art.

Mais attention quand même… Pour ma part, j’ai testé le bouton de téléchargement pour récupérer un design et ça n’a pas fonctionné… preuve que c’est vraiment encore en beta !

Voilà, donc si vous voulez tester, rendez-vous sur stitch.withgoogle.com . Ça peut vous faire gagner du temps sur les phases de brainstorming et de prototypage rapide.

Merci à Rpc2dot0 pour la découverte !

— En partenariat avec Penpot —

Depuis mon dernier article sur Penpot et ses fonctionnalités de Flex Layout, l’outil n’a cessé d’évoluer pour offrir encore plus de possibilités aux designers et développeurs. Aujourd’hui, je souhaite vous présenter en détail une fonctionnalité très attendue : les CSS Grid Layout.

Pour rappel, Penpot est un outil libre et open source de conception d’interfaces pour applications web et mobiles. Intuitif et puissant, il permet de créer rapidement des prototypes et maquettes interactives, tout en générant le code CSS correspondant, prêt à être intégré dans vos projets.

Si les Flex Layout permettaient déjà de créer des designs responsives en adaptant les éléments à la taille de l’écran, les CSS Grid Layout vont encore plus loin en offrant un contrôle total sur le positionnement et le dimensionnement des composants. Concrètement, les CSS Grid Layout vous permettent de définir une grille sur laquelle placer vos éléments. Vous pouvez spécifier le nombre de lignes et de colonnes, leur taille, les gouttières entre elles. Chaque élément peut alors occuper une ou plusieurs cases de cette grille, s’étendre sur plusieurs lignes ou colonnes.

Cette approche offre une grande flexibilité pour créer des mises en page complexes et adaptatives. Vous pouvez par exemple concevoir facilement une page avec un header sur toute la largeur, une sidebar sur la gauche, un contenu principal au centre et un footer en bas, le tout en quelques clics et sans une ligne de CSS.

Autre atout des CSS Grid Layout : la possibilité de nommer chaque zone de votre grille. Fini les .col-md-4 ou .row-2 peu parlants, vous pouvez utiliser des noms comme « header », « main-content » ou « sidebar » pour structurer votre design de façon sémantique.

Pour vous aider à prendre en main cette fonctionnalité, je vous ai préparé une nouvelle vidéo tuto dédiée aux CSS Grid Layout. Je vous y montre comment créer vos premières grilles, les configurer, placer vos éléments et profiter de la puissance des CSS Grid Layout dans vos conceptions. Même si vous n’êtes pas familier avec le CSS Grid, vous verrez que Penpot rend son utilisation très intuitive.

Découvrez la vidéo ici ! Et pour vous inscrire sur Penpot, c’est par ici !