Centraliza colores, tipografías y espaciados con Variables en Figma para actualizar tu proyecto en segundos, mantener coherencia y trabajar mejor en equipos grandes.
Qué son las variables y tipos disponibles
Las variables son valores reutilizables que puedes vincular a propiedades de tus capas y componentes. Se gestionan en colecciones desde el panel Variables.
Color
Fondos, texto, bordes, estados (hover/active/disabled).
En este tutorial te muestro cómo llevar una idea desde un wireframe en baja fidelidad hasta un prototipo interactivo en Figma listo para validar con clientes y pasar a desarrollo, con tips prácticos de un flujo real.
Planifica antes de abrir Figma
Define el objetivo del prototipo (flujo, look & feel, microinteracciones), las pantallas clave y el contenido mínimo. Ten a mano referencias y patrones UI.
Tip pro: acordad con el equipo qué se valida en esta ronda (navegación, copy, jerarquía visual) para evitar rehacer trabajo.
Crea el wireframe en baja fidelidad
Crea un Frame con dimensiones del dispositivo (1440 desktop / 768 tablet / 375 móvil).
Usa formas básicas y texto para estructura; sin color para centrarte en funcionalidad.
Construye con Auto Layout para tener bloques fluidos y escalables.
Anota comportamientos y estados (hover, error, vacío) con etiquetas.
Resultado: mapa claro de contenidos y prioridades, listo para revisión rápida.
Pasa a media y alta fidelidad
Tras validar el esqueleto, sube fidelidad:
Tipografía y jerarquía: define estilos (H1, H2, body).
Paleta y temas: crea variables de color (light/dark) y espaciado.
Componentes: botones, tarjetas, inputs con variants y propiedades.
Estados: default, hover, focus, disabled y error.
Tip pro: usa Variables para colores/espaciados y conecta con Design Tokens en tu repo. Un cambio global = diseño actualizado.
Añade interacciones para el prototipo
Activa la pestaña Prototype y conecta los flujos con hotspots.
Configura eventos: On click → Navigate to, Open overlay, Swap variant.
Usa Smart Animate para transiciones suaves entre estados.
Simula microinteracciones (menús, acordeones, modales) sin caer en fuegos artificiales.
Testea, comparte y itera
Present Mode: prueba en escala 100% para detectar fricciones.
Compartir: enlace con permisos de vista/comentario para stakeholders.
Hand-off a devs: añade una página de especificaciones con medidas, estilos y assets marcados para exportar.
Checklist rápida
Wireframe validado
Estilos tipográficos y de color centralizados
Componentes con variants y estados
Interacciones principales definidas
Feedback aplicado y prototipo estable
Preguntas frecuentes
¿Necesito experiencia en diseño para usar Figma?
No. Puedes empezar con plantillas y componentes; lo clave es entender el flujo que quieres validar.
¿Diferencia entre wireframe y prototipo?
El wireframe es estructura y contenido; el prototipo añade interactividad y simula el flujo real.
¿La versión gratuita sirve para prototipos?
Sí. Para proyectos pequeños y validaciones internas suele ser suficiente.
Como desarrolladora web, me he enfrentado en múltiples ocasiones al dilema de cómo organizar la información de forma efectiva para que el usuario no se sienta abrumado. A lo largo del tiempo, una de las ideas que más me ha ayudado a tomar decisiones de diseño más acertadas ha sido la Ley de Miller, también conocida como el “número mágico 7 ± 2”. Esta ley, aunque proviene de la psicología cognitiva, tiene una aplicación sorprendentemente útil en el mundo del diseño de interfaces.
En este artículo quiero compartirte, desde mi experiencia práctica, cómo aplicar esta ley a nuestras interfaces y por qué menos es, en realidad, mucho más. Vamos a desmenuzar el concepto, ver ejemplos concretos y descubrir cómo esta teoría puede ayudarte a diseñar experiencias más limpias, intuitivas y eficaces para quienes usan tus productos digitales.
¿Qué es la Ley de Miller?
Origen y base científica
La Ley de Miller fue propuesta por el psicólogo cognitivo George A. Miller en 1956. En su artículo “The Magical Number Seven, Plus or Minus Two”, Miller argumentaba que la memoria a corto plazo humana es capaz de retener entre 5 y 9 elementos de información simultáneamente, con una media de 7.
Este concepto se convirtió rápidamente en una referencia fundamental en el campo de la psicología cognitiva, pero también empezó a encontrar aplicaciones fuera de ese ámbito: desde la educación hasta, por supuesto, el diseño de interfaces.
Cómo impacta en la experiencia del usuario
Cuando una persona navega por una web o app, está tomando decisiones constantemente: qué menú elegir, dónde hacer clic, cómo interpretar un botón o una notificación. Si el número de opciones o elementos visibles supera ese rango de 5 a 9 ítems, el usuario comienza a sentirse saturado, desorientado o incluso frustrado. En ese contexto, la simplicidad no es una estética, es una necesidad cognitiva.
Aplicando la Ley de Miller al diseño de interfaces
Menos elementos, más comprensión
Cuando estamos diseñando una interfaz, ya sea un menú de navegación, un formulario, una tarjeta de producto o incluso un mensaje emergente, debemos preguntarnos: ¿Cuánta información estoy exigiendo procesar al usuario de golpe?
Aquí es donde la Ley de Miller entra en juego como una guía para limitar la cantidad de estímulos al mínimo necesario.
Menús de navegación
Uno de los lugares más evidentes donde aplicar esta ley es en los menús principales de navegación. Si alguna vez has llegado a un sitio con 12 ítems en el menú superior, sabes de lo que hablo: demasiadas opciones generan dudas.
Mi recomendación profesional: mantener el menú principal entre 5 y 7 elementos. Si hay más secciones, considera agruparlas en un desplegable bajo un ítem general como “Más” o “Otros”.
Formularios y tareas
Muchas veces se presentan al usuario listas interminables de campos para completar. Esto no solo agota, sino que ralentiza la conversión.
Una buena estrategia es dividir el formulario en pasos o bloques. Si un formulario tiene 15 campos, distribúyelos en 3 grupos de 5. Visualmente, la carga cognitiva se reduce, y el usuario siente que el proceso es más ágil.
Listas, botones y opciones de filtro
Mostrar más de 7 u 8 opciones sin jerarquía visual puede llevar al usuario a ignorarlas por completo. El resultado: no actúan.
¿La solución? Agrupar, destacar las opciones más relevantes y ofrecer filtros contextuales solo cuando realmente se necesiten.
Estrategias prácticas para aplicar la Ley de Miller
Divide, agrupa y oculta hasta que sea necesario
La mejor forma de ayudar al usuario no es dándole todo lo que necesita al mismo tiempo, sino guiándolo paso a paso. Estas son algunas técnicas efectivas:
1. Agrupación lógica de contenido
Usar espaciado, colores y tipografía para indicar qué elementos pertenecen al mismo grupo. Así, el cerebro puede procesar varios elementos como si fueran uno solo.
2. Prioriza y oculta lo secundario
Muestra solo las opciones clave y deja las demás en segundo plano. Por ejemplo, en un menú de filtros, los más usados deben estar visibles, y los demás pueden plegarse bajo un botón como “Mostrar más”.
3. Usa patrones reconocibles
Reducir el esfuerzo cognitivo no solo tiene que ver con la cantidad, sino también con la familiaridad. Cuando usamos patrones visuales comunes, como íconos estandarizados o layouts conocidos, el usuario los interpreta automáticamente.
¿Cuándo no aplicar la Ley de Miller al pie de la letra?
Casos donde el contexto manda
Aunque la Ley de Miller es muy útil, no es una regla absoluta. Hay situaciones donde mostrar más elementos puede estar justificado, siempre que haya soporte visual, contexto y jerarquía clara.
Interfaces expertas o técnicas
En dashboards dirigidos a perfiles técnicos, el número de elementos puede superar ese límite. La clave está en no tratar a todos los usuarios por igual: conoce tu público.
Visualizaciones complejas
En gráficas o reportes, el objetivo es analizar. Aquí, la clave es dar herramientas para filtrar o navegar, pero no esconder lo relevante.
Preguntas frecuentes (FAQs)
¿La Ley de Miller aplica también al diseño mobile?
Sí, y de hecho es aún más relevante en dispositivos móviles, donde el espacio visual es limitado. Cuanto más pequeña la pantalla, mayor la importancia de priorizar y agrupar.
¿Puedo mostrar más de 9 elementos si los agrupo visualmente?
Sí, eso se llama “chunking”. Puedes presentar 15 elementos, pero si están organizados en 3 bloques bien definidos, parecerán solo 3 a nivel cognitivo.
¿Qué herramientas de diseño me ayudan a aplicar esta ley?
Herramientas como Figma y Adobe XD permiten crear prototipos y jerarquías visuales claras. Y con Hotjar o Google Analytics puedes validar si el diseño está funcionando.
Diseñar pensando en el usuario es un acto de empatía
Como desarrolladora web, me he dado cuenta de que muchas veces queremos demostrar todo lo que sabemos o todo lo que ofrece nuestro producto… pero ese impulso puede ir en contra del usuario. El diseño no se trata de presumir, se trata de acompañar, de guiar, de hacer fácil lo complejo.
Aplicar la Ley de Miller no es recortar contenido sin criterio; es priorizar y estructurar pensando en cómo piensa la persona al otro lado de la pantalla.
En un mundo donde cada segundo cuenta, donde la atención es escasa y los estímulos son infinitos, el diseño inteligente es el que sabe cuándo callar para que el usuario escuche lo importante.
