publishing second blog article
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
---
|
||||
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**
|
||||
+19
-19
@@ -1,8 +1,8 @@
|
||||
---
|
||||
ready: false
|
||||
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-23
|
||||
date: 2026-04-30
|
||||
category: Technologies
|
||||
tags:
|
||||
- Design
|
||||
@@ -20,42 +20,42 @@ summary:
|
||||
---
|
||||
## 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.
|
||||
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 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 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 Flip Side: A Restrictive Pricing Model
|
||||
## The Downside: A Restrictive Business 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.
|
||||
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 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.
|
||||
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.
|
||||
|
||||
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).
|
||||
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 market, there is another tool distributed by Figma (which belongs to Adobe), namely: Figma Make.
|
||||
In the design space, there’s another tool provided by [Figma](https://www.figma.com/) (owned by Adobe): 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.
|
||||
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.
|
||||
|
||||
Nevertheless, despite the different AI models available in Figma Make, and based on my experience, Claude Design provides much better initial results.
|
||||
However, despite the various AI models available in Figma Make, in my experience, Claude Design delivers much better initial results.
|
||||
|
||||
## The Ideal Workflow: Making Claude and Figma Talk
|
||||
## The Ideal Workflow: Combining Claude and Figma
|
||||
|
||||
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.
|
||||
When you have two tools with their own strengths and weaknesses for the same task, the best approach is to leverage both.
|
||||
|
||||
That is what I did while prototyping the macOS application Thence, 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.
|
||||
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.
|
||||
|
||||
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 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. Following that, I was able to easily convert this web page into a Figma mockup using a third-party plugin.
|
||||
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 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.
|
||||
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 is always a way to combine several solutions to 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 the desire to develop my own solution, someone else might do it one day, and that will benefit the greatest number of people.
|
||||
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.
|
||||
|
||||
On that note, thanks for reading this far, and see you next time in another article.
|
||||
Thanks for reading, and see you next time for another article.
|
||||
|
||||
**Mathéo G**
|
||||
Reference in New Issue
Block a user