Dev Mode Playground breaking image colour style

Hey all,

We are currently experiencing an issue in Figma where the dev mode component playground is incorrectly breaking images in components. Whether we add the image as a fill to a frame or insert the image directly the image is flipping and being cropped in the playground.

Has anyone experienced this and does anyone know of a solution?

Hi! It sounds like you’re encountering a rendering issue with images in Figma’s dev mode. This can sometimes happen due to misalignment or scaling issues in the component properties. To troubleshoot:

  1. Check Constraints and Resizing: Ensure that the images and frames are set with the correct constraints. If the image is set to “Fill” or “Fit,” try adjusting these settings or setting it to “Contain” to prevent distortion.
  2. Revisit the Component’s Layout Settings: If the image is inside a frame, check if the frame itself has any specific settings like fixed dimensions that may cause the image to crop. Ensure the frame has flexible resizing or auto-layout properties.
  3. Dev Mode Specific Bug: Sometimes, Figma’s dev mode can show different rendering behaviors. Try toggling between Preview and Dev Mode to see if the issue persists. If it’s still broken, clearing the cache or reloading the file might help.

You may also want to reach out to Figma support or explore the community forum for any similar issues. generlink canada
Hope this helps!