figma-to-code

# 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. ```tsx // ✅ Web — closest token, documented <Tile className='w-112' size='md' /> // 112px (closest to Figma's 108px) ```