[Android / UI] Icons not syncing correctly when using Stitch for mobile app

Stitch
, ,
1

Hi everyone,

I’m currently facing an issue while using Stitch to build the UI for my Android app, and I’m not sure if this is a common problem or something specific to my setup.

:pushpin: Problem description

  • I import my design from Figma into Stitch

  • The overall layout renders correctly

  • However, icons are not syncing properly, with issues like:

    • Some icons are missing

    • Some have incorrect sizes

    • Others appear blurred or scaled improperly

    • In some cases, icons don’t load at all (showing empty or placeholder)

Despite this, the issue is inconsistent — sometimes icons change behavior after rebuilding the project.

:red_question_mark: Questions

  1. Are there specific requirements for icons when using Stitch (SVG vs PNG, size, naming, etc.)?

  2. Is there any configuration needed to ensure correct asset mapping?

  3. How can I debug how Stitch maps icons into the generated code?

  4. Does anyone have a recommended workflow for Figma → Stitch to avoid these issues?

2

Thanks for reaching out, @Alex_Nguyen! To help resolve this, please try these troubleshooting steps:

  • Flatten Icon Layers: Stitch currently imports icons as a single piece. Ensure your icons are merged into a single vector layer rather than multiple nested layers.
  • Check Icon Padding: Double-check the padding in Figma, as excessive spacing can sometimes cause alignment issues during import.
  • Review design.md: We’ve just rolled out *design.md in Stitch. After importing, check there to see if the mapping is recognized correctly.
  • Active Prompting: You can also try selecting the screen and prompting Stitch directly to replace the placeholder.

Let me know if any of these help!

1 Like