figma-plugin icon indicating copy to clipboard operation
figma-plugin copied to clipboard

Introduce `gradient` token type

Open six7 opened this issue 2 years ago • 0 comments

We've introduced basic gradient support previously by using just a string: linear-gradient(...) and we've received feature requests to extend that to other gradient types such as radial or conic.

Issues where this is requested:

  • https://github.com/six7/figma-tokens/issues/858
  • https://github.com/six7/figma-tokens/issues/441

Instead of just adding more of these hacky solutions, we should introduce a new token type for gradients.

The W3C DTCG has outlined in their draft how these gradient tokens should look like: https://tr.designtokens.org/format/#gradient

These would look like this:

{
  "blue-to-red": {
    "$type": "gradient",
    "$value": [
      {
        "color": "#0000ff",
        "position": 0
      },
      {
        "color": "#ff0000",
        "position": 1
      }
    ]
  }
}

Note As this draft is still evolving and currently doesn't show any support of these additional gradient types, I consider this issue currently being blocked as we don't want to move forward until a decision has been made.

six7 avatar Aug 19 '22 19:08 six7