Support Request: Personal/Custom Images Display in Preview Mode But Not in Production Deployment

Issue Summary

I'm experiencing a critical issue where my personal custom images display perfectly in Figma Make's preview mode but fail to load when the exported code is deployed to my production server. This has been blocking my project for two days.

Project Context

• Platform: React app built in Figma Make, deployed to Google Cloud VM
• Server Environment: Ubuntu VM with Nginx, serving built React app from web directory
• Build Process: npm run build then copying build files to web directory

Specific Issue

I have personal/custom images (my own photos/graphics, not stock images) that are critical to my project design. These are NOT Unsplash images - these are my own image files that I imported into Figma Make.

Current Behavior

• ✅ In Figma Make Preview: All personal images display correctly
• ❌ In Production: Images fail to load (broken image icons or missing entirely)
• ✅ Code Compilation: No errors during npm run build
• ✅ Import Statements: All imports resolved without errors

Troubleshooting Steps Attempted (Over 2 Days)

Attempt 1: Using figma:asset Import Scheme (Original Method)

import myImage from "figma:asset/abc123.png";
<img src={myImage} alt="My custom image" />

• Images showed in preview but not in production build
• Build process completed successfully but assets missing from build folder

Attempt 2: Switched to Public Folder References

<img src="/images/my-image.png" />

• Completely broke the template
• Created cascade of import errors throughout the application
• Had to restore original code

Attempt 3: Restored Original Import Method

• Went back to figma:asset import scheme
• Fixed all resulting import errors
• Images now show perfectly in preview mode again
• STILL NOT WORKING in production after export and deployment

Attempt 4: Verified Build Output

• Checked build/ directory after npm run build
• Static assets appear to be missing or in unexpected locations
• No clear pattern for where figma:asset images should be compiled to
• Personal images don't seem to be included in the build output at all

Attempt 5: Checked Export ZIP File

• Downloaded the export from Figma Make
• Unclear if personal images are properly bundled in the exported code
• No obvious assets folder containing the images

Technical Questions

1. Asset Compilation: How does Figma Make's build process handle personal/custom images imported via figma:asset? Where should these assets appear in the build output?

2. Export Verification: Is there a way to verify that personal custom images are properly included in the exported ZIP file before deployment?

3. Build Configuration: Are there specific build settings, webpack/vite configurations, or environment variables needed for figma:asset imports to work in production?

4. Alternative Approach: What is the recommended method for including personal/custom images in Figma Make projects that will be deployed to production? Should I:

   • Use remote URLs and host images separately?
   • Use the public folder approach (and if so, what's the correct way)?
   • Use a different import method entirely?

5. ImageWithFallback Component: I see there's an ImageWithFallback component at /components/figma/ImageWithFallback.tsx - should personal custom images use this component instead of direct img tags with figma:asset imports?

6. Build vs Preview: Why do personal images work flawlessly in preview mode but completely fail in the production build? Is there a fundamental difference in how assets are resolved?

What I Need

I need a clear, production-ready workflow to:

1. Import my personal/custom images into Figma Make
2. Export the project with images properly bundled
3. Deploy to production with images loading correctly
4. Ensure images work consistently in both preview and production environments

Additional Context

• I've spent 2 full days troubleshooting this issue
• Every "fix" either breaks something else or still doesn't work in production
• The preview mode works perfectly, making this especially frustrating
• I'm comfortable with command line, git, and deployment processes - the issue seems specific to how Figma Make handles custom images during the build/export process

Environment Details:

• Figma Make: Latest version (as of December 2024)
• Node.js: v18+ (on production VM)
• Build Tool: Vite (default Figma Make setup)
• Deployment Method: Manual copy of build files to Nginx web root