Tokens Studio for Figma

Appearance

Border Radius ​

Border Radius - Token Type ​

Border Radius was one of the first Token Types we supported in the plugin.

Since then, a lot has changed.

The Design Tokens Community Group (DTCG) hosts a Token specification on the W3C community group pages for web standards. Although it's in draft form, the tools and technologies working with Design Tokens are trying to align with the W3C DTCG specification.

INFO

The W3C DTCG specification does not recognize Border Radius as an 'official token type' and instead has defined Dimension as the preferred Type for radius-related design decisions.

If we want to fully align with the spec, it requires Tokens Studio to phase out the Border Radius Token. However, we believe the choice should be yours!

If aligning with the W3C DTCG spec is important to your project, we suggest using Dimension Tokens instead.

.

INFO

There is no immediate plan to discontinue support of the Border Radius Token Type.

Until we have a thoughtful solution to migrate between Token Types, we've included a custom transformation for this Token Type in the sd-transforms npm package detailed below↓.

If you love Border Radius Tokens and want to make your voice heard, we've set up a forum in our feedback tool where you can leave your comments! Hopefully with enough support the DTCG may reconsider having Border Radius as its own Token Type.

→ Conversation forum on Unofficial Token Types is here.

Creating a new Border Radius Token in the Tokens Studio Plugin for Figma.

Design decisions ​

Border Radius defines the corner roundness of a design element, such as frames, groups, or polygonal shapes.

Border Radius Tokens can be attached to Number Variables in Figma.

Possible values ​

The Border Radius Token supports numeric values with or without a unit.

Hard-coded values ​

The syntax used to write values for Spacing Tokens is important.

  • Be sure to avoid any spaces between numbers and units of measurement.
  • Units are always written in lowercase.

For example:

6px

Rem units (rem)

To support responsive design, you can define your Border Radius Token in rem units, and the plugin automatically converts the value to the pixel equivalent when applying the Token in Figma.

For example, a Border Radius Token with a value of 1rem will appear as a 16px corner radius in Figma.

Pixel units (px) ​

When you have design elements that should remain static even when users change their preferences, Border Radius Tokens can be defined in pixel units.

For example, 4px.

Values that reference another Token ​

When trying to reference another Token as the Value for a Border Radius Token, you will see Tokens in the dropdown list that are:

  • Living in Token Sets that are currently active.
    • In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
  • Token Type is compatible:
    • The same = borderRadius
    • number
    • dimension

Multiple values ​

You can define the value of a Border Radius Token to mimic how multi-value Border Radius properties are written in CSS.

When you click to apply the token value (without right-clicking), the plugin will apply the border radius based on the number of values in your token.

Single value - For example, 10px

  • Applies the value to all corners.

Two values - For example, 8px 64px

  • The first value is applied to the radii on the top and bottom.
  • The second value is applied to the radii on the right and left.

Three values - For example, 16px 8px 32px

  • The first value is applied to the radius on the top.
  • The second value is applied to the radii on the right and left.
  • The third value is applied to the radius on the bottom.

Four values - For example, 2px 4px 8px 16px

  • The first value is applied to the radius on the top.
  • The second value is applied to the radius on the right.
  • The third value is applied to the radius on the bottom.
  • The fourth value is applied to the radius on the left.

You can also write multiple value Border Radius Tokens with references. For example, {radius.sm} {radius.md}.

DANGER

Figma does not support Variables with multiple values!

If you export your Tokens to Variables in Figma, multiple value Tokens will be skipped, as Figma only supports single values.

→ Read the guide on Skipped Variables for more details.

Apply Border Radius Tokens ​

A Border Radius Token defines the corner roundness of polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.

You can apply a Border Radius Token to all sides of the design element at once, or each side independently.

With one or more elements selected in Figma, right-click on the Border Radius Token Name in the plugin to see the its options.

Select your desired design property by clicking on it to apply the Tokens value instantly.

INFO

If you click to apply a Border Radius Token to an element without accessing the right-click Token menu, the value will be applied to all sides if the Token has a single value.

If it has multiple values, it will apply the values to the independent properties defined in the Tokens Value. More details above ↑

The right-click menu of a Border Radius Token is open to reveal the design properties it can be applied to in Figma.

For independent corner styling, you can repeat the steps above and apply different Border Radius Tokens to each corner position of the same design element. Or, you can modify your Border Radius Tokens to have multiple values.

Transforming Tokens ​

When transforming Border Radius Tokens, there are some specific configurations to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of borderRadius to align with the DTCG Format Token Type of dimension.

→ SD-Transforms Read-Me Doc, Using the preprocessor

Token Values entered as a number without a unit will be converted to a number with pixels as a unit.

→ SD-Transforms Read-Me Doc, ts/size/px

Resources ​

Mentioned in this doc:

Figma resources: ​

Community resources: ​

  • None yet!

Known issues and bugs ​

Tokens Studio Plugin GitHub - Open issues for Token Type Border Radius

  • Color modifiers break when borderRadius token is renamed 2668

Requests, roadmap and changelog ​