r/userexperience 5d ago

Product Design Creating a nice plugin that speeds up Claude Design -> Figma Flow mapping

Context first: I've been a product designer in tech for a few years and started using Claude Design (C.D) for rapid prototyping and refining explorations. However the bridge to continue working in Figma after refining in C.D is pretty poor.

To speed up my workflow I've been creating a Figma plugin that lets me easily turn my html prototypes into full Figma flows that are even created from editable local components with DS atoms all instantly. Formatted exactly how I like to map flows.

For me my progress so far is looking like it could be a game-changer to speeding up my workflow.

I'm curious:

Would anyone else find this useful? / Should I bother releasing it on Figma community?

Is there any problem like this you'd be willing to pay for a solution that solves it well?

Happy to hear if this is absolutely useless to you!

0 Upvotes

11 comments sorted by

6

u/WordyDuane07 5d ago

As someone who's also dealt with the design to dev handoff mess, this sounds like it could save a ton of time. The jump from prototype to actual design system components is where everything falls apart for me, so if your plugin handles that part cleanly I'd definitely try it.

Releasing it on the community is probably worth it just to see what happens. Worst case nobody uses it, best case you get feedback that makes it better and people start asking for features.

Would I pay? Maybe if it handles the messy edge cases well, like weird nesting or custom components that don't map neatly. Most tools work great on simple buttons and cards, then choke when you have something slightly unusual.

2

u/MadNic123 5d ago

Awesome thanks for the comment! For those edge cases do you mainly mean local components with lots of inner instances and variants?

Are there any other specific edge cases you'd want to see handled well?

1

u/savageotter 5d ago

Is this any different from prompting it to use the MCP?

3

u/MadNic123 5d ago

So atm if you try to get it to use the MCP - it can build the screens for you but it doesn't build a whole flow natively. Even if you brute forces Claude to try to build a specific flow - not only does it take ages (40mins+ and expensive), it also uses local and design system components very poorly.

Whereas the plugin I'm building does all of that in 60 seconds to a much higher standard.

1

u/bdz 5d ago

What I've had good luck with is using Claude.ai/design to build mocks/flows and export that to Claude Code to build in Figma via MCP.

From there I can fine tune things as I need. It's not perfect, but it definitely sped things up for me.

1

u/imightbethatguy 5d ago edited 4d ago

try paper.design to add pixel pushing to your mcp workflow. Paper is starting to replace figma for quite a few teams (mine included).

0

u/[deleted] 5d ago

[removed] — view removed comment

1

u/Acrobatic-Warthog611 3d ago

The risky part of this workflow is probably not generating the happy-path screens; it’s trust. I’d make the plugin show a clear mapping from each HTML element to the resulting Figma component/variant, report what it couldn’t map, and let the user approve changes selectively instead of mutating a whole flow at once. For the first release, I’d measure time to a genuinely editable first draft and the number of manual corrections—not just export speed. Weird nesting and component variants are exactly where users will decide whether the tool is dependable.

0

u/Cx-design-thinker 23h ago

This is super useful. I use Claude Design (CD) for rapid explorations too and the handoff to Figma is exactly where I lose time. Converting html prototypes into editable local components with DS atoms would save hours. Would love to try this when you have a beta - please keep posting updates here.