Support multi-value radii and spacing tokens

[jofralogo]

Description

In addition to users being able to completely set border radii as they can do now, we'd allow multi-value tokens for borderRadii.

When applying a token, we'd just check if that token is a single-value token or a multi-value token, then we'd know where to apply it to.

Multi-value tokens shouldn't be allowed to be set on individual corners though, so the plugin showing that token would have to have some sort of logic to differentiate between the two, and thus disabling the other options.

Radius, Spacing tokens can be:

Single value (like today)
Clicking this on radii will apply to all corners (like today)
Clicking this on spacing will apply to the gap property (like today)
10px

Two values
Clicking this on radii will apply top-left-and-bottom-right | top-right-and-bottom-left
Clicking this on spacing will apply top-and-bottom | left-and-right
10px 5px

Three values
Clicking this on radii will apply top-left | top-right-and-bottom-left | bottom-right
Clicking this on spacing will apply top | right-and-left | bottom
2px 4px 2px

Four values
Clicking this on radii will apply top-left | top-right | bottom-right | bottom-left
Clicking this on spacing will apply top | right | bottom | left
1px 0 3px 4px

Requirements

• When right-clicking such a token, the individual side entries are disabled (border-radius: top left, top right, bottom left, bottom right | spacing: top, bottom, left, right), only the All option is present.
• For Spacing, the default for left-clicking such a token changes from Gap to All.
  
  

Initial description

Think in a way to allow to set multiple boderRadius values inline in order to have a different radius for each corner (like CSS does).

[six7]

Just so I understand correctly: You'd like to be able to create a token that defines each corner independently?

Because right now you can set tokens on individual corners by right-clicking a borderRadius token and then choosing which corners to apply it on (you can mix tokens).

I think introducing the option to combine these definitely makes sense (think certain shapes that always appear in a certain combination of radii).

if we introduced these combination tokens, I agree we should stay close to what you can do in css right now:

• single value
• two values
• three values
• four values

[jofralogo]

Yes. As far as I know, is not possible to set values for the two top or bottom corners, for example.

It would be great if we could set the border radius like CSS does:

• If one value is set, this radius applies to all 4 corners.
• If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
• Three values: The second value applies to top-right and also bottom-left.
• Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.

[six7]

I like it!

So in addition to users being able to completely set border radii as they can do now, we'd allow multi-value tokens for borderRadii.

When applying a token, we'd just check if that token is a single-value token or a multi-value token, then we'd know where to apply it to.

Multi-value tokens shouldn't be allowed to be set on individual corners though, so the plugin showing that token would have to have some sort of logic to differentiate between the two, and thus disabling the other options.

So when a user right-clicks a multi-value token, the following from this screenshot should be disabled:

• Top Left (disabled)
• Top Right (disabled)
• Bottom Right (disabled)
• Bottom Left (disabled)

[jofralogo]

I like it!

[badjar]

What would this multi-value tokens look like in the JSON code? I want to communicate the figma design intent (i.e. different radii on each corner) to the development team through the token.

If a best practice already exists for this use case please can someone tell me how? Should I set up aliases for a token for each corner?

[akosarch]

I guess simple CSS like string should work as well:

borderRadius: {
    top: "8 8 0 0",    // top-left, top-right: 8
    bottom: "0 0 {radius.md} {radius.md}"    // bottom-right, bottom-left: 8
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

[six7]

We'll move forward with this:

Radius, Spacing tokens can be:

Single value (like today)
Clicking this on radii will apply to all corners (like today)
Clicking this on spacing will apply to the gap property (like today)
10px

Two values
Clicking this on radii will apply top-left-and-bottom-right | top-right-and-bottom-left
Clicking this on spacing will apply top-and-bottom | left-and-right
10px 5px

Three values
Clicking this on radii will apply top-left | top-right-and-bottom-left | bottom-right
Clicking this on spacing will apply top | right-and-left | bottom
2px 4px 2px

Four values
Clicking this on radii will apply top-left | top-right | bottom-right | bottom-left
Clicking this on spacing will apply top | right | bottom | left
1px 0 3px 4px

When right-clicking such a token, the individual side entries are disabled, only the All option is present.
For Spacing, the default for left-clicking such a token changes from Gap to All.

[mazzzzzzzy]

What would this multi-value tokens look like in the JSON code? I want to communicate the figma design intent (i.e. different radii on each corner) to the development team through the token.
If a best practice already exists for this use case please can someone tell me how? Should I set up aliases for a token for each corner?

Most probably this will be an array:

[0, 0, 4, 4]

because then we're able to use tokens in all of these:

[0, 0, "{radius.md}", "{radius.md}"]

We are using it as a string right now in dev. And it works great.

[mazzzzzzzy]

The syntax I think should be optional in the settings, but not sure.

[benw31]

Any updates on this one? Be a great one to have as it could be used as a basic concept of a branded shape token.

[six7]

The day has come! 👀 This was shipped as part of V123 🎉 More info here: https://docs.figmatokens.com/available-tokens/spacing-tokens#multi-value-spacing-tokens