I’m noticing a trend throughout my interviews…
Designers who can code spend more time sketching and less time in Figma.
“I spend way more time sketching stuff out on a notebook than I do in Figma. I can make a scribble and skip the Figma stage to jump directly into code” — Julius Tarng
“Once I have the original idea on paper. I pretty quickly upgrade to interactive prototypes with pure CSS and HTML… it’s more like sketching with code” — Raphael Schaad
This is already my process for designing websites. Last week I sketched out concepts for the new /ideas page and then built it directly in Framer.
However when it comes to product design, this likely falls outside of your core skillset.
AI will change that.
And when it does, I can’t help but think the current state of Figma will feel like an awkward middle ground.
Here’s why 👇
Vector vs. code-based design
Let’s start by revisiting our fidelity spectrum…
The reason Figma has over 4 million users is because it takes most people too long to code their designs.
If it were faster to code something than draw it in Figma, no one would use Figma. It's a speed trade off.
— Julius Tarng
So we compromise and draw pretty pictures of what the product should look like and call it “high fidelity” even though it’s really not.
![](https://framerusercontent.com/images/TdMTE9t0nVwYT9JVBMbl0CTU.png)
The problem with today’s approach to AI
AI promises to make us more efficient by helping us skip steps and automating the mundane.
But you have to skip the right steps… and almost every new AI tool I see today lives in the top left quadrant of this spectrum 👀
![](https://framerusercontent.com/images/8k9rJ1DvNLkdHGV1Z64tVHOL8.png)
I don’t know about you, but that’s a pretty big departure from how I typically work. In reality, this quadrant feels more like a toy than something that will meaningfully impact my design process.
When companies give disclaimers like “oh this is just for ideation” it feels like:
justification for half-baked technology in search of a problem.
functionality geared toward non-designers
The meat of the design process typically happens before any polished components are placed on the canvas (i.e. bottom left quadrant).
Too much critical UX thinking gets lost when you make the jump from natural language straight to Figma components.
![](https://framerusercontent.com/images/MMxSKea0VDOKh6Gfco1sTZPIHA.png)
I think that’s why Relume’s emphasis on “respecting the process” in web design resonated with me so much.
Now I know what you’re thinking…
“Ok so let’s just have AI generate low-fidelity sketches!”
Maaaaaybe… but I see two shortcomings:
True product design is significantly more complex than the challenges Relume faces with web design
Designers are already capable of whipping up quick sketches which chips away at AI’s value proposition
I’m much more intrigued by a different way to leverage AI 👇
A different approach
Let’s work backward from what many feel is the inevitable future: anyone will be able to generate usable code with AI.
That begs an important question though:
What do we give AI to generate this output?
Spoiler: I don’t think it’s a wall of text
![](https://framerusercontent.com/images/uUgXuyiLCYDlyFG42JqTcuvny48.png)
Did you ever use Balsamiq for exploring ideas? It was easily the fastest way to crank out low-fidelity wireframes before hopping into a tool like Illustrator.
The more I think about the future of design tooling, the more I want a tool that sits somewhere between Balsamiq and tldraw for a few reasons:
It’s a much faster way to ideate
It provides more structure for AI models than natural language
It creates a defined checkpoint in the design process where UX is the core deliverable.
![](https://framerusercontent.com/images/gV6vbvOIxsSjfQkIqDM0dQZpyw.png)
By jumping from text prompt to polished components, we’re capping our ability to own the part of the process that we’re uniquely qualified to do better than AI.
But you know what AI will be great at?
Turning wireframes into frontend code (limited logic)
Wielding (and extrapolating) your design system
Creating beautiful visuals from screenshots and mood boards
It’s important that we isolate critical thinking from these outputs.
And that might mean vector-based tools like Figma are no longer a worthwhile checkpoint on the road to shipping software.
Side note: I also think AI will play a massive role in helping designers iterate on production UI, but I’ll save that for the missing tool 😉
I’m noticing a trend throughout my interviews…
Designers who can code spend more time sketching and less time in Figma.
“I spend way more time sketching stuff out on a notebook than I do in Figma. I can make a scribble and skip the Figma stage to jump directly into code” — Julius Tarng
“Once I have the original idea on paper. I pretty quickly upgrade to interactive prototypes with pure CSS and HTML… it’s more like sketching with code” — Raphael Schaad
This is already my process for designing websites. Last week I sketched out concepts for the new /ideas page and then built it directly in Framer.
However when it comes to product design, this likely falls outside of your core skillset.
AI will change that.
And when it does, I can’t help but think the current state of Figma will feel like an awkward middle ground.
Here’s why 👇
Vector vs. code-based design
Let’s start by revisiting our fidelity spectrum…
The reason Figma has over 4 million users is because it takes most people too long to code their designs.
If it were faster to code something than draw it in Figma, no one would use Figma. It's a speed trade off.
— Julius Tarng
So we compromise and draw pretty pictures of what the product should look like and call it “high fidelity” even though it’s really not.
![](https://framerusercontent.com/images/TdMTE9t0nVwYT9JVBMbl0CTU.png)
The problem with today’s approach to AI
AI promises to make us more efficient by helping us skip steps and automating the mundane.
But you have to skip the right steps… and almost every new AI tool I see today lives in the top left quadrant of this spectrum 👀
![](https://framerusercontent.com/images/8k9rJ1DvNLkdHGV1Z64tVHOL8.png)
I don’t know about you, but that’s a pretty big departure from how I typically work. In reality, this quadrant feels more like a toy than something that will meaningfully impact my design process.
When companies give disclaimers like “oh this is just for ideation” it feels like:
justification for half-baked technology in search of a problem.
functionality geared toward non-designers
The meat of the design process typically happens before any polished components are placed on the canvas (i.e. bottom left quadrant).
Too much critical UX thinking gets lost when you make the jump from natural language straight to Figma components.
![](https://framerusercontent.com/images/MMxSKea0VDOKh6Gfco1sTZPIHA.png)
I think that’s why Relume’s emphasis on “respecting the process” in web design resonated with me so much.
Now I know what you’re thinking…
“Ok so let’s just have AI generate low-fidelity sketches!”
Maaaaaybe… but I see two shortcomings:
True product design is significantly more complex than the challenges Relume faces with web design
Designers are already capable of whipping up quick sketches which chips away at AI’s value proposition
I’m much more intrigued by a different way to leverage AI 👇
A different approach
Let’s work backward from what many feel is the inevitable future: anyone will be able to generate usable code with AI.
That begs an important question though:
What do we give AI to generate this output?
Spoiler: I don’t think it’s a wall of text
![](https://framerusercontent.com/images/uUgXuyiLCYDlyFG42JqTcuvny48.png)
Did you ever use Balsamiq for exploring ideas? It was easily the fastest way to crank out low-fidelity wireframes before hopping into a tool like Illustrator.
The more I think about the future of design tooling, the more I want a tool that sits somewhere between Balsamiq and tldraw for a few reasons:
It’s a much faster way to ideate
It provides more structure for AI models than natural language
It creates a defined checkpoint in the design process where UX is the core deliverable.
![](https://framerusercontent.com/images/gV6vbvOIxsSjfQkIqDM0dQZpyw.png)
By jumping from text prompt to polished components, we’re capping our ability to own the part of the process that we’re uniquely qualified to do better than AI.
But you know what AI will be great at?
Turning wireframes into frontend code (limited logic)
Wielding (and extrapolating) your design system
Creating beautiful visuals from screenshots and mood boards
It’s important that we isolate critical thinking from these outputs.
And that might mean vector-based tools like Figma are no longer a worthwhile checkpoint on the road to shipping software.
Side note: I also think AI will play a massive role in helping designers iterate on production UI, but I’ll save that for the missing tool 😉
I’m noticing a trend throughout my interviews…
Designers who can code spend more time sketching and less time in Figma.
“I spend way more time sketching stuff out on a notebook than I do in Figma. I can make a scribble and skip the Figma stage to jump directly into code” — Julius Tarng
“Once I have the original idea on paper. I pretty quickly upgrade to interactive prototypes with pure CSS and HTML… it’s more like sketching with code” — Raphael Schaad
This is already my process for designing websites. Last week I sketched out concepts for the new /ideas page and then built it directly in Framer.
However when it comes to product design, this likely falls outside of your core skillset.
AI will change that.
And when it does, I can’t help but think the current state of Figma will feel like an awkward middle ground.
Here’s why 👇
Vector vs. code-based design
Let’s start by revisiting our fidelity spectrum…
The reason Figma has over 4 million users is because it takes most people too long to code their designs.
If it were faster to code something than draw it in Figma, no one would use Figma. It's a speed trade off.
— Julius Tarng
So we compromise and draw pretty pictures of what the product should look like and call it “high fidelity” even though it’s really not.
![](https://framerusercontent.com/images/TdMTE9t0nVwYT9JVBMbl0CTU.png)
The problem with today’s approach to AI
AI promises to make us more efficient by helping us skip steps and automating the mundane.
But you have to skip the right steps… and almost every new AI tool I see today lives in the top left quadrant of this spectrum 👀
![](https://framerusercontent.com/images/8k9rJ1DvNLkdHGV1Z64tVHOL8.png)
I don’t know about you, but that’s a pretty big departure from how I typically work. In reality, this quadrant feels more like a toy than something that will meaningfully impact my design process.
When companies give disclaimers like “oh this is just for ideation” it feels like:
justification for half-baked technology in search of a problem.
functionality geared toward non-designers
The meat of the design process typically happens before any polished components are placed on the canvas (i.e. bottom left quadrant).
Too much critical UX thinking gets lost when you make the jump from natural language straight to Figma components.
![](https://framerusercontent.com/images/MMxSKea0VDOKh6Gfco1sTZPIHA.png)
I think that’s why Relume’s emphasis on “respecting the process” in web design resonated with me so much.
Now I know what you’re thinking…
“Ok so let’s just have AI generate low-fidelity sketches!”
Maaaaaybe… but I see two shortcomings:
True product design is significantly more complex than the challenges Relume faces with web design
Designers are already capable of whipping up quick sketches which chips away at AI’s value proposition
I’m much more intrigued by a different way to leverage AI 👇
A different approach
Let’s work backward from what many feel is the inevitable future: anyone will be able to generate usable code with AI.
That begs an important question though:
What do we give AI to generate this output?
Spoiler: I don’t think it’s a wall of text
![](https://framerusercontent.com/images/uUgXuyiLCYDlyFG42JqTcuvny48.png)
Did you ever use Balsamiq for exploring ideas? It was easily the fastest way to crank out low-fidelity wireframes before hopping into a tool like Illustrator.
The more I think about the future of design tooling, the more I want a tool that sits somewhere between Balsamiq and tldraw for a few reasons:
It’s a much faster way to ideate
It provides more structure for AI models than natural language
It creates a defined checkpoint in the design process where UX is the core deliverable.
![](https://framerusercontent.com/images/gV6vbvOIxsSjfQkIqDM0dQZpyw.png)
By jumping from text prompt to polished components, we’re capping our ability to own the part of the process that we’re uniquely qualified to do better than AI.
But you know what AI will be great at?
Turning wireframes into frontend code (limited logic)
Wielding (and extrapolating) your design system
Creating beautiful visuals from screenshots and mood boards
It’s important that we isolate critical thinking from these outputs.
And that might mean vector-based tools like Figma are no longer a worthwhile checkpoint on the road to shipping software.
Side note: I also think AI will play a massive role in helping designers iterate on production UI, but I’ll save that for the missing tool 😉
Go deeper…
![](https://framerusercontent.com/images/dxknhMmCgbblz0FK2qAPZkJpeQ.png)
Join 10,000+ designers
Get our weekly breakdowns
![](https://framerusercontent.com/images/SUCj6NB8w7hqmNHRzGTSfdi3GI.png)
"There's no doubt that Dive has made me a better designer"
@ned_ray
![](https://framerusercontent.com/images/dxknhMmCgbblz0FK2qAPZkJpeQ.png)
Join 10,000+ designers
Get our weekly breakdowns
![](https://framerusercontent.com/images/SUCj6NB8w7hqmNHRzGTSfdi3GI.png)
"There's no doubt that Dive has made me a better designer"
@ned_ray
![](https://framerusercontent.com/images/dxknhMmCgbblz0FK2qAPZkJpeQ.png)
Join 10,000+ designers
Get our weekly breakdowns
![](https://framerusercontent.com/images/SUCj6NB8w7hqmNHRzGTSfdi3GI.png)
"There's no doubt that Dive has made me a better designer"
@ned_ray
![](https://framerusercontent.com/images/j9lXvkZT0aTfLzooKCh8uN51A1w.jpeg)
![](https://framerusercontent.com/images/j9lXvkZT0aTfLzooKCh8uN51A1w.jpeg)
![](https://framerusercontent.com/images/j9lXvkZT0aTfLzooKCh8uN51A1w.jpeg)
hello@dive.club
Ⓒ Dive 2024