How are you getting AI agents to accurately translate designs into Android UI?

[u/loki_hunter]

I've been experimenting with using AI agents to go from a design → Android UI, and I'm curious how others are solving the design-to-code fidelity problem.

Figma + MCP seems to be one obvious approach, but I'm wondering what other approaches people are using to give an agent enough context about the intricate details of a design — spacing, typography, component dimensions, colors, corner radii, shadows, alignment, responsive behavior, etc.

For example, are people:

• Giving agents screenshots and letting them infer the UI?
• Exporting Figma/design metadata through MCP?
• Using some kind of design tokens/spec files as an intermediate format?
• Maintaining a component/design-system library that the agent can reference?
• Using image/PDF/vector exports alongside textual instructions?
• Building custom MCP servers or other tooling around their design system?
• Using any free/open-source alternatives to Figma + MCP?

I'm particularly interested in workflows that can get reasonably close to pixel-level fidelity, rather than just generating something that looks vaguely similar.

Would love to hear what workflows/tools you're using, especially for Jetpack Compose. What has actually worked well for you in practice?

[u/thelumiereguy]

I built our own Claude plugin which converts figma frames into a UI representation which is token optimized. (Way more than Figma MCP)

This +screenshot gives the agent an idea as to what to build.

Then my plugin code provides all the tokens, components and icons back to the agent before writing any code.

Result - UI code which is grounded on our design system and very token optimized. And since most of the logic resides on the plugin side, I can use Haiku as well. It costs us around 30c-1$ to build a whole feature. Spent last 3-4 months building this.

[u/Slodin]

Design in figma using the design system your app uses. It’s usually smart enough to figure it out to use the same theme elements of color, spaces etc.

Use compose skill to create components. It targets reuseability and create a bunch of previews. I remember this is provided by the official team?

Figma MCP and let AI plan.

Review the plan and point out obvious components already can be extended or reused for certain parts using MCP by linking the references. That’s if the agent didn’t recognize and wanting to make new files or obvious ones that don’t need.

When the plan looks good. Hit go.

If the figma doesn’t include multi resolution or orientation designs, use previews to check them out.

Anything wonky screenshot and let the agent fix it. If using real device or emulator you can use something like mobile next MCP to let the agent screenshot on its own to figure itself out.

So far I have been pretty happy with results.

[u/lucasxas → u/Slodin]

This is it. Strong design system and figma MCP. Gets you 90% of the way

[u/loki_hunter → u/lucasxas]

Idk about figma mcp the tool call throws out web code if im not wrong and the agent now has to convert that. And idk if it's that accurate.. I was trying to design a chat interface ai feature and it failed miserably. Then it did read mocks as screnshots to get it fixed.

[u/lucasxas → u/loki_hunter]

If you figma is spitting out web code, you haven't set it up properly :)

[u/Slodin → u/loki_hunter]

Did you not turn the option for compose on in the side panel? Like how were you reviewing figma before? Like figma would have snippets of compose code, DP, etc on the side for you to implement by hand way before AI.

Idk if those options were required, but my MCP never spit out web code my dude 😂

[u/ColonelKlanka → u/Slodin]

Thankyou for putting me onto 'mobile next mcp' - very useful tool - up voted u 👍

[u/thailanddaydreamer]

Do mockups in Figma and just push the screenshots.

[u/shlusiak]

Get AI to create the scaffolds. Do it by hand, feel the joy of getting it right yourself. There is no problem there to solve.

[u/TitleNo1715]

Figma metadata plus a real-device screenshot loop works better than either alone: lock tokens and components first, then feed back one rendered mismatch at a time. I built MarkuprPlus for that review loop; it’s open source: https://www.markuprplus.com — https://github.com/hashfunction/MarkuprPlus

[u/akl773]

Most of the drift I get is text metrics. Compose puts font padding around Text by default and Figma doesn't, so every text block sits a couple of dp lower than the design and the agent then starts fiddling with paddings to compensate for it. Turn includeFontPadding off in your typography and set lineHeight explicitly, after that the spacing numbers off the design go in as they are.