| name | ouds-ios-guide-figma-to-swift |
| description | How to derive a Swift token name from a Figma token path in the OUDS iOS project (raw, semantic and component tokens) |
| license | MIT |
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 |
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
| Figma path | Swift |
|---|
ouds/border/width/focus | theme.borders.widthFocus |
ouds/border/radius/pill | theme.borders.radiusPill |
ouds/space/fixed/medium | theme.spaces.fixedMedium |
ouds/space/scaled/3xsmall/mobile | theme.spaces.scaled3xsmallMobile |
ouds/size/icon/with-heading/xlarge/size-small/tablet | theme.sizes.iconWithHeadingXlargeSizeSmallTablet |
ouds/grid/ios/extra-compact/margin | theme.grids.extraCompactMargin |
ouds/grid/3xl/margin | NO Swift equivalent (non-iOS grid) |
ouds/font/family/ios/code | theme.fonts.familyIosCode |
ouds/color/1f525_repository/neutral/emphasized/black | theme.colors.repositoryNeutralEmphasizedBlack |
ouds/1f4a0_control/text-input/size/min-height | theme.textInput.sizeMinHeight |
ouds/1f4a0_control/text-input/color/border/hover-light | theme.textInput.colorBorderHover |
ouds/1f4a0_control/text-input/space/column-gap/1f4c4_label-asterisk | theme.textInput.spaceColumnGapLabelAsterisk |
ouds/1f4a0_action/button/border/radius/default | theme.button.borderRadiusDefault |
ouds/1f4a0_action/button-mono/color/bg/default/enabled-light | theme.button.monoColorBgDefaultEnabled |
ouds/1f4a0_indicator/badge/size/medium | theme.badge.sizeMedium |
ouds/1f4a0_navigation/link/size/icon | theme.link.sizeIcon |
|
