From 54f7d6eff6534a50569ff07fa733ec413f0de596 Mon Sep 17 00:00:00 2001 From: Matheo Guilbert Date: Thu, 23 Apr 2026 12:14:38 +0200 Subject: [PATCH] writing a blog article --- content/.obsidian/workspace.json | 28 ++++++++------- content/blog/en/02.mdx | 61 ++++++++++++++++++++++++++++++++ content/blog/fr/02.mdx | 61 ++++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+), 13 deletions(-) create mode 100644 content/blog/en/02.mdx create mode 100644 content/blog/fr/02.mdx diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json index 2d00fba..039562d 100644 --- a/content/.obsidian/workspace.json +++ b/content/.obsidian/workspace.json @@ -4,21 +4,21 @@ "type": "split", "children": [ { - "id": "96f3775750841552", + "id": "1e867bda506e88c5", "type": "tabs", "children": [ { - "id": "d161c707e6c1747a", + "id": "cb90ccfe4117118f", "type": "leaf", "state": { "type": "markdown", "state": { - "file": "projects/fr/MGDev.mdx", + "file": "blog/fr/02.mdx", "mode": "source", "source": false }, "icon": "lucide-file", - "title": "MGDev" + "title": "02" } } ] @@ -78,7 +78,7 @@ } ], "direction": "horizontal", - "width": 300 + "width": 250.5 }, "right": { "id": "2ee624d034e5fa8d", @@ -191,17 +191,19 @@ "templates:Insérer le modèle": false, "command-palette:Ouvrir la palette de commandes": false, "bases:Créer une nouvelle base": false, - "obsidian-git:Open Git source control": false, - "translate:Open translation view": false + "obsidian-git:Open Git source control": false } }, - "active": "d161c707e6c1747a", + "active": "cb90ccfe4117118f", "lastOpenFiles": [ - "projects/en/MGDev.mdx", - "projects/fr/MGDev.mdx", - "projects/fr/Threadbase.mdx", - "projects/fr/EverEastSolutions.mdx", + "blog/en/02.mdx", + "blog/fr/02.mdx", + "blog/fr/01-How-I-built-my-new-website-and-why.mdx", "blog/en/01-How-I-built-my-new-website-and-why.mdx", - "blog/fr/01-How-I-built-my-new-website-and-why.mdx" + "blog/template.mdx", + "projects/fr/MGDev.mdx", + "projects/en/MGDev.mdx", + "projects/fr/Threadbase.mdx", + "projects/fr/EverEastSolutions.mdx" ] } \ No newline at end of file diff --git a/content/blog/en/02.mdx b/content/blog/en/02.mdx new file mode 100644 index 0000000..a9d2fc7 --- /dev/null +++ b/content/blog/en/02.mdx @@ -0,0 +1,61 @@ +--- +ready: false +title: "Claude Design vs. Figma Make: How I Combined the Two to Optimize My Prototyping" +description: A comparison of the two tools and how I used them +date: 2026-04-23 +category: Technologies +tags: + - Design + - AI + - Experience + - Comparison + - Technologies +readTime: 5 min +summary: + - The Arrival of Claude Design + - "The Flip Side: A Restrictive Pricing Model" + - "The Alternative: Figma Make" + - "The Ideal Workflow: Making Claude and Figma Talk" + - Epilogue +--- +## The Arrival of Claude Design + +On **April 17, 2026**, Anthropic introduced Claude Design in its beta version. It is an AI-assisted visual creation tool that allows you to generate and refine designs, interactive prototypes, slideshows, and other visual assets from text requests (prompts) or simply by chatting with Claude. + +The idea is to transform a vision into a usable mockup much faster than with a traditional workflow. The tool targets both non-designers who want to present an idea cleanly, and design professionals who want to prototype more quickly. + +## The Flip Side: A Restrictive Pricing Model + +Claude Design lets you generate visuals in the blink of an eye, which quickly gives you the impression of being a design god. However, nothing is perfect on the first try, even for an AI. And that is where what is, at this stage, the main flaw I've found with it appears: modifying the visual. + +At the time of writing this article, the tool allows you to adjust certain parameters like the color or size of an element, or its spatial arrangement. To do this, it uses an approach based on HTML and CSS (notably Flexbox, a web layout system that easily aligns and distributes elements within a container). This remains quite limited for now. + +Indeed, when you want to add or remove a complex element, there is only one way to do it: by asking the AI directly. But these requests consume tokens (the computing units billed by the artificial intelligence to read and generate content). And if, like me, you have a Pro plan, the usage limit set for this subscription is reached very quickly. In fact, to design an entire application, you sometimes have to wait until the following week for quotas to reset, or pay up again (which, in the long run, becomes very expensive). + +## The Alternative: Figma Make + +In the design market, there is another tool distributed by Figma (which belongs to Adobe), namely: Figma Make. + +It is a very powerful tool that essentially allows you to do the same thing as Claude Design, but integrated directly into the Figma ecosystem. This mitigates Anthropic's costly modification problem, since Figma Make offers a feature to copy the generated design and then paste it as layers into your mockup. We can then modify this result at will, adapt it to an existing visual, prototype it... In short, do whatever we want with it, without request limits. + +Nevertheless, despite the different AI models available in Figma Make, and based on my experience, Claude Design provides much better initial results. + +## The Ideal Workflow: Making Claude and Figma Talk + +Ideally, when you have two tools with their own pros and cons for accomplishing the same task, you want to get the best out of each. + +That is what I did while prototyping the macOS application ThreadSpace, which I am developing solo. I needed to create a mockup quickly to anticipate the software's UX (user experience). Figma Make wasn't giving me the expected results: it stayed stuck on a web SaaS approach (those interfaces typical of subscription-based online software) with a clichéd "AI-made" design that I didn't like at all. + +I then turned to Claude Design when it was released. In a few minutes and two requests, the result was convincing and faithful to the description I had provided. But I couldn't refine it as I pleased without exhausting my token quota for nothing. + +So, I used Claude's HTML export feature. Following that, I was able to easily convert this web page into a Figma mockup using a third-party plugin. + +Today, my process is well-oiled: I tweak the interface in Figma, I prototype as I see fit, and when I run out of inspiration or want to overhaul a large part of the application, I use Figma Make. With my source design as a base and a detailed prompt, Adobe's tool roughs out the redesign work very well. + +## Epilogue + +This is exactly what I love about computing and the digital world in general. When a tool only partially meets your needs, there is always a way to combine several solutions to build your own workflow. As a developer, I can even create my own tools, like ThreadSpace. And if I don't have the time or the desire to develop my own solution, someone else might do it one day, and that will benefit the greatest number of people. + +On that note, thanks for reading this far, and see you next time in another article. + +**Mathéo G** \ No newline at end of file diff --git a/content/blog/fr/02.mdx b/content/blog/fr/02.mdx new file mode 100644 index 0000000..0cf5cb4 --- /dev/null +++ b/content/blog/fr/02.mdx @@ -0,0 +1,61 @@ +--- +ready: false +title: "Claude Design face à Figma Make : Comment j'ai combiné les deux pour optimiser mon prototypage" +description: Comparatif des deux outils et comment je m'en suis servie +date: 2026-04-23 +category: Technologies +tags: + - Design + - IA + - Expérience + - Comparatif + - Technologies +readTime: 5 min +summary: + - L'arrivée de Claude Design + - "Le revers de la médaille : un modèle économique contraignant" + - "L'alternative : Figma Make" + - "Le workflow idéal : faire dialoguer Claude et Figma" + - Épilogue +--- +## L'arrivée de Claude Design + +Le **17 avril 2026**, [Anthropic](https://www.anthropic.com/) a introduit [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) dans sa version bêta. C'est un outil de création visuelle assisté par IA qui permet de générer et d'affiner des designs, des prototypes interactifs, des diaporamas et d'autres supports visuels, à partir de requêtes textuelles (_prompts_) ou par simple conversation avec Claude. + +L’idée est de transformer une vision en maquette exploitable beaucoup plus vite qu’avec un flux de travail classique. L’outil vise autant les non-designers qui veulent présenter une idée proprement, que les professionnels du design qui souhaitent prototyper plus rapidement. + +## Le revers de la médaille : un modèle économique contraignant + +Claude Design permet de générer des visuels en un clin d'œil, ce qui donne vite l'impression d'être un dieu du design. Cependant, rien n'est parfait du premier coup, même pour une IA. Et c'est là qu'apparaît ce qui est, à ce stade, le principal défaut que je lui ai trouvé : la modification du visuel. + +Au moment où j'écris cet article, l'outil permet d'ajuster certains paramètres comme la couleur, la taille d'un élément ou son arrangement dans l'espace. Il utilise pour cela une approche basée sur le HTML et le CSS (notamment _Flexbox_, un système de mise en page web qui permet d'aligner et de répartir facilement les éléments dans un conteneur). Cela reste pour le moment assez limité. + +En effet, lorsque l'on veut ajouter ou supprimer un élément complexe, il n'y a qu'une seule manière de le faire : en le demandant directement à l'IA. Seulement, ces requêtes consomment des _tokens_ (les unités de calcul facturées par l'intelligence artificielle pour lire et générer du contenu). Et si, comme moi, vous avez un plan Pro, la limite d'utilisation fixée pour cet abonnement est très vite atteinte. De fait, pour concevoir le design d'une application entière, il faut parfois attendre la semaine suivante pour la réinitialisation des quotas, ou bien repasser à la caisse (ce qui, à terme, revient très cher). + +## L'alternative : Figma Make + +Sur le marché du design, il existe un autre outil distribué par [Figma](https://www.figma.com/) (qui appartient à Adobe), j'ai nommé : Figma Make. + +C'est un outil très puissant qui permet, en substance, de faire la même chose que Claude Design, mais en étant directement intégré dans l'écosystème Figma. Cela pallie le problème des modifications coûteuses d'Anthropic, puisque Figma Make propose une fonctionnalité de copie du design généré pour le coller ensuite sous forme de calques dans votre maquette. Nous pouvons ensuite modifier ce résultat à souhait, l'adapter à un visuel existant, le prototyper... Bref, en faire ce que l'on veut, sans limite de requêtes. + +Néanmoins, malgré les différents modèles d'IA disponibles dans Figma Make, et d'après mon expérience, Claude Design fournit de biens meilleurs résultats initiaux. + +## Le workflow idéal : faire dialoguer Claude et Figma + +L'idéal, quand on a deux outils avec leurs propres avantages et inconvénients pour accomplir une même tâche, c'est de tirer le meilleur de chacun. + +C'est ce que j'ai fait dans le cadre du prototypage de l'application macOS [_ThreadSpace_](https://threadSpace.app), que je développe en solo. J'avais besoin de réaliser une maquette rapidement pour anticiper l'UX (l'expérience utilisateur) du logiciel. Figma Make ne me donnait pas les résultats attendus : il restait bloqué sur une approche _SaaS web_ (ces interfaces typiques des logiciels en ligne sur abonnement) avec un design cliché « fait par IA » qui ne me plaisait pas du tout. + +Je me suis alors tourné vers Claude Design à sa sortie. En quelques minutes et deux requêtes, le résultat était convaincant et fidèle à la description que j'avais fournie. Mais je ne pouvais pas l'affiner à ma guise sans épuiser mon quota de jetons pour rien. + +J'ai donc utilisé la fonctionnalité d'export au format HTML de Claude. Suite à cela, j'ai pu facilement convertir cette page web en maquette Figma grâce à un plugin tiers. + +Aujourd'hui, mon processus est rodé : je peaufine l'interface dans Figma, je prototype comme bon me semble, et quand je suis à court d'inspiration ou que je veux refondre une grande partie de l'application, je passe par Figma Make. Avec mon design source comme base et un prompt détaillé, l'outil d'Adobe dégrossit très bien le travail de refonte. + +## Épilogue + +C'est exactement ce que j'aime dans l'informatique et le numérique en général. Quand un outil ne correspond que partiellement à votre besoin, il y a toujours un moyen de combiner plusieurs solutions pour construire votre propre flux de travail (_workflow_). En tant que développeur, je peux même créer mes propres outils, comme _ThreadSpace_. Et si je n'ai pas le temps ou l'envie de développer ma propre solution, quelqu'un d'autre le fera peut-être un jour, et cela profitera au plus grand nombre. + +Sur ce, merci d'avoir lu jusqu'ici et à la prochaine dans un autre article. + +**Mathéo G** \ No newline at end of file