Chaos First, Grid Later: A Permission Slip for the ADHD Designer
If you went to design school (or even if you just watched a few YouTube tutorials) you were likely taught the “Correct Way” to design.
It usually looks like the Double Diamond. It’s linear. It’s logical. It goes something like this:
Step 1: Research & Discovery
Step 2: Low-Fidelity Sketches (Napkins only!)
Step 3: Wireframes (Gray boxes only! No color allowed!)
Step 4: High-Fidelity UI (Finally, the pixels)
Step 5: Prototype & Ship
For the neurotypical brain, this process is a safety net. It minimizes risk.
For the ADHD brain, this process is a cage.
And when you can’t do it, when you skip straight to Step 4 and spend three hours tweaking a drop shadow before you’ve even decided what the button does… you don’t just feel inefficient. You feel like a fraud.
You feel like everyone else got the manual and you’re just faking it.
The Dopamine Deficit of Gray Boxes
Let me be clear: we don’t skip wireframes because we’re lazy or undisciplined.
We skip wireframes because for the ADHD brain, engagement is fuel.
A gray box with an “X” in the middle offers zero dopamine.
It’s abstract.
It’s boring.
And when an ADHD brain is bored, it doesn’t just lose interest—it shuts down. We can’t visualize the solution because the “vibe” isn’t there yet. The abstraction doesn’t give us anything to grab onto.
For us, aesthetic is a function.
We need to see the high-fidelity visuals… the colors, the typography, the spacing to understand if the solution actually works.
The “vibe” anchors our attention. It gives us the stimulation required to keep the executive function engine running.
Standard design methodology is like bricklaying: you lay one brick at a time, row by row, from the bottom up.
ADHD design is like sculpting: you throw a massive, chaotic blob of clay on the table, and then you carve away everything that doesn’t look like the solution.
The Shame Tax
Here’s the part nobody talks about.
You’re in a design review. Your manager asks you to walk through your “design rationale.”
And you freeze.
Because the truth is, you don’t have one. Not in the way they mean.
You didn’t decide to use 18px line height. You just... tried a bunch of things until one felt right.
You didn’t conduct a competitive audit. You looked at three screenshots in your inspiration folder and Frankensteined something together.
And now you’re supposed to explain why you made these choices, and all you can think is: “Because it looked good?”
Or worse: you’re about to hand off a file to a developer, and you know—you know—that when they open it, they’re going to see:
A layers panel that looks like a crime scene (
Group 456 copy 2).Fourteen different shades of the same blue.
Padding that’s somehow 13px in one place and 22px in another.
Components that aren’t actually components.
And they’re going to judge you. They’re going to think you don’t know what you’re doing.
This is the trap. If you stay in chaos mode forever, you ship bad products and you collect evidence that you’re a bad designer.
The secret isn’t to force yourself into a linear process you’ll never be able to follow.
It’s to post-rationalize the grid.
The Strategy: Reverse-Engineering Structure
We need to stop trying to build the grid before the creativity. Instead, apply the structure after the chaos.
Here’s the Edge Cases workflow for the neurodivergent designer:
Phase 1: The Sandpit (Chaos Mode)
Give yourself permission to design “badly.” Open a frame. Call it “Sandpit” or “Workbench” or “Fuck Around Zone.”
Drag in random screenshots.
Don’t name a single layer.
Ignore the 8pt grid.
Use whatever font weights feel right.
Just get the idea out of your head and onto the canvas.
Chase the dopamine. Make it look “real” as fast as possible. This is not the time for discipline. This is the time for velocity.
Phase 2: The Audit (Finding the Ghost Grid)
Once you have a screen that looks 80% right, stop. Do not duplicate it yet. Do not show it to anyone yet.
This is the most important step, and it’s the one most people skip.
Look at what you made.
Your intuition likely followed some internal logic, even if you weren’t conscious of it. Your brain was running pattern-matching in the background. You just need to surface it.
Here’s how:
Ask yourself:
What spacing did I use most often? (Select a few elements. Check the padding. I bet you’ll find you gravitated toward 16px or 24px more than you think.)
What font sizes did I actually use? (You probably used 14px, 16px, and 20px. Maybe a 32px for headers. Write those down.)
Which elements feel like they’re the “same thing”? (Those three cards? They should probably be a component. You just didn’t build them that way yet.)
Where did I break my own pattern and why? (That one card where you used 14px instead of 16px? Look closer. Was it because the card was smaller? That’s not random. That’s a rule you just discovered.)
This is where the magic happens.
You’re not imposing a system. You’re discovering the system you already built.
You’re looking at the desire paths in the grass, and now you’re going to pave them.
Phase 3: The Retrofit (The Grid)
Now you build the system.
You create the variables. You snap everything to the spacing scale you just discovered. You turn those three cards into an actual component. You rename the layers so they make sense.
You’re not starting over. You’re just formalizing what you already did.
This is the part that makes the file hand-off-able. This is the part that makes you look like you knew what you were doing all along.
Practical Tactics for the Chaos Designer
If you want to adopt this workflow without drowning in technical debt, here are three rules:
1. The “Playground” Page is Mandatory
Never design on the “Final” page. In Figma, keep a page called “Playground” or “Workbench.” This is a lawless zone. Nothing here needs to be neat. Only move things to the “Build” page once they’ve been retrofitted.
This also protects you from the shame spiral. Nobody sees the playground. It’s just for you.
2. Global Colors are the Only Constraint
If you ignore every other rule, just stick to Color Variables from the start. Fixing spacing later is easy. Fixing 50 different hex codes is a nightmare.
This is the one piece of structure you need up front. Everything else can be reverse-engineered.
3. Separate “Creation” from “Refactoring”
Don’t try to clean up your layers while you’re designing. That requires switching between “Creative Brain” (right hemisphere, big picture, vibes) and “Analytic Brain” (left hemisphere, detail-oriented, systems).
That context switching kills flow.
Make the mess first. Clean it up Tuesday morning.
Conclusion
The end user doesn’t see your layers panel. They don’t know if you started with a wireframe or a high-fidelity mockup. They only see the shipped product.
If your brain needs to generate a storm to build a house, let it storm.
Just remember to clean up the debris before you hand over the keys.