orange-opensource/ouds-ios/ouds-ios-guide-figma-to-swift

Name: ouds-ios-guide-figma-to-swift
Author: orange-opensource

Claude Code and agent skill by orange-opensource/ouds-ios

Trust tier 2

community

LLM review pending

By orange-opensource
Design
orange-opensource/ouds-ios
skills/ouds-ios-guide-figma-to-swift/SKILL.md
Updated 25 Sep 2026
Version 1.0.01 version recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

How to derive a Swift token name from a Figma token path in the OUDS iOS project (raw, semantic and component tokens)

Install

npx vskill@latest install orange-opensource/ouds-ios/ouds-ios-guide-figma-to-swift

SKILL.md

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

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`
`ouds/1f4a0_action/🚧_button-AI/color/bg/default`	NO Swift equivalent (WIP)
`core-ouds/dimension/750`	`DimensionRawTokens._750`
`core-ouds/font/family/monospace/sf-mono`	`FontRawTokens.monospaceSfMono`

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/ouds-ios-guide-figma-to-swift/SKILL.md

Popularity

Repository stars: 34
Repository forks: 9
7-day trend score: 18

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/orange-opensource/ouds-ios/ouds-ios-guide-figma-to-swift/badge)](https://verified-skill.com/skills/orange-opensource/ouds-ios/ouds-ios-guide-figma-to-swift)

Something wrong with this skill or its page? Tell us.