Skip to main content

Hi, community! I’m pretty new to Figma so please bear with me. For a website design, I followed one of the many mesh gradient tutorials out there to make animated mesh gradients that work great in Figma’s preview mode.


But when my developer grabs Figma’s CSS to recreate the gradients in code, he says all sorts of numbers in the CSS code that Figma gives him are wrong, such as the rotation angles of the shapes that animate. He is making do by manually changing numbers based on his best guesses, but this seems like an inaccurate and labor-intensive workaround.


Many files and tutorials exist on Youtube and the Figma community that teach how to create animated mesh gradients in Figma, but none of these tutorials address the question of how a developer is supposed to consume the resulting animation in code to reproduce it on a real website.


Are my developer and I missing something fundamental about animated mesh gradients?

Hi @Julia81, Thanks for getting in touch! I totally get how frustrating it must be to manually adjust numbers in code.


Would it be possible for you to share the design file and the code where the rotation angles for the gradients are going wrong?

Also, it would be helpful to know how your developer is obtaining the CSS code for gradients. For example, are they right-clicking the frame and selecting ‘Copy as code’? This information will allow us to try and reproduce the issue in our own files for further investigation.


In the meantime, I’ve done some digging in our community and found a few plugins that, while may not be exactly what you’re looking for, could potentially be helpful to your developer:



Feel free to explore our community on your own.


Looking forward to hearing from you soon. If I’ve misunderstood anything, don’t hesitate to let us know.

Also, we believe our community is full of experts with brilliant insights and suggestions, please feel free to share here!


Thanks,

Thanks, Junko3! I have passed along your answer to the developer and will report back with followup questions.

Hii Julia, how did it go? Have you found a solution?

Hi! Thanks for checking in. We stopped trying with Figma – exploring options was taking up too much developer time. Instead we went with a javascript option.

Reply


Terms & ConditionsCookie settings