Figma → code

Use the Figma MCP server to read the design. This skill covers only the variable → token derivation — the part that is specific to extracting from Figma. For the full token lists, cva, useStyleSheet and the rest, see component-styling.

Route by the lib you're implementing in (see the Libraries table in AGENTS.md): web → the Tailwind mapping; React Native → the themeJS mapping.

React web (libs/ui-react) — Figma variable → Tailwind class

Combine the Tailwind prefix for the CSS property with the unique part of the token name (the segment after the last hyphen of the CSS variable).

Figma shows	Prefix	Write	Not
background-color: var(--background-base)	bg-	bg-base	bg-background-base
color: var(--text-on-accent)	text-	text-on-accent	text-text-on-accent
border-color: var(--border-muted)	border-	border-muted	border-border-muted
padding: var(--spacing-4)	p-	p-4	p-spacing-4
border-radius: var(--radius-lg)	rounded-	rounded-lg	rounded-radius-lg
border-width: var(--border-width)	border	border	border-width
border-width: var(--border-width-active)	border	border-2	border-width-active

• Typography: Figma shows a style-name comment like /* body/3 */. No prefix — replace / with -: body-3.
• Drop shadow: Figma shows /* box-shadow/sm */. Prefix shadow-, take the unique part after the last -: shadow-sm. Values: shadow-sm…shadow-2xl.

React Native (libs/ui-rnative) — Figma variable → themeJS path

There are no classnames on RN. The same Figma variable maps to a path on the t object inside useStyleSheet((t) => …) (same token vocabulary as web, JS object shape — see component-styling/references/rnative.md).

Figma shows	themeJS path
var(--background-base)	t.colors.bg.base
var(--text-on-accent)	t.colors.text.onAccent
var(--border-muted)	t.colors.border.muted
var(--spacing-4)	t.spacings.s4
var(--radius-lg)	t.borderRadius.lg
typography /* body/3 */	t.typographies.body3

• Colours are nested under a category key (bg / text / border), and kebab segments become camelCase keys (on-accent → onAccent).
• Spacings and sizes are s-prefixed by pixel value: --spacing-4 → t.spacings.s4, --spacing-16 → t.spacings.s16; sizes likewise (t.sizes.s112, plus t.sizes.full for 100%).
• Border radius keys are named, not pixel values: none, xs, sm, md, lg, xl, 2xl, full (so t.borderRadius['2xl']).
• Typography keys are camelCase: body/3 → t.typographies.body3, body/2-semi-bold → t.typographies.body2SemiBold.
• Source of truth for the key sets: libs/design-core/src/lib/themes/js/primitives/primitives.others.ts (spacings, sizes, borderRadius) and the per-brand theme.*.ts colour objects. Confirm a key there rather than inventing one.

When a Figma size has no token (both platforms)

1. Use the closest available token (e.g. 112 for Figma's 108, 96 for 90).
2. Document the deviation in a code comment.
3. Consider requesting the token be added if it's needed often.

// ✅ Web — closest token, documented
<Tile className='w-112' size='md' /> // 112px (closest to Figma's 108px)