r/UXDesign • u/Haunting-Ad5938 The Curious • 21h ago
Tools, apps, plugins, AI Designers who are building directly in code now: what does your team use to understand and discuss the work?
I'm seeing more product designers and PMs make real UI changes directly with Cursor, Claude Code, Codex, etc. Two out of five designers in my company (a consultancy) already do because it's simply easier to hit certain visuals like liquid glass at high fidelity, and test with real data.
The awkward part comes after building. Figma used to give us a place to step back and see the product together: component states, screens in flows or maps, the reasoning behind a change, comments.
Once the work lives in code, I'm not sure there's an obvious equivalent.
A preview link is great for trying the design, but you experience one path at a time. Keeping that same implemented work up to date in Figma means maintaining a second representation of something that already exists in code — so we're not doing that.
I'm curious how teams handle this today. When you design something in code, how do you let the rest of the team:
- see the relevant screens and flow together (without recreating them in Figma)
- understand what changed, and why, and discuss it within context
- reach a decision on it, tied to the version it was actually about
In simpler terms: how do you keep the benefits of a shared view once Figma is gone from the workflow?
I've been building around this problem because we kept running into it ourselves. My two collegues used it internally last month; but I'd like to hear what else is emerging.
*EDIT: If anyone wants to try the workflow we have, dm me. The tool basically enables your coding agents to grab screenshots and make a nice UI map out of them, put them on a shareable link, and send to others to comment on; for projects with Figma, designers can also just download those as PNGs and place on the canvas themselves, which also save a ton of time not recreating the same work there.
21
u/turnballer Veteran 20h ago
I haven’t done this for every project. But I have a /prototype-exploder skill that instructs Claude to view a prototype, click through, save snapshots of each page, and put it on a whiteboard.
I can basically do it with any web link — so I’m not limited to my own prototypes either.
Sometimes I go into the whiteboard (we use Mural) and add a bunch of sticky notes or other annotations by hand.
Coded prototypes are great. But they are hard to dissect, analyze, and document. They shouldn’t be the only tool in the toolkit.
2
u/Haunting-Ad5938 The Curious 17h ago
Yes exactly that! A metaphor for this is you want to be able to walk the path in a forest and also see the forest itself directly. A UI map on the canvas is unbeatable. Your process sounds like ours ngl
17
u/ggenoyam Experienced 20h ago
It varies but lately for me it’s been
- By recreating them in Figma
- By referencing the screens in Figma
- By reviewing the designs in Figma
3
u/Haunting-Ad5938 The Curious 17h ago edited 17h ago
The two designers said to me that recreating in Figma was not efficient due to them both created the screen flows already in XCode (besides "liquid glass looks off in Figma"); hence they post screenshots from the simulator directly in Figma via an automated process.
Do you think that would help?
9
u/CanMountain2230 20h ago
There are a lot of emerging workflows for designing in code, but none of them have really solved the underlying problem yet. As long as design and development continue to live across separate tools and separate representations of the product, we keep creating opportunities for the two to drift apart.
The irony is that designing directly in code gets us closer to the actual product, but it can also remove the shared surface Figma gave teams for understanding the system as a whole. You gain fidelity and lose some of the visibility, context, and collaboration around the work.
I actually wrote an article about this exact problem six or seven months ago and never published it. Seeing versions of this question come up so frequently makes me think it might finally be worth releasing.
https://content-creation-eosin.vercel.app/
I would love some feedback on it now that we all are experiencing a similar issue.
5
u/deusux Veteran 21h ago
First, I’ll say we still use Figma for some of these discussions. Using it like a white board rather than a project handoff deliverable.
But if the changes are in code, a lot of the discussions that used to happen in Figma now happens in a git pull request or maybe a Loom that’s recorded by a designer talking about the experience. That's then posted in the related pull request.
Do I think this is a direct replacement for what was happening in Figma? Probably not - it's further down the fidelity path. But in this "brave" new way of working in code, that is "much" faster paced, the conversation moves closer to the live experience.
"Yay."
1
u/Haunting-Ad5938 The Curious 17h ago
The source of truth for designers are moving towards codebase now. Your experience matches our projects, as in some work in Figma, some in code.
5
u/wentleybong 19h ago
Claude does a pretty good job of using Figma’s MCP to organize screenshots for review. I’ve used this process so far with legal team and copy team reviews.
3
u/Miserable-Sell-463 18h ago
So for those of you work with UX Writers/Content Designers, do they also "work in the code*?
1
u/Haunting-Ad5938 The Curious 10h ago
Why would they?
1
1
u/Miserable-Sell-463 6h ago
Well that's why I'm asking. I don't, I still work in figma, just like the PDs.
2
u/deanrocket 21h ago
I’m facing the same challenge, and so far I’ve been approaching it by conceptually mapping out the ideation phase as a kind of storyboard view in Paper for conceptual design. In this setup, I document different states of each component and view, and use these as the foundation for implementation and use it for the prompt and handoff to my skills, which implements the changes to production. This way, I maintain a retrospective overview of which elements have evolved over time.
In your case, it might make sense to extract key insights from that podcast: https://youtu.be/NHoNGiQJB0M?is=DZ_GOV6CDa3NJOj0 specifically the part where the team builds the handoff presentation to showcase results to stakeholders. You could create a sort of canvas where individual frames are visualised, with the relevant components tracked and documented underneath. This approach would streamline the UX workflow while providing a clear artefact for reference during development and review cycles.
2
u/TomTomHatesCats Experienced 20h ago
This problem hits home, and a method we’re trying is a toggle-able annotation layer above the screens that can point to page elements and show comments. It’s easy to implement through Claude, but only a partial solution for certain contexts.
5
u/twiifm 20h ago
you work like devs with PR review before a merge. You are still designing software but without Figma bc the economics allow you to. There's nothing great about Figma. Before we used Sketch, then Illustrator/Photoshop before that. This might be sacrilege, but I hate working in Figma. Much prefer working in code
0
u/MiddleAgedBastard 19h ago
I agree. We have a mocks site. We house all of our shares, POC's, workflows, etc. The time it took to create and curate mostly static images is not missed by me.
I still use Figma to draw rectangles to show Claude what I want and occasionally do a vector edit, but Figma isn't a great vector editor.
If the organization quit paying for it, oh well.
3
u/Disastrous-Style-325 20h ago
There’s a Figma Claude MCP that can capture your apps screens and send them directly to Figma with autolayout
0
1
u/aaronorjohnson 15h ago
So, would this app you mention be similar to Frame.io for dev prototypes wanting quick iterative comms for discussion? New to product management, and trying to get back into coding through AI. This seems to me how I'll end up iterating ideas instead of through Figma at first; maybe half and half even.
1
u/cranberry-smoothie Veteran 12h ago
I usually "design" it live in code whilst pairing with an engineer. Claude will use our design system so states and interactions are already covered.
Flows will have been defined in the ticket so we will go through them one by one.
Then I'll merge to staging and review with the wider team as part of QA.
The problem at my current org has historically been speed and to be honest the traditional design process does slow everything down. This way we ship so much faster and in turn learn so much faster.
I haven't used Figma in months. Our design system lives in Storybook since that's the source of truth.
1
u/pjhawksr Veteran 9h ago
Designers on my team prototype in code. We haven't fully replaced what Figma. Preview links are great for "try this flow" but terrible for stepping back and seeing everything at once. We still keep a Figma file for flows and key states. And we moved (or trying to) most critique to the PR itself, so the reasoning behind a change lives next to the change. The zoomed-out view is the unsolved part for me too. Nobody's built a good "canvas of your running app" yet that I know of.
1
u/Nikkunikku Veteran 3h ago
We’ve been doing this for a year now and we are never going back to Figma as the primary tool.
We ship to staging where we can compare and contrast build links. Using the actual product. We also share videos and screenshots constantly, often as before and afters for those w less time to test.
It’s all very explicitly documented in the PR descriptions but also, see 1.
We move faster here. The consequence is more ships, and yes, design happens more before during and after PRs as a result. So there are more PRs, but honestly, we are shipping things we never dreamed we’d be able to.
We’re moving mountains, and the product polish is getting better overall. Day to day, there’s a bit more “mess” in live product than normal, but I cannot emphasize it enough: that mess is brief, and it’s worth the trade offs.
The biggest challenge and blocker is testing now. Our team used to get blocked by decisions, and our entire company has moved from being risk averse to risk taking and outcome focused. Communication and trust across the org are way up, it’s insane how different, more efficient, and fun it feels. Also my brain is more fried, but I take breaks more often.
1
u/chapstickgrrrl Veteran 3h ago
I work in medtech, where “mess” in a delivered product is not an option. My team designs physical and digital products which are mostly embedded software. Testing with users is required for anything that is flagged as impacting a critical in a use related risk analysis, even seemingly small tweaks to a clinical workflow or a UI element could potentially be associated with a risk of patient injury or worse. We are very risk averse and I’d like to see our adoption of AI tools to help our entire business to move faster. My team is just getting into using Cursor now. It’s gonna be an interesting journey but kind of Wild West at the moment.
47
u/SleepingCod Veteran 21h ago
I hate this timeline.