//Overview
Getting Started

DS Investigación 2.0

Sistema de diseño para la aplicación de investigación de campo PAX. Documenta los fundamentos, componentes y patrones que componen la experiencia de gestores, líderes y regionales.

2,167

Componentes

363

Component Sets

1,047

Íconos

32

Estilos tipográficos

4

Niveles de tokens

5

Breakpoints

Estructura del sistema

El sistema sigue la metodología Atomic Design, organizando los componentes de los más simples (átomos) a los más complejos (páginas).

6

secciones

Foundations

Color, Typography, Spacing, Grid, Elevation, Iconography

2

familias

Atoms

Icon, Divider

8

familias

Molecules

Button, Checkbox, Input, Radio, Switch, Tag, Page Indicator, Drag

15

familias

Organisms

Header, Navigation, Cards, Modal, Toast, Stepper, Maps, Tables...

1

familias

Templates

Flujo Amarillo (168 templates)

1

familias

Pages

Pantallas finales (21 screens)

Contexto del sistema

Perfiles de usuario

El sistema cubre dos perfiles: Gestores y Líderes (agentes de campo con mayor densidad de información) y Regionales (supervisores con vistas más condensadas). Cada perfil tiene su propia escala tipográfica.

Flujos principales

Flujo principal (verde): investigación, onboarding, clientes. Flujo amarillo (cobranza): gestión de pagos, compromisos, notificaciones. Cada flujo tiene templates y pantallas propias.

Plataforma

Aplicación mobile-first. El diseño base es para pantallas de 390px (iPhone). Los componentes están pensados para interacción táctil.

Fuente de verdad

El archivo de Figma es la fuente primaria. Este sitio es una representación estructurada del sistema, con trazabilidad explícita entre cada elemento y su origen en Figma.

Trazabilidad

Cada elemento de este sitio indica su origen:

ExtraídoDato obtenido directamente de la Figma API
NormalizadoExtraído y procesado para la web
InferidoDerivado del análisis visual del archivo
PropuestoNo existe en Figma, agregado como complemento