Cómo usar el Design System
El DS Investigación opera en dos capas: Figma para diseño y tokens CSSpara implementación. Esta guía explica cómo interactúan ambas capas y cómo incorporar el sistema en tu flujo de trabajo.
Para diseñadores
Accede al archivo Figma
ExtraídoEl archivo principal es DS — Investigación 2.0. Solicita acceso de edición al Design Lead.
Archivo: W9wXalUhAG7Y8GPGs2MPKN · Requiere cuenta Figma profesional del equipo
Usa los componentes de la librería
ExtraídoActiva la librería en el panel de Assets (Cmd+P → "Assets"). Todos los componentes están disponibles bajo los prefijos Icon/, Atoms/, Molecules/, Organisms/.
2,167 componentes disponibles · 363 sets de variantes
Respeta los tokens de diseño
ExtraídoUsa solo los estilos de color, tipografía y elevación definidos en la librería. No crees estilos locales — aplica los estilos del sistema desde el panel de propiedades.
Estilos disponibles: colores (Primitive/Semantic), tipografía (Gestores / Regionales), efectos (elevación)
Documenta las variantes que crees
PropuestoSi necesitas una variante que no existe, documéntala como "Propuesta" en el frame correspondiente de Figma antes de implementarla. No diseñes directamente en archivos de pantallas sin componentes del DS.
Proceso: propuesta en Figma → revisión con Design Lead → merge a librería → actualizar documentación
Para developers
Importa el CSS de tokens
El archivo tokens.css contiene todas las CSS custom properties del sistema con el prefijo --ds-. Impórtalo una sola vez en el entry point de tu app.
/* En tu entry CSS / global.css */ @import '@ds/tokens/dist/tokens.css'; /* O copia directamente tokens.css a tu proyecto */
Usa tokens semánticos en componentes
Siempre referencia tokens semánticos, no primitivos. Los semánticos expresan intención y permiten theming futuro.
/* ✓ Correcto */
.btn { background: var(--ds-color-semantic-brand-primary); }
/* ✗ Incorrecto */
.btn { background: var(--ds-color-primitive-green-500); }Consulta la documentación antes de construir
Antes de crear un componente, verifica si ya existe en el DS. Si existe, úsalo o extiéndelo. Si no existe, documenta la necesidad antes de construir.
/* Estructura de tokens disponibles: --ds-color-semantic-* → colores semánticos --ds-color-primitive-* → colores base (NO usar en components) --ds-typography-* → fuentes --ds-spacing-size-* → espaciado --ds-elevation-* → sombras */
Contribuye al DS
Si construyes un componente nuevo o una variante, documéntalo aquí y notifica al Design Lead. El DS crece con el equipo.
# Flujo de contribución 1. Revisa DECISIONS.md para contexto 2. Abre un ticket con la necesidad 3. Diseña en Figma con tokens del DS 4. Implementa con tokens CSS 5. Documenta en esta plataforma
Roles y responsabilidades
Design Lead
Mantiene la librería de Figma, aprueba nuevas variantes, actualiza tokens y sincroniza con el equipo de desarrollo.
Product Designer
Usa los componentes existentes, propone variantes cuando detecta casos no cubiertos, documenta estados nuevos.
Frontend Developer
Implementa usando los tokens CSS, reporta discrepancias Figma/código, contribuye a la documentación técnica.
Product Manager
Prioriza la deuda de DS en el roadmap, valida que los nuevos flujos respeten los principios del sistema.
Estructura del repositorio
design-system/
├── packages/
│ └── tokens/
│ ├── tokens.json # Fuente de verdad de todos los tokens
│ ├── scripts/build.js # Genera tokens.css y index.js
│ └── dist/
│ ├── tokens.css # CSS custom properties (--ds-*)
│ └── index.js # Exports JS del sistema
└── apps/
└── docs/ # Esta plataforma de documentación
├── app/ # Next.js App Router
├── components/ # Componentes de la doc (no del DS)
└── lib/
├── tokens.json # Copia local de tokens
└── navigation.ts # Estructura de navegación