Skip to content

Conversation

@terynk
Copy link
Collaborator

@terynk terynk commented Dec 17, 2025

This pull request introduces support for additional token types and improves compatibility with both legacy and modern token formats. It adds handling for fontSize, borderRadius, lineHeight, letterSpacing, fontFamily, and fontWeight tokens, and ensures that both type/value and $type/$value properties are supported. The update also includes utility functions for font and line height conversions and improves robustness in token alias and value handling.

This update was prompted to support more token types and kept all previous functionality.

Token Type Support and Handling:

  • Added support for new token types (fontSize, borderRadius, lineHeight, letterSpacing, fontFamily, fontWeight) throughout the import pipeline and token type resolution, including mapping to Figma types and value conversions. [1] [2] [3] [4]
  • Updated the JsonToken interface and related type guards to support both legacy ($type, $value, $extensions) and modern (type, value, extensions) token property formats, ensuring backward compatibility. [1] [2]

Utility Functions for Value Conversion:

  • Introduced extractFirstFontFamily to parse the first font family from a CSS string, mapFontWeight to map numeric font weights to Figma-friendly names, and convertLineHeightPercentageToMultiplier to convert line height percentages to multipliers. [1] [2] [3]
  • Added convertRemToPx to convert rem values to pixel values for font size tokens.

Robustness and Error Handling:

  • Improved token alias resolution and error reporting to handle both value and $value properties, and clarified error messages for missing or unsupported tokens. [1] [2] [3]

Dependency Updates:

  • Upgraded @figma/plugin-typings to the latest version and replaced node-sass with sass in the development dependencies for better compatibility and maintenance. [1] [2]

export function convertLineHeightPercentageToMultiplier(value: any): number {
if (typeof value === "number") {
return value / 100
} else if (typeof value === "string") {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you have the redundant check for string type if you're going to treat everything like a string anyway?

function convertRemToPx(value: any): number {
if (typeof value === "number") {
return value * 16
} else if (typeof value === "string") {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why duplicate the string case for the default vs just having a default?

}

// Split by comma to get the first font in the stack
const firstFont = value.split(",")[0].trim()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a possibility that value.split doesn't have a valid return, which would cause this to crash?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants