Design systems

Un design system es el conjunto compartido de componentes y reglas sobre el que se construyen varios productos. Aquí reunimos su estructura, su gobierno, la deriva, la auditoría y lo que cuesta.

14 artículos

Empieza aquí

Five rows with partly filled score bars on the left, lines crossing and reordering them into a ranked roadmap of five steps on the right, the first one lit

Diseño

Auditoría de design system: los 5 controles y la hoja de ruta

Una auditoría de design system mide uso de tokens, deriva de componentes, accesibilidad, gobernanza y adopción. Devuelve correcciones priorizadas y roadmap.

Four tall tubes, each with its own threshold mark at a different height, filled past the mark, lit above it and dark below

Diseño

Cuándo contratar una agencia para el design system (y cuándo esperar)

Cuatro umbrales deciden: superficies repetidas, ritmo de release, quién lo mantiene y una fecha fija. Por debajo, cuesta más de lo que devuelve.

Five tall day cards joined by a lit line: a component inventory, four scored bars, a focus ring test, paired duplicates, and a ticked list

Diseño

Cómo auditar un design system en 5 días: la checklist

La checklist día a día para auditar un design system: inventaría componentes, mide cuatro tipos de deriva, prueba la accesibilidad y entrega el plan.

Two lines on a chart, a rising one and a flat one, each bright only where it is lower, crossing at a ringed point, a cluster of small tiles and one single tile at their ends

Diseño

Design system interno o con agencia: cuándo gana cada uno

Un responsable interno de design system cuesta 145-185k dólares al año; un retainer de agencia 5-15k al mes. Cuándo gana cada modelo.

On a white ground, three rows of monthly bars: one tall block then empty months, twelve equal bars, and twelve bars split in two with the lower part growing

Diseño

Cuánto cuesta un design system en 2026: proyecto, retainer o copropiedad

Un design system cuesta de 5.000 a más de 60.000 euros, y luego hay que mantenerlo. Comparamos el precio por proyecto, retainer y propiedad compartida.

A ledger sheet of quiet rows with one white line item lit, linked to two bars on the right, the lower one about half as long

Negocio

ROI de un design system: medirlo como cuenta de resultados

Un design system ahorra hasta un 47% del tiempo de desarrollo. Asi se mide como linea de la cuenta de resultados y asi se defiende su presupuesto en 2026.

A row of six identical white components above, and below it six copies that tilt, shift and fade further each time, each with a dashed outline of the original over it

Diseño

Component drift: como se degrada un design system y como detectarlo

Solo el 8% de los equipos tiene un design system estable. El component drift es la distancia entre lo que disenas y la interfaz que se publica. Asi se detecta.

Seven stacked tiers narrowing upward, the lower four lit in white and the upper three in dashed outline, a zigzag line climbing through them in order

Diseño

Estructura de un design system: las 7 categorías y el orden

Un design system se sostiene o se cae según el orden en que construyes sus partes. Estas son las siete categorías y la secuencia que funciona.

Four groups of lit tile columns growing toward a dashed ceiling, cut back between groups, with dashed outlines where tiles were removed and dark tiles falling below

Diseño

Por qué quitamos componentes en vez de añadirlos: la dieta del design system

La mayoría de los design systems crecen hasta romperse. Tratamos el conteo de componentes como un número que mantener bajo. Las reglas que usamos para podarlo cada trimestre.

Six dark cards in a grid, each a small diagram of one lit tile and dark tiles in a different relationship: handed over, embedded, linked by recurring dots, feeding three, overlapping, orbiting

Diseño

Design system as a service: 6 modelos de agencia comparados en 2026

Design system as a service: una agencia diseña, gobierna y hace evolucionar el sistema sin handoff final. Seis modelos comparados.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Por qué quitamos Tailwind de producción: un design system solo CSS

Tras años usando Tailwind junto a nuestro design system, lo retiramos de producción. Esta es la arquitectura que lo reemplazó y lo que cambió.

A central white tile with nine lit tiles on an inner orbit joined by solid lines, and three dark tiles on a wider dashed orbit joined by dashed lines

Diseño

Cómo gobernar un design system en 10+ proyectos consumidores

Un playbook práctico para gobernar un design system en muchos proyectos consumidores: modelo de contribución, versionado, codemods y adopción.

A grid of identical dark pills with ten that break the pattern in white: wider, taller, square, tilted, shifted or doubled

Diseño

10 errores de design system que arruinan la coherencia a escala

Los botones se multiplican, los tokens se desvían, los componentes se bifurcan. Los 10 errores de design system que vacían un producto, y los arreglos.

From a tile on the left, a high white arc studded with small lit tiles reaches a lit tile on the right, while a straight grey line below loops three times and stops short

Diseño

Bibliotecas de componentes externas: un atajo caro

Las bibliotecas de componentes externas prometen velocidad pero atan a upgrades, marcas iguales y reescrituras cada dos años. Esto es lo que funciona.

Volver a Apuntes