deleting draft blog articles
This commit is contained in:
@@ -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**
|
||||
Reference in New Issue
Block a user