Un sistema es un conjunto de reglas, no de pantallas.
Un sistema existe para que la página cuarenta se parezca a la primera, aunque la construya alguien que no estuvo en el proyecto. Nosotros diseñamos esas reglas y las dejamos en el código.
Cuándo necesita un sistema.
Marque las situaciones que le resulten familiares.
Si se reconoce en dos o más, es el momento.
- 01
Las páginas ya no se parecen
Cada pantalla nueva añade otro botón, otro gris u otro espaciado, y nadie lo ha decidido.
- 02
Cada cambio lo toca todo
Cambiar un color o un radio obliga a revisar decenas de archivos, y siempre se escapa alguno.
- 03
Diseño y código no coinciden
Lo que se aprueba en Figma no es lo que se publica.
- 04
El equipo está creciendo
Las personas nuevas necesitan reglas escritas, no un criterio heredado.
Qué incluye un sistema de diseño.
Tokens compartidos con el código
Color, tipografía, espaciado, radios y sombras, definidos una vez y usados igual en Figma y en el código.
Componentes con todos sus estados
Reposo, hover, foco, deshabilitado, carga y error.
Reglas de composición
Cómo se combinan los componentes en una página.
Accesibilidad en cada pieza
Contraste, foco visible y tamaño de las áreas táctiles.
Documentación junto al componente
Cuándo usarlo y cuándo no.
Nombres alineados con el código
La misma estructura y los mismos nombres en el archivo de diseño y en el repositorio.
Por qué se abandonan los sistemas.
Cada riesgo y cómo lo evitamos.
Cómo funciona.
Así trabajamos normalmente. El presupuesto fija las fechas reales antes de empezar.
Auditoría
Inventario de lo que ya existe: cuántos botones, grises y espaciados distintos hay, y cuáles se usan de verdad. Entregables: inventario visual y lista de inconsistencias.
Cimientos
Componentes
Adopción
Preguntas frecuentes
El mínimo que cubra lo que realmente construye. La mayoría de equipos necesita unos veinte componentes, no doscientos.
Normalmente sí: lo auditamos, unificamos los duplicados y completamos lo que falta.
Sí. El sistema se diseña dentro de las restricciones del framework.
Una persona de su equipo, formada durante el proyecto. Sin un responsable, un sistema se degrada en pocos meses.
No siempre. Un sitio de diez páginas no lo necesita. Un producto, o un equipo de más de dos personas, debería empezar con uno.
Enséñenos qué está diseñando.
Descríbanos el proyecto en unas líneas. Le respondemos con un plan, un calendario y un presupuesto cerrado.