Visual Testing with Figma + Storybook: Color Mismatch After MCP Image Export

Hi everyone,

I am currently working on a POC for automated visual testing where Figma designs are used as the source of truth and screenshots captured from a Storybook application are compared against those designs.

My current approach is:

1. Retrieve/export design images from Figma using Figma MCP.

2. Capture screenshots of the corresponding Storybook components.

3. Compare the Figma reference image with the Storybook screenshot using AI/image comparison techniques.

However, I have encountered an issue while extracting images through Figma MCP. The downloaded images do not seem to include the background color correctly. As a result, the foreground object colors appear different when compared with the actual rendered component, leading to inaccurate visual comparison results.

Interestingly, when I manually use the Export feature in the Figma UI, the image is downloaded correctly with the expected background color and the comparison works much better.

My questions are:

- Is there a way to export/download images through Figma MCP while preserving the background color exactly as shown in Figma?

- Are there any MCP settings, API parameters, or export options that I might be missing?

- Has anyone faced a similar issue while using Figma as a visual testing baseline?

- If you have implemented visual testing using Figma designs, what approach worked best for you?

- Instead of image-to-image comparison, would you recommend extracting design properties (size, spacing, colors, typography, etc.) and validating those against the application?

Any suggestions, best practices, or alternative approaches would be greatly appreciated.

Thank you!