ouds-ios-guide-figma-to-swift

Files (1)

• SKILL.md

SKILL.md (first lines)

# Skill: ouds-ios-guide-figma-to-swift

## 1. Quick-reference cheat sheet

```
PATH ANATOMY
  core-ouds/<family>/<id>                          → raw token
  ouds/<category>/…                                → semantic token  (no 1f4a0_)
  ouds/1f4a0_<group>/<component-name>/<sub-path>   → component token

LAYER DETECTION
  core-ouds/…          → Layer 1 raw   → <Family>RawTokens._<id>
  ouds/… no 1f4a0_     → Layer 2 sem   → theme.<provider>.<name>
  ouds/… with 1f4a0_   → Layer 3 comp  → theme.<component>.<name>

STOP IMMEDIATELY (no Swift equivalent)
  any segment has 🚧 or 1f6a7_          → WIP token
  ouds/grid/<x>/ where <x> ≠ ios        → non-iOS grid

PROPERTY NAME (apply in order)
  1. Drop layer prefix + provider/component segment
  2. Strip emoji prefixes from segments: 1f4c4_ (📄)  1f525_ (🔥)
  3. Each segment: kebab-case → TitleCase
  4. Join all, lowercase first letter
  5. -light / -dark suffix pair → drop suffix, single property (MultipleColorSemanticToken)
  6. /mobile  /tablet → keep as …Mobile / …Tablet (separate properties)
  7. Numeric qualifiers 2x 3x 4x 5x → stay lowercase as-is (3xsmall not 3Xsmall)
  8. Semantic provider: do NOT repeat the domain in the property name
  9. button-mono → theme.button, prepend "mono" to property name
```

---

## 2. Provider tables

### Layer 2 — Semantic providers

| Figma prefix | `theme.` property | Notes |
|---|---|---|
| `ouds/border/` | `borders` | |
| `ouds/color/` | `colors` | |
| `ouds/color/mode/` | `colorModes` | |
| `ouds/color/chart/` | `colorsCharts` | |
| `ouds/color/decorative/` | `colorsDecorative` | |
| `ouds/dimension/` | `dimensions` | |
| `ouds/effect/` | `effects` | |
| `ouds/elevation/` | `elevations` | |
| `ouds/font/` | `fonts` | |
| `ouds/grid/ios/` | `grids` | `ios/` segment dropped from property name |
| `ouds/opacity/` | `opacities` | |
| `ouds/size/` | `sizes` | |
| `ouds/space/` | `spaces` | |

### Layer 3 — Component providers

The `1f4a0_<group>/` segment is always dropped. `<component-name>` → lowerCamelCase = `theme.` property.

| Figma `<component-name>` | `theme.` property |
|---|---|
| `button` | `button` |
| `button-mono` | `button` (mono — prepend `mono` to property) |
| `text-input` | `textInput` |
| `text-area` | `textArea` |
| `pin-code-input` | `pinCodeInput` |
| `password-input` | `passwordInput` |
| `checkbox` | `checkbox` |
| `radio-button` | `radioButton` |
| `switch` | `switch` |
| `chip` | `chip` |
| `select-input` | `selectInput` |
| `quantity-input` | `quantityInput` |
| `badge` | `badge` |
| `tag` | `tag` |
| `input-tag` | `inputTag` |
| `link` | `link` |
| `list-item` | `listItem` |
| `bar` | `bar` |
| `skeleton` | `skeleton` |
| `alert` | `alert` |
| `divider` | `divider` |
| `bullet-list` | `bulletList` |
| `icon` | `icon` |

### Layer 1 — Raw token families

| Figma prefix | Swift type |
|---|---|
| `core-ouds/dimension/` | `DimensionRawTokens` |
| `core-ouds/font/` | `FontRawTokens` |
| `core-ouds/color/` | `ColorRawTokens` |
| `core-ouds/border/` | `BorderRawTokens` |
| `core-ouds/elevation/` | `ElevationRawTokens` |
| `core-ouds/grid/` | `GridRawTokens` |
| `core-ouds/opacity/` | `OpacityRawTokens` |
| `core-ouds/effect/` | `EffectRawTokens` |

Numeric-only IDs get a leading underscore: `core-ouds/dimension/750` → `DimensionRawTokens._750`

---

## 3. Critical rules

**R5 — Light/dark pairs → single property**
`color/border/enabled-light` + `-dark` → `colorBorderEnabled: MultipleColorSemanticToken` (drop suffix)

**R6 — Mobile/tablet → separate properties**
`space/scaled/3xsmall/mobile` → `scaled3xsmallMobile` | `…/tablet` → `scaled3xsmallTablet`

**R7 — Strip emoji annotation prefixes**
`1f4c4_` (📄) and `1f525_` (🔥) are stripped from the segment, name kept.
`1f4a0_` (💠) and `1f6a7_` (🚧) are NOT stripped — they control layer detection and WIP exclusion.

**R8 — Semantic: domain NOT repeated in property name**
`ouds/border/width/focus` → `theme.borders.widthFocus` (not `borderWidthFocus`)
Component tokens are different: domain IS repeated → `theme.button.borderWidthDefault`

---

## 4. Examples

From Orange-OpenSource/ouds-ios, MIT.

More from Orange-OpenSource/ouds-ios