Skip to content

23 ‐ Figma troubleshooting

Jump to bottom
Pierre-Yves Lapersonne edited this page Jan 6, 2025 · 2 revisions

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 OUDSTheme+ColorMultipleSemanticTokens.swift
  • ElevationCompositeSemanticTokens definitions in OUDSTheme+ElevationCompositeSemanticTokens.swift
  • ElevationMultipleSemanticTokens definitions in OUDSTheme+ElevationMultipleSemanticTokens.swift
  • SizeMultipleSemanticTokens definitions in OUDSTheme+SizeMultipleSemanticTokens.swift
  • SpaceMultipleSemanticTokens definitions in OUDSTheme+SpaceMultipleSemanticTokens.swift
  • FontCompositeSemanticTokens definitions in OUDSTheme+FontCompositeSemanticTokens.swift
  • OrangeTheme+SemanticColorTokens.swift
  • ElevationCompositeRawToken definitions in ElevationRawTokens+Composites.swift
  • FontyRawTokens 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 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 OUDSTheme+BorderSemanticTokens.swift
  • ColorSemanticTokens definitions in OUDSTheme+ColorSemanticTokens.swift
  • ElevationSemanticTokens definitions in OUDSTheme+ElevationSemanticTokens.swift
  • GridSemanticTokens definitions in OUDSTheme+GridSemanticTokens.swift
  • OpacitySemanticTokens definitions in OUDSTheme+OpacitySemanticTokens.swift
  • SizeSemanticTokens definitions in OUDSTheme+SizeSemanticTokens.swift
  • SpaceSemanticTokens definitions in OUDSTheme+SpaceSemanticTokens.swift
  • FontSemanticTokens definitions in OUDSTheme+FontSemanticTokens.swift (soon)

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).

Clone this wiki locally