Gradients in dynamic color code generated components. How to represent that in Figma

Do you know the gradient color that Facebook Messenger, Instagram and many other messaging apps use on their chat bubbles?

I am aware that this is code generated and will change dynamically as the chat progresses, but I am trying to figure out how to represent that in Figma as a component.

A couple of options:

a) a plain grey component and a guide on how to apply the many different gradients
b) x numbers of components with limited variants on each gradient color that can be used in a mock
c) pick one type o gradient and apply it to that component, it won’t be accurate to what’s in prod, but it will communicate the idea
d) your suggestion

How would you do it?


plan A very nice

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.