La entrega de diseño a desarrollo es uno de los momentos más críticos en el ciclo de vida de un producto. Un diseño puede verse impecable en Figma, Sketch o Adobe XD, pero si las especificaciones que se entregan a los desarrolladores son inconsistentes, como valores fraccionarios de píxeles 13.7px 22.4px 47.2px o tamaños de iconos con decimales, se genera fricción, errores de implementación y problemas de escalabilidad a largo plazo.
En este artículo verás por qué la consistencia de valores importa, los problemas técnicos que causan los decimales y medidas arbitrarias, y cómo impactan en la accesibilidad, la experiencia de desarrollo y la escalabilidad de un sistema de diseño.
El papel de los design tokens
El desarrollo front end moderno se apoya en design tokens, valores nombrados que representan decisiones de diseño. Espaciado con escalas como 4px 8px 16px 32px, tipografía con escalas como 12px 14px 16px 20px 24px, colores como primary 500 o neutral 200, y tamaños de iconos y radios como múltiplos de 4 u 8. Los tokens crean un lenguaje común entre diseño y código, aseguran consistencia, permiten actualizaciones globales sencillas y eliminan valores improvisados. Cuando alguien especifica un padding de 23.7px o un tamaño de fuente de 13.5px, se rompe el sistema porque no mapean a tokens, obligando a redondear o a crear excepciones. Referencia W3C Design Tokens Community Group
Por qué los píxeles con decimales no funcionan
1 Inconsistencias de renderizado entre dispositivos. La web y las plataformas nativas usan píxeles independientes del dispositivo dp en Android y pt en iOS. Un valor fraccionario como 13.5px se redondea de forma diferente según el DPR, lo que produce desalineaciones, iconos borrosos y espaciados irregulares. Referencia MDN Densidad de píxeles y píxeles independientes
2 Nitidez de iconos y cuadrícula de píxeles. Los iconos deben alinearse a la cuadrícula de píxeles para verse nítidos. Un icono de 23.7px genera antialiasing. Exportar iconos en tamaños enteros como 16 20 24 32px asegura nitidez. Referencia Apple HIG Puntos y píxeles
3 Escalabilidad y mantenibilidad. Los decimales arbitrarios generan bloat en CSS porque cada valor se convierte en una regla única. Se rompen los principios de reutilización de tokens y al escalar a diseños responsivos, temas o necesidades de accesibilidad, las inconsistencias se multiplican. Referencia Material Design Rejilla de diseño
4 Alineación multiplataforma. Un sistema de diseño debe funcionar en Web, iOS y Android. En iOS los pt son enteros, en Android dp y sp son enteros, y en Web los píxeles CSS se alinean por DPR. Los decimales no existen de forma nativa, por lo que el equipo de desarrollo debe redondear y se pierde la intención original.
Accesibilidad
La accesibilidad suele pasarse por alto, pero los valores fraccionarios degradan la experiencia. Legibilidad del texto, ya que tamaños decimales como 13.5px pueden verse más finos o borrosos; tamaños mínimos de interacción, donde se requieren 44x44px o 48x48dp y los padding fraccionarios pueden incumplirlos; y zoom o escalado, donde los decimales acumulan errores de redondeo y desalinean la interfaz. Usar escalas enteras y tokens predecibles mejora legibilidad, usabilidad y cumplimiento. Referencia WCAG 2.2 Tamaño mínimo de objetivo
Experiencia de desarrollo
La inconsistencia frena la entrega y crea deuda técnica. En la implementación, frameworks como Tailwind, Chakra o Material UI dependen de escalas de tokens y un espaciado de 13.7px no tiene clase equivalente. Además, cada valor arbitrario añade reglas únicas y aumenta el peso del CSS, dificulta el onboarding de nuevos desarrolladores y complica la colaboración, generando idas y vueltas de ajuste de píxel que consumen tiempo.
El poder de las rejillas
La mayoría de sistemas de diseño recomiendan la rejilla de 4px u 8px para mantener consistencia en espaciado, tipografía y componentes, escalar bien entre tamaños y densidades de pantalla y simplificar el traspaso de diseño a desarrollo. Referencia Eight Point Grid System
Buenas prácticas para diseñar
Usa solo design tokens y escalas predefinidas, evita valores fraccionarios y redondea al token más cercano, exporta iconos en dimensiones enteras como 16px 20px 24px, respeta una escala tipográfica como 12 14 16 20 24 sin decimales, y colabora pronto con el equipo de desarrollo para acordar definiciones de tokens y prevenir desviaciones.
Conclusión
Los decimales y valores inconsistentes parecen inocuos en las herramientas de diseño, pero causan problemas reales de implementación como iconos borrosos, renderizados inconsistentes, CSS inflado, objetivos táctiles inaccesibles y ruptura de los design tokens. Adoptar valores enteros alineados a tokens y rejillas garantiza consistencia, accesibilidad, escalabilidad y un traspaso diseño a código mucho más fluido. Diseñar no es solo cómo se ve en Figma, sino cómo se traduce a código y escala entre plataformas, y esa traducción depende de la consistencia y del respeto por el sistema.
Cómo te ayuda Q2BSTUDIO
En Q2BSTUDIO impulsamos productos digitales con enfoque de sistema desde el diseño hasta la puesta en producción. Somos una empresa de desarrollo de software a medida y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, automatización de procesos, ia para empresas y agentes IA. Si buscas un socio para construir interfaces consistentes, accesibles y escalables, descubre cómo abordamos proyectos de aplicaciones a medida y software a medida o cómo optimizamos flujos con automatización de procesos integrando tokens, rejillas y componentes reutilizables.
Lecturas recomendadas W3C Design Tokens Format Material Design Layout Grid Apple Human Interface Guidelines MDN Densidad de píxeles Eight Point Grid WCAG 2.2 Target Size