Diseño UI y Sistemas de Diseño

Jerarquía Visual: Guiar la Mirada del Usuario La jerarquía visual es el principio más importante del diseño UI. Determina en qué orden el usuario procesa la información en una pantalla. Un buen diseño guía la mirada naturalmente hacia lo más importante primero. Herramientas de jerarquía visual Tamaño: los elementos más grandes capturan la atención primero — usa esto para títulos y CTAs Contraste: alto contraste (texto oscuro sobre fondo claro) atrae más que bajo contraste Color: un solo color de

El Color como Herramienta Funcional En diseño UI, el color no es solo decoración — es una herramienta funcional que comunica significado, guía la atención y genera emociones. Una paleta bien definida es la base de cualquier sistema de diseño profesional. Construyendo una paleta de colores para UI Color primario: el color principal de tu marca, usado en botones, links y elementos de acción Color secundario (opcional): un color complementario para acentos y elementos secundarios Neutros: una escal

Tipografía que Escala en Productos Digitales La tipografía representa el 90% del contenido visual de una interfaz. Una escala tipográfica bien definida hace que tu producto se sienta profesional y sea fácil de leer en cualquier dispositivo. Construyendo una escala tipográfica Define 6-8 tamaños basados en una proporción matemática (1.25 o 1.333 son buenas opciones para UI) Ejemplo práctico: Display 36px, H1 30px, H2 24px, H3 20px, Body 16px, Small 14px, Caption 12px Cada tamaño necesita un line-

Respuesta rápida: qué es design system: un design system, o sistema de diseño, es el conjunto de tokens, componentes, patrones, documentación y reglas que permite construir interfaces consistentes entre diseño, producto y desarrollo. No es solo un archivo de Figma ni un UI kit: sirve para que botones, formularios, tablas, colores, tipografías y flujos se usen igual en todo el producto. Design Systems: La Base de Productos Consistentes Un design system es una colección organizada de componentes r

Design Tokens: La Capa Atómica del Sistema Los design tokens son los valores más básicos y fundamentales de tu sistema de diseño. Son como variables que almacenan decisiones de diseño (colores, tamaños, espaciados) y se pueden compartir entre Figma y código para garantizar consistencia perfecta entre diseño y desarrollo. Tipos de tokens Tokens globales (primitivos): valores crudos como Color.Blue.500 = #3B82F6, Font.Size.16 = 16px Tokens semánticos (alias): significado contextual como Color.Prim

Documentación: Lo que Hace Útil a un Design System Un design system sin documentación es solo una librería de componentes. La documentación es lo que transforma un archivo de Figma en una herramienta que todo el equipo puede usar de forma autónoma sin preguntar al diseñador cada 5 minutos. Qué documentar por cada componente Descripción: qué es el componente y cuándo usarlo en una o dos frases Anatomía: diagrama que muestra las partes del componente (ícono + label + contenedor en un botón) Varian

Auditoría de componentes UI Antes de construir un design system, auditá el producto real. Una auditoría de componentes revela botones duplicados, inputs inconsistentes, cards con estilos mezclados y patrones que se repiten sin reglas claras. Qué revisar primero Botones: tamaños, estados, iconos, textos y jerarquía. Formularios: labels, placeholders, errores, ayuda y validación. Cards: padding, títulos, acciones, imágenes y estados vacíos. Tablas/listas: densidad, alineación, filtros y acciones m

Caso de portfolio: mini design system Un mini design system es una pieza fuerte de portfolio porque muestra criterio visual, orden, documentación y conexión con desarrollo. No necesitás un sistema enorme: necesitás demostrar cómo reducís inconsistencias y acelerás decisiones. Qué debe incluir el caso Problema: pantallas inconsistentes, componentes duplicados o falta de reglas. Auditoría: evidencia visual de los problemas detectados. Tokens: color, tipografía, espaciado, radios y sombras. Compone