Colour styles made up of two colour layers

[Phil9]

Hey there,

I have a problem with managing colour styles that are a combination of two colour layers in Figma, but my developer needs a single colour value to use in code.

We create designs in Figma and hand off to devs using Zeplin.

We’re using a version of the Material Design Theme, and for example the colour style ‘surface3’ is actually made up of 100% of the ‘surface’ colour and another layer on top which is 11% of the primary colour. There’s an obvious good reason for it being like this.

When I export the object using the colour ‘surface3’ to Zeplin it has a single colour value in the code that is the correct value for the two combined colours, but it’s not a ‘style’ and would mean the dev hardcoding the value in the code, like this:

const baseComponent = {
  width: 312,
  height: 241,
  borderRadius: 28,
  backgroundColor: "#212a41"
};

But what we really want is this:

const baseComponent = {
  width: 312,
  height: 241,
  borderRadius: 28,
  backgroundColor: colors.M_3_SYS_DARK_SURFACE3
};

In this case backgroundColor is the correct value, but it’s not a colour style in Figma. In Figma it’s a combination of ‘surface’ and 11% of ‘primary’.

Does anyone know of a solution to this that will result in a new style for these Figma colour styles that use multiple colour values (without creating them manually each time)?