23 ‐ Figma troubleshooting

Context

The design team behind OUDS uses Figma to define the tokens (i.e. the configuration variables used across themes for components) and components. However even if the tool does not have the needed features, some concepts have been designed by the designers team to match the needs of Orange Unifed Design System, and we need in the iOS development side to find workarounds.

Tokens with multiple values

First, in the UI kit, some tokens have been designed to contain several values depending to what we call on iOS the color scheme (i.e. light mode or dark mode) and the size class (i.e. regular or compact mode, the viewport for web front).

Here are the tokens families which depend to the color scheme:

• color semantic tokens (wrapped in MultipleColorSemanticTokens)
• elevation semantic tokens (wrapped in MultipleElevationCompositeRawTokens)

Here are the tokens families which depend to the size class:

• font letter spacing semantic tokens (wrapped in MultipleFontLetterSpacingSemanticTokens)
• font line height semantic tokens (wrapped in MultipleFontLineHeightSemanticTokens)
• font size semantic tokens (wrapped in MultipleFontSizeSemanticTokens)
• size semantic tokens (wrapped in MultipleSizeSemanticTokens)
• space semantic tokens (wrapped in MultipleSpaceSemanticTokens)
• font semantic tokens (wrapped in MultipleFontCompositeRawTokens)

Because Figma cannot manage such "multiple" tokens, it produces only the variables to use suffixed by Light and Dark for color-scheme-related tokens, and suffixed by Mobile and Tablet for size-class-related tokens. The tokenator then parses the JSON Figma outputs and generates these suffixed Swift variables. The devlopment team in its side will keep up-to-date the "multiple" tokens wrapping the values to use.

Any "multiple" token is declared in a "Multiple" protocol. For example, MultipleColorSemanticTokens are all declared in ColorMultipleSemanticTokens. The color semantic tokens to use (i.e. of type ColorSemanticToken) are all declared in ColorSemanticTokens.

Composite tokens

Second, some tokens are "composite", i.e. are defined with other tokens values. For example, the UI kit defines some elevation token which are defined by an X offset, a Y offset, a color for the shadow and a blur effect. These four things are also tokens, i.e. X and Y offsets and blur values are ElevationRawTokenand color is ColorRawToken. Thus, an elevation effect is defined by a combination of these four values (ElevationCompositeRawToken). There are also "composite" tokens for fonts, which are defined by a font size (FontSizeRawToken), a font line height (FontLineHeightRawToken), a font weight (FontWeightRawToken) and a font letter spacin (FontLetterSpacingRawToken). However, just like "multiple" values, Figma is not able to manage such type of tokens and the tokenator does not receive the objects in the JSON to process.

All ElevationCompositeRawToken are defined in ElevationRawTokens enum file but seperated to the other generated values. All FontCompositeRawToken are defined in FontRawTokens enum file but seperated to the other generated values.

Thus, the iOS develoment team keeps updated these tokens, and the tokenator can bring updates for any values to use to define theme.

What is generated or not

Not generated files

Here are the files the tokenator cannot automatically update because cannot guess some logic not available in its JSON to process:

Definitions files

• ColorMultipleSemanticTokens definitions in OrangeTheme+ColorMultipleSemanticTokens.swift
• ElevationCompositeSemanticTokens definitions in OrangeTheme+ElevationCompositeSemanticTokens.swift
• ElevationMultipleSemanticTokens definitions in OrangeTheme+ElevationMultipleSemanticTokens.swift
• SizeMultipleSemanticTokens definitions in OrangeTheme+SizeMultipleSemanticTokens.swift
• SpaceMultipleSemanticTokens definitions in OrangeTheme+SpaceMultipleSemanticTokens.swift
• FontCompositeSemanticTokens definitions in OrangeTheme+FontCompositeSemanticTokens.swift
• OrangeTheme+SemanticColorTokens.swift
• ElevationCompositeRawToken definitions in ElevationRawTokens+Composites.swift
• FontRawTokens definitions in FontRawTokens+Composites.swift
• ElevationRawTokens composites definitions in ElevationRawTokens+Composites.swift
• FontRawTokens composites definitions in FontRawTokens+Composites.swift

Declaration files

• ColorMultipleSemanticTokens declarations in ColorMultipleSemanticTokens.swift
• ElevationCompositeSemanticTokens declarations in ElevationCompositeSemanticTokens.swift
• ElevationMultipleSemanticTokens declarations in ElevationMultipleSemanticTokens.swift
• SizeMultipleSemanticTokens declarations in SizeMultipleSemanticTokens.swift
• SpaceMultipleSemanticTokens declarations in SpaceMultipleSemanticTokens.swift
• FontCompositeSemanticTokens declarations in FontCompositeSemanticTokens.swift
• FontMultipleSemanticTokens declarations in *ontMultipleSemanticTokens.swift

Also, the tokenator does not update protocols declaring semantic and components tokens.

Generated files

Here are the files tokenator updates:

Raw tokens

• BorderRawTokens definitions in BorderRawTokens+Values.swift
• ColorRawTokens definitions in ColorRawTokens+Values.swift
• DimensionRawTokens definitions in DimensionRawTokens+Values.swift
• ElevationRawTokens definitions in ElevationRawTokens+Values.swift
• GridRawTokens definitions in GridRawTokens+Values.swift
• OpacityRawTokens definitions in OpacityRawTokens+Values.swift
• FontRawTokens definitions in FontRawTokens+Values.swift (soon)

Semantic tokens

• BorderSemanticTokens definitions in OrangeTheme+BorderSemanticTokens.swift
• ColorSemanticTokens definitions in OrangeTheme+ColorSemanticTokens.swift
• ElevationSemanticTokens definitions in OrangeTheme+ElevationSemanticTokens.swift
• GridSemanticTokens definitions in OrangeTheme+GridSemanticTokens.swift
• OpacitySemanticTokens definitions in OrangeTheme+OpacitySemanticTokens.swift
• SizeSemanticTokens definitions in OrangeTheme+SizeSemanticTokens.swift
• SpaceSemanticTokens definitions in OrangeTheme+SpaceSemanticTokens.swift
• FontSemanticTokens definitions in OrangeTheme+FontSemanticTokens.swift

Component tokens

• BadgeComponentTokens definitions in OrangeTheme+BadgeComponentTokens.swift
• BreadcrumbComponentTokens definitions in OrangeTheme+BreadcrumbComponentTokens.swift
• BulletListComponentTokens definitions in OrangeTheme+BulletListComponentTokens.swift
• ButtonComponentTokens definitions in OrangeTheme+ButtonComponentTokens.swift
• CheckboxComponentTokens definitions in OrangeTheme+CheckboxComponentTokens.swift
• ChipComponentTokens definitions in OrangeTheme+ChipComponentTokens.swift
• ControlItemComponentTokens definitions in OrangeTheme+ControlItemComponentTokens.swift
• InputTextComponentTokens definitions in OrangeTheme+InputTextComponentTokens.swift
• LinkComponentTokens definitions in OrangeTheme+LinkComponentTokens.swift
• ListItemComponentTokens definitions in OrangeTheme+ListItemComponentTokens.swift
• RadioComponentTokens definitions in OrangeTheme+RadioComponentTokens.swift
• SelectComponentTokens definitions in OrangeThemeSelectComponentTokens.swift
• SkeletonComponentTokens definitions in OrangeTheme+SkeletonComponentTokens.swift
• SwitchComponentTokens definitions in OrangeTheme+SwitchComponentTokens.swift
• TagComponentTokens definitions in OrangeTheme+TagComponentTokens.swift

Note that not the InverseTheme nor the OrangeTheme are managed by the tokenator, so their files are not updated (like InverseTheme+ColorSemanticTokens.swift and OrangeTheme+SemanticColorTokens.swift).

Warning

The lists above should be updated. You can have a look on the Swift sources to get answers if needed. Sorry!