diff --git a/content/blog/en/02.mdx b/content/blog/en/02.mdx deleted file mode 100644 index e9a1724..0000000 --- a/content/blog/en/02.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -ready: true -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-30 -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](https://www.anthropic.com/) introduced [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) in beta. It’s an AI-assisted visual creation tool that enables users to generate and refine designs, interactive prototypes, slides, and other visual assets from text prompts or simply by conversing with Claude. - -The idea is to turn a vision into a usable mockup much faster than with a traditional workflow. The tool targets both non-designers who want to present ideas cleanly, and professional designers looking to prototype more quickly. - -## The Downside: A Restrictive Business Model - -Claude Design makes it incredibly easy to generate visuals, giving you the feeling of being a design god. However, nothing is perfect on the first try—even for an AI. And that’s where what I see as its main drawback appears: editing the design. - -At the time of writing, the tool allows adjustments to certain parameters like color, element size, or layout. It relies on an HTML and CSS-based approach (notably _Flexbox_, a web layout system that makes it easy to align and distribute elements within a container). But for now, this remains fairly limited. - -When it comes to adding or removing complex elements, there is only one option: asking the AI directly. The problem is that these requests consume _tokens_ (the units used to bill AI computation for reading and generating content). And if, like me, you have a Pro plan, the usage limit is reached very quickly. As a result, designing an entire app can mean waiting until the following week for quotas to reset—or paying more, which becomes expensive over time. - -## The Alternative: Figma Make - -In the design space, there’s another tool provided by [Figma](https://www.figma.com/) (owned by Adobe): Figma Make. - -It’s a powerful tool that essentially does the same thing as Claude Design, but is directly integrated into the Figma ecosystem. This solves Anthropic’s costly editing problem, as Figma Make allows you to copy generated designs and paste them as layers into your mockup. From there, you can modify, adapt, and prototype freely—without any request limits. - -However, despite the various AI models available in Figma Make, in my experience, Claude Design delivers much better initial results. - -## The Ideal Workflow: Combining Claude and Figma - -When you have two tools with their own strengths and weaknesses for the same task, the best approach is to leverage both. - -That’s what I did while prototyping my macOS app [_Thence_](https://thence.app), which I’m developing solo. I needed to quickly create a mockup to anticipate the UX (user experience) of the software. Figma Make didn’t give me the results I expected—it leaned toward a typical _SaaS web_ interface, with that cliché “AI-generated” look that didn’t appeal to me. - -So I turned to Claude Design when it launched. In just a few minutes and two prompts, the result was convincing and aligned with my description. But I couldn’t refine it freely without wasting my token quota. - -So I used Claude’s HTML export feature. From there, I was able to convert the webpage into a Figma mockup using a third-party plugin. - -Today, my workflow is well established: I refine the interface in Figma, prototype as needed, and when I run out of inspiration or want to redesign large parts of the app, I use Figma Make. With my existing design as a base and a detailed prompt, Adobe’s tool does a great job of roughing out redesign ideas. - -## Epilogue - -This is exactly what I love about computing and the digital world in general. When a tool only partially meets your needs, there’s always a way to combine solutions and build your own workflow. As a developer, I can even create my own tools, like _Thence_. And if I don’t have the time or desire to build something myself, someone else might—and it will benefit everyone. - -Thanks for reading, and see you next time for 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 deleted file mode 100644 index e08ebc1..0000000 --- a/content/blog/fr/02.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -ready: true -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-30 -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 [_Thence_](https://thence.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 _Thence_. 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