Summary
My role
End-to-end builder: from idea to plugin design to development
Duration
8 hours (YES, HOURS!!!)
Collaborators
Just me and AI :)
Responsibility
UX, Product and Development
Problem
Figma doesn’t let you batch-edit saturation across multiple images.
At the University of Michigan, I was a design instructor for two courses where students had to submit grayscale wireframes—removing color to focus on layout. But there was no fast way to do this.
So the process was tedious — Click into every image. Adjust saturation. Repeat… times 30.
It was painful, especially during critiques when students were scrambling to prep. So I built a plugin to fix that.
How I Tackled It
First, I dove into the data: 500 queries logged over 130+ calls. Here’s what I uncovered:
- Watched the problem happen:
Across two courses, I saw the same thing: students either skipped the grayscale step or did it last minute—because it was too tedious. - Validated with other instructors:
They’d seen it too. Everyone wanted a quicker way to help students stay focused on layout—not color. - Designed around simplicity:
I didn’t want dropdowns or complex controls. Just:
1. Select all image layers
2. Choose a grayscale style
3. Apply in one click - Built it with Cursor:
I designed the plugin within 2 hours (multiple iterations), and coded the plugin in Cursor over the next 6 hours, tested it directly in the Figma files we used for class and published to the Figma Community
You can checkout the plugin on your Figma file right now,
Open Plugin .
The Solution: Bulk Desaturate
I designed Bulk Desaturate to help students grayscale their work in seconds—not minutes. It now ships with three clean styles to give teams creative flexibility, without the mess.
Key Design Decisions
After watching students struggle with repetitive image edits and validating the need with instructors, it was time to turn that friction into flow. The solution had to be fast, intuitive, and give just enough flexibility to work across different types of projects—all without bloating the UI.
1. One-Click Bulk Select
Students didn’t want to manually click into each image just to desaturate it. They needed a way to apply changes across all image fills instantly.
Why this approach
Adding a bulk-select button eliminated the most frustrating part of the workflow: repetitive manual selection.
Design principle
Reduce cognitive load by minimizing unnecessary actions
2. Style Presets for Flexibility
Not all grayscale is created equal. Some wireframes needed soft neutrality, others called for bold contrast. Students needed choice—without complexity.
Why this approach
By offering three preset styles, the plugin gave users just enough control without adding friction.
Design principle
Support satisficing with progressive disclosure
3. Prevent Dead Ends
If nothing was selected, users got confused. Should they click something first? Is the plugin broken?
Why this approach
Disabling the buttons and guiding next steps prevented error-prone states and kept the experience clear.
Design principle
Use affordances and feedback loops to reduce friction.
4. Lightweight, Focused UI
This plugin is a utility, not a destination. Students use it mid-workflow, usually in a hurry, so the UI is minimal and lightweight.
Why this approach
Keeping the UI minimal helped students stay in flow and get back to designing fast.
Design principle
Preserve flow state by minimizing context switching.
The Impact: Faster Desaturation
After launching Bulk Desaturate, the results were clear:
- 800+ users in under 4 months:
What started as a fix for student projects is now being used by designers around the world. - 80+ saves on Figma Community:
Saved and reused by the broader design community—across teams, solo projects, and portfolios. - Faster, cleaner critiques in class:
Students could prep grayscale wireframes in seconds, helping instructors focus on structure, not color. - Adopted beyond the classroom:
Designers outside the university picked it up too—using it to speed up their wireframing workflows without context-switching.
Key Takeaways
After completing this design project in 2 weeks, I had a few takeaways:
- Build for friction you’ve felt:
I didn’t need research sessions—I saw the problem daily and had gained enough empathy and intuition which guided my design decisions. - Plugins don’t have to be complex to be useful:
Three buttons can change a workflow. I was even considering a no-UI plugin but decided against it to include room for future versions. - Design + Dev = Leverage:
This project reminded me why I love working at the intersection: I can spot a UX issue and ship a fix in UNDER 8 HOURS.
Wrapping It Up
Bulk Desaturate started as a quick fix for a classroom pain point—but ended up helping designers well beyond it. In just a few months, it's become a go-to utility for anyone needing fast, consistent desaturation in Figma.
Always open to feedback, feature ideas, or collabs — so let’s chat.
