Skip to main content
Solved

Variables for gradient stops do not show within Inspect or Dev Mode


Moritz_Kuether

I have started to create some styles with gradients. I have assigned variables to the individual stops. However, if you look at the element with this style as a developer, the variables do not appear but only the hex values for the individual stops.

This makes little sense to me if others cannot see the variables that have been defined for the stops. Am I doing something wrong in the structure of the styles or is it designed so that you can’t see them?

Best answer by Gayani_S

Hey ​@Moritz_Kuether, I’ve got great news- this issue has now been addressed! I’m happy to share that we’ve released a fix for this.

We now support the ability to bind variables to gradient stops, and those variables can be inspected in Dev Mode.

This means that when a design team creates gradients—whether for buttons, backgrounds, or headers—they can now ensure consistency across all assets using gradient variables. With this update, developers can directly reference these variables in Dev Mode, reducing guesswork and making implementation more seamless.

 

Let me know if you have any questions, thank you! 

View original

Gayani_S
Figmate
  • Community Support
  • May 30, 2024

Hey @Moritz_Kuether, thank you for reaching out! Let me check this with the team internally as I am unsure here. Will get back to you once I have more information on this.

Appreciate your patience in the meantime!


Gayani_S
Figmate
  • Community Support
  • June 10, 2024

Hey @Moritz_Kuether, apologies for the delayed response! I’ve seen that you’ve also reached out to our support team.

I’m still going to share the latest update for others here:

We’ve checked in with the Variables team who confirmed this is an expected limitation of variable use in gradients and gradient fill styles which they hope to have ready to release an update for later this year.

Thanks!


Gayani_S
Figmate
  • Community Support
  • January 30, 2025

Hey ​@Moritz_Kuether, I’ve got great news- this issue has now been addressed! I’m happy to share that we’ve released a fix for this.

We now support the ability to bind variables to gradient stops, and those variables can be inspected in Dev Mode.

This means that when a design team creates gradients—whether for buttons, backgrounds, or headers—they can now ensure consistency across all assets using gradient variables. With this update, developers can directly reference these variables in Dev Mode, reducing guesswork and making implementation more seamless.

 

Let me know if you have any questions, thank you! 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings