Diseño
Qué es un design system, cuándo lo necesita un producto y cuánto cuesta
Un design system reúne fundamentos, componentes reutilizables y reglas de uso. Los precios publicados van de unos 3.900 € (un estudio mexicano, 80.000 MXN) a más de 88.500 € con gobierno (un estudio noruego). Suele hacer falta cuando dos o más personas diseñan o programan interfaz a la vez. VITON13 lo ofrece desde 113 $.
¿Qué es un design system y en qué se diferencia de un UI kit?
Según Tank Studio Lab, es un conjunto documentado de reglas, componentes y patrones que mantiene coherente un producto mientras crece: el idioma compartido entre diseño y desarrollo. Un archivo de Figma con componentes es un UI kit y una librería en React es solo una librería; cada pieza puede formar parte de un sistema, pero ninguna lo es por sí sola.
| Nivel | Qué incluye | Encaja cuando |
|---|---|---|
| 1. UI kit con tokens | Color, tipografía y espaciado como estilos con nombre y unos pocos componentes, en Figma | Un solo diseñador y el producto cambia cada semana |
| 2. Componentes en Figma | Librería compartida de 20–40 componentes documentados, con variantes y estados | Dos o más diseñadores en el mismo producto |
| 3. Código y documentación | Los mismos componentes en código (React o Next.js en la web), tokens como variables, web de documentación o Storybook | Los desarrolladores montan el mismo formulario en varios sitios |
| 4. Gobierno y versiones | Un responsable, reglas para proponer y aprobar cambios, números de versión, plan para retirar componentes | Varios equipos o productos dependen del sistema |
¿Cuánto cuesta un design system?
No hay un precio único: «design system» puede ser un Figma con estilos de color o una librería de código versionada con un equipo detrás. Las cifras vienen de cuatro firmas, cada una con su mercado y alcance. Lee el alcance antes que el precio.
| Fuente y alcance | Precio | Plazo |
|---|---|---|
| Tank Studio Lab (México), marzo de 2026: básico, fundamentos y 15–20 componentes | 80.000–120.000 MXN (≈ 3.900–5.800 €) | 4 semanas |
| Tank: intermedio, 30–40 componentes y patrones | 120.000–200.000 MXN (≈ 5.800–9.700 €) | 6 semanas |
| Tank: completo, documentación y librería de código | 200.000–300.000 MXN (≈ 9.700–14.600 €) | 8 semanas |
| Luft (Noruega), febrero de 2026: base, 20–30 componentes, Figma y código | 15.000–25.000 $ (≈ 13.300–22.100 €) | 3–4 semanas |
| Luft: producción, 50–70 componentes, pautas WCAG AA | 40.000–80.000 $ (≈ 35.400–70.800 €) | 6–10 semanas |
| Luft: empresa, gobierno, equipo del sistema, varias marcas | 100.000–200.000 $ o más (≈ 88.500–177.000 €) | 12–20 semanas y mantenimiento |
| BAMN, mayo de 2026: 50–80 componentes, un producto | 8.000–15.000 $ (≈ 7.100–13.300 €) | No indica |
| Homem Máquina (Brasil), septiembre de 2026: 35–60 componentes, Figma y código, gobierno | 50.000–180.000 R$ (≈ 8.500–30.700 €) | 3–6 meses |
| VITON13: fundamentos, librería de componentes y documentación de gobierno | 113 $ asistido por IA o 173 $ dirigido por especialistas | 10–18 días laborables |
La conversión cambia la moneda, no la tarifa por hora: pide el desglose de horas. Autentika (Polonia) llega a unos 288.000 $ con 40 componentes a 100–120 horas cada uno, incluidas investigación, pruebas y documentación: un techo, no un presupuesto.
¿Cuándo necesita un producto un design system?
No al principio, y luego casi de golpe. Tank Studio Lab nombra estas señales:
- Más de dos diseñadores en el mismo producto; con uno solo, el sistema vive en su cabeza.
- Cada sprint los desarrolladores interpretan los diseños de otra forma o preguntan qué gris es este.
- Inconsistencia visible: botones, espaciados o modales que no coinciden entre pantallas.
- El equipo de producto pide pantallas nuevas cada semana y el de diseño no da abasto.
- BAMN y Luft sitúan el momento en el segundo diseñador: dos personas que diseñan a la vez necesitan una fuente de verdad.
¿Qué hace que un design system cueste más?
- Componentes y estados. Un botón de Tank tiene variantes, tamaños y seis estados; Autentika calcula 100–120 horas por componente.
- Plataformas. Solo web es un alcance; web más iOS y Android es otro (nivel alto de Homem Máquina).
- Temas. Modo oscuro o varias marcas: cada token tiene más de un valor y cada componente se revisa en cada tema.
- Accesibilidad. Luft añade pautas WCAG AA en el nivel de producción; solo el 59 % de los sistemas de la encuesta de zeroheight incluye pautas de accesibilidad.
- Código. En el botón de Autentika, desarrollador y diseñador dedican 24 horas cada uno; una librería solo en Figma se ahorra la parte del desarrollador.
- Migración. Pasar las pantallas existentes a los componentes nuevos puede costar más que el sistema; Luft cita 50.000 $ por el sistema y 150.000 $ por migrar.
¿Conviene construirlo o adoptar uno como shadcn/ui o Material?
| Opción | Qué es | La trampa |
|---|---|---|
| shadcn/ui | Componentes accesibles cuyo código copias en tu proyecto y editas; gratis | Su documentación lo presenta como la forma de construir tu librería, no como una librería; Homem Máquina añade que no da reglas, responsables ni marca |
| Material 3 (Material Web) | El sistema de código abierto de Google como componentes web | El repositorio indica que Material Web está en modo de mantenimiento a la espera de nuevos responsables |
| Un sistema propio | Fundamentos, componentes y reglas a medida de tu producto y tu marca | La vía más lenta y cara; compensa cuando mucha gente lo reutiliza |
Un camino intermedio: adoptar un kit y dedicar unas semanas a la marca. Luft lo cifra en 5.000–8.000 $ por dos o tres semanas de diseñador; Homem Máquina advierte de que los valores por defecto sin tocar hacen que el producto se parezca a todos.
¿Cuánto cuesta mantener un design system?
Un sistema es un producto con usuarios y se deteriora si nadie lo cuida. Homem Máquina reserva cada año el 20–30 % de la inversión inicial, que en equipos grandes se vuelve de media persona a tres; sus cifras anuales van de 3.000–12.000 R$ para una base adaptada a 15.000–45.000 R$ para un sistema de producto. Autentika lo considera a menudo la parte más cara.
La clave es el responsable: el 83 % de los equipos de la encuesta de zeroheight tiene un equipo dedicado, también el 71 % en organizaciones de menos de 100 personas.
¿Se amortiza un design system y quién lo ha medido?
Trata cada cifra de ROI como una afirmación con autor. Circulan tres tipos.
- Modelos. La fórmula de Smashing de 2022, de dos diseñadores de BestSecret Group, supone unos diez diseñadores y treinta desarrolladores, doce meses de arranque con el 20 % de su tiempo y ahorros del 38 % (diseño) y 31 % (desarrollo) promediados de cinco estudios. Los autores admiten que el ahorro no se conoce antes.
- Hipótesis. Autentika recoge un retorno de 7,5 a 1 de una empresa ficticia con 1.000 diseñadores y desarrolladores; Tank afirma que se paga sola en 3–6 meses, sin enseñar el cálculo; Luft parte de 15–25 horas semanales ahorradas a 75–85 $.
- Encuestas. En el informe de zeroheight de 2026 solo el 5 % de 147 profesionales mide el ROI. Lo realiza un vendedor de herramientas de documentación y respondió quien quiso.
Tu prueba: horas semanales perdidas en dudas de interfaz y repeticiones, por una tarifa media y por 52, frente al precio de construcción más un año de mantenimiento. Si no puedes estimar la primera cifra, aún no es el momento.
¿Cuándo no necesitas un design system?
Tank Studio Lab lo compara con comprar un CRM teniendo tres clientes. Sus casos:
- Un sitio de marketing de una o cinco páginas: basta un Figma bien organizado con estilos definidos.
- La fase de MVP: la velocidad pesa más que la coherencia y aún no sabes si el producto sobrevivirá.
- Un equipo de una persona: el sistema vive en su cabeza y su código hasta que alguien más lo necesite.
- Nadie puede ser responsable: en zeroheight la falta de recursos aparece en los tres modelos de trabajo, y la falta de responsable claro en dos.
¿Cuánto costarían un design system y sus pantallas con VITON13?
Un sistema suele contratarse junto con las pantallas del producto al que sirve. Los totales suman los precios de partida de VITON13 en los dos modos de producción.
Calculadora de costes
Planifica tu design system
Marca lo que necesites; los totales se actualizan al elegir.
Tu estimación
- Asistido por IA
- desde 113 $
- Dirigido por especialistas
- desde 173 $
- Plazo
- 10–18 días laborables
las fases pueden solaparse; el presupuesto escrito fija las fechas
Recibir un presupuesto escrito en 1 día laborablePrecios de partida de los paquetes de VITON13; el presupuesto escrito confirma alcance y precio tras el briefing.
Plazos: el sistema 10–18 días laborables, el paquete SaaS 15–30 días laborables y el de dashboard 6–10 días laborables.
Cómo construye VITON13 un design system
Empezamos investigando lo que tu equipo publica hoy: pantallas, archivos de Figma y elementos repetidos en varias versiones. Después fijamos la dirección visual y los fundamentos, construimos la librería de componentes y escribimos la documentación de gobierno sobre cómo se usa y se cambia el sistema, y lo entregamos a tus diseñadores y desarrolladores. El número de componentes y las plataformas se escriben en el presupuesto antes de empezar. Asistido por IA: la IA acelera la investigación y los primeros borradores, y un diseñador revisa cada decisión. Dirigido por especialistas: lidera un diseñador y la IA asiste, por eso el segundo precio es más alto.
Desarrollo de sistema de diseño
- Precio
- 113 $ asistido por IA o 173 $ dirigido por especialistas
- Plazo
- 10–18 días laborables
Diseño de producto SaaS
- Precio
- 213 $ asistido por IA o 313 $ dirigido por especialistas
- Plazo
- 15–30 días laborables
Diseño de dashboard analítico
- Precio
- 93 $ asistido por IA o 113 $ dirigido por especialistas
- Plazo
- 6–10 días laborables
Asistido por IA: la IA prepara borradores en pasos definidos y una persona dirige y revisa cada resultado. Dirigido por especialistas: un especialista hace el trabajo y la IA ayuda.
Qué incluye
- Fundamentos del sistema de diseño
- Una librería de componentes
- Documentación de gobierno
- Entrega a tus diseñadores y desarrolladores
- Plazo: 10–18 días laborables tras aprobar el briefing
No incluye
- Costes de terceros: licencias de tipografías, puestos de Figma, plataformas de documentación, alojamiento
- Trabajo de ingeniería en tu código, salvo que el alcance escrito lo nombre
- Asesoramiento legal o una declaración de que tu producto cumple una ley de accesibilidad
- El mantenimiento diario del sistema tras la entrega
Revisiones: 2 rondas de revisión sobre los entregables
Recibir presupuesto en 1 día laborablePresupuesto por escrito en 1 día laborable
Ejemplo
PILOTOPiloto en curso
Todavía no hay un caso publicado de design system
VITON13 aún no ha publicado un design system hecho para un cliente, así que esta guía no incluye pantallas de antes y después ni horas ahorradas. Los primeros sistemas se hacen en el programa piloto y solo se mostrarán con permiso del cliente.
Qué no demuestra
- Los rangos de precio proceden de las firmas citadas y los umbrales de sus propios consejos; nada de ello mide el trabajo de VITON13.
Preguntas y respuestas
¿Qué diferencia hay entre un design system, un UI kit y una librería de componentes?
Un UI kit es un archivo de Figma con componentes visuales; una librería de componentes es código reutilizable, por ejemplo en React. Un design system los reúne con fundamentos, patrones, reglas de uso documentadas y un responsable. Para Tank Studio Lab, la documentación separa una librería de un sistema.
¿Cuánto tarda en construirse un design system?
Tank cita cuatro semanas para el alcance básico, seis para el intermedio y ocho para el completo con código; Luft, de tres a cuatro para una base de 20–30 componentes; Homem Máquina, de tres a seis meses para un sistema de producto. VITON13 entrega su paquete en 10–18 días laborables.
¿Puedo empezar con shadcn/ui y añadir el design system después?
Sí, y para un equipo pequeño es el consejo habitual. Guarda colores, espaciados y radios como variables desde el primer día y anota cada cambio que hagas a un componente. Cuando varias personas necesiten las mismas reglas, documéntalas: eso convierte una librería en un sistema.
¿Merece la pena para una startup con un solo producto y pocos diseñadores?
Puede, pero se amortiza más despacio. Homem Máquina dice que los equipos con varios productos suelen ver retorno en 8–18 meses, que un producto único con equipo pequeño puede tardar más y que entonces lo más defendible es la base adaptada. Es la opinión de un estudio, no una medición.
¿Qué debo preguntar a un estudio antes de aceptar un presupuesto?
Cuántos componentes y estados; qué plataformas y temas; si la librería es solo Figma o también código; el nivel de accesibilidad; quién es responsable tras la entrega; y si incluye migrar las pantallas existentes. Dos presupuestos solo se comparan si estas respuestas coinciden.
¿Sirven los precios de México o Brasil como referencia para España?
Como orden de magnitud, sí; como tarifa, no. Tank cotiza en pesos y Homem Máquina en reales, y la conversión solo cambia la moneda. Compara el alcance (componentes, plataformas, código, gobierno) y pide las horas y quién las trabaja.
Fuentes
- Tank Studio Lab, Qué es un sistema de diseño —
- Luft, Do startups need a design system? (inglés) —
- BAMN, Design systems for growing companies (inglés) —
- Homem Máquina, Quanto custa criar um design system (portugués) —
- Autentika, How much is a design system? (inglés) —
- Smashing Magazine, The ROI of a design system (inglés) —
- zeroheight, Design Systems Report 2026 (inglés) —
- shadcn/ui, Introduction (inglés) —
- Material Web, README (inglés) —
- Banco Central Europeo, tipos de cambio del euro —