PS | DS 3.0 — Integración con código

Puente diseño ↔ desarrollo del Design System 3.0: pipeline de tokens (Figma como fuente de verdad → CSS/JS/iOS/Android) y Code Connect (componentes de Figma mapeados a React).

1. Pipeline de tokens

Fuente única en formato DTCG (W3C Design Tokens), construida con Style Dictionary a múltiples plataformas.

tokens/
  primitives.json        # rampas de color, spacing, radius, border, icon, opacity, breakpoint, z, tipografía
  semantic.light.json    # tokens semánticos (sys.*) → alias a primitivos (modo claro)
  semantic.dark.json     # overrides de modo oscuro
style-dictionary.config.mjs

Build:

npm install
npm run build

Genera:

build/
  css/light.css          # :root { --sys-color-... }
  css/dark.css           # [data-theme="dark"] { ... }
  js/tokens.js           # ES6 exports
  js/tokens.d.ts         # tipos TypeScript
  ios/Tokens.swift       # PSTokens (Swift)
  android/colors.xml     # + dimens.xml

Los semánticos se emiten con outputReferences, así que en CSS quedan como --sys-color-primary-interactive: var(--color-cobalt-600) — trazables al primitivo.

Sincronización desde Figma

Los tokens/*.json son la fuente versionada. Para regenerarlos desde las variables de Figma (colecciones Colors, Tokens, Spacing, Foundations, Typography) se recomienda:

• Figma REST API (GET /v1/files/:key/variables/local, requiere plan Enterprise), o
• El plugin Tokens Studio exportando a DTCG.

Se conecta a CI: en cada cambio publicado en Figma, regenerar tokens/*.json → npm run build → publicar el paquete @priceshoes/ds-tokens.

Nota: el prefijo (ps) de las variables es configurable en style-dictionary.config.mjs.

2. Componentes React

src/components/ — Button, IconButton, Input, Badge. React + Tailwind, con estilos por tokens (var(--sys-color-*)), estados con pseudo-clases y accesibilidad (focus visible, aria-*, área táctil ≥44px).

3. Code Connect

code-connect/*.figma.tsx mapean cada componente de Figma (por URL + node-id) a su componente React, con figma.enum / figma.boolean / figma.textContent para traducir variantes → props.

Componentes mapeados (10 core): Button, Icon Button, Input, Badge, Checkbox, Radio, Switch, Chip, Toast, Dropdown.

Publicar (requiere token de Figma, plan Org/Enterprise, componentes publicados):

export FIGMA_ACCESS_TOKEN=xxxx
npm run cc:publish

Tras publicar, Dev Mode muestra el snippet de React correcto por cada componente/variante seleccionada.

Estado

• ✅ Pipeline de tokens funcionando y verificado (build multiplataforma).
• ✅ Componentes React core (10) + Code Connect listos para publicar.
• ⏳ Adopción por el equipo de desarrollo (lo que falta para el 100%): correr figma connect publish, integrar npm run build en su CI, y consumir @priceshoes/ds-tokens / @priceshoes/ds-react en la app.

Próximo (extensión)

• Ampliar Code Connect al resto de componentes interactivos (chip, Toast, checkbox, radio, switch, dropdown, Tabs…).
• Añadir tokens de tipografía compuesta (text styles) y sombras al pipeline.
• Automatizar el sync Figma → tokens.json en CI.