Los iconos e ilustraciones son piezas clave de cualquier design system porque ayudan al usuario a entender qué hace tu producto, cómo navegarlo y qué siente al interactuar con él. Aquí descubrirás cómo agruparlos, cuándo acompañarlos de texto y qué plugins gratuitos puedes usar en Figma para acelerar tu flujo de diseño.

¿Para qué sirven los iconos en una interfaz?

Los iconos permiten comprender rápido y con claridad qué está pasando en pantalla. En la app de Platzi, por ejemplo, encuentras iconos para abrir el menú o navegar hacia atrás, y cada uno cumple una función puntual sin necesidad de leer texto extra.

¿Qué es un hamburger menu? Son las tres rayitas horizontales que abren un menú lateral. Es uno de los pocos iconos que no necesita texto porque la mayoría de usuarios ya lo reconoce. Hoy también se reemplaza por tres puntos verticales.

¿Cómo agrupar iconos correctamente?

Cuando tienes un mar de iconos, lo primero es clasificarlos por categoría: flechas, feedback, banca, comunicación, diseño, marca. Esto facilita la búsqueda dentro del equipo y mantiene coherencia visual en el producto.

• Agrupa por función o contexto de uso.
• Acompáñalos de texto cuando la acción no sea evidente.
• Define pautas de tamaño, color y ubicación.
• Documenta cuándo usarlos y cuándo no.

La idea no es que el icono reemplace la palabra, sino que la refuerce mientras el usuario se familiariza con tu aplicación.

¿Qué plugin de Figma puedo usar para iconos?

En Figma existe un plugin que reúne iconos ya agrupados por categoría [02:54]. Lo abres desde la sección de plugins, escribes el nombre, le das run, seleccionas el icono que necesitas y lo arrastras a tu lienzo. Si necesitas un avión, lo buscas, lo insertas y listo para usarlo en tus foundations.

¿Qué función cumplen las ilustraciones en un producto digital?

Las ilustraciones aportan contexto emocional y narrativo. Acompañan mensajes como "lo hiciste superbién" o "se cayó el internet" y ayudan al usuario a interpretar el estado de la interfaz sin sentirse perdido.

¿Qué hace buena a una ilustración en UI? Que use la misma paleta de colores del producto, que evite distracciones innecesarias y que se acerque al mundo real para que el usuario se sienta familiarizado.

¿Cómo mantener consistencia en las ilustraciones?

La consistencia visual es la regla número uno. No mezcles paletas que no tengan nada que ver con tu producto y cuida que las animaciones no roben protagonismo al contenido principal.

• Usa la misma paleta de colores del design system.
• Evita movimientos que distraigan del mensaje.
• Acerca las ilustraciones al mundo real para reducir confusión.
• Define pautas claras en tu documentación.

Hay excepciones, como Gumroad, que usa muñequitos con formas exageradas porque esa es su intención de marca. Pero si tu producto busca claridad, lo mejor es que el usuario reconozca de inmediato lo que ve.

¿Dónde encontrar ilustraciones gratis para mi proyecto?

Existen librerías gratuitas que puedes copiar, pegar o descargar como SVG directamente en Figma [05:21]:

• Drawkit con ilustraciones gratis listas para usar.
• Undraw que permite cambiar el color principal según tu paleta.
• Recursos generales de internet con SVG descargables.

En Undraw puedes copiar tu color primario, por ejemplo un púrpura de tu color tools, pegarlo y todas las ilustraciones se adaptan automáticamente a tu identidad visual. Así logras que iconos, ilustraciones y paleta hablen el mismo idioma.

¿Y ahora qué sigue después de los foundations?

Todo lo que hemos hablado sobre pautas (colores, iconos, ilustraciones, tamaños) no vive en una reunión verbal: vive en la documentación. Ahí defines cuándo usar cada elemento, cómo y dónde, para que cualquier persona del equipo pueda replicarlo sin depender de ti.

Cuéntame en los comentarios qué iconos e ilustraciones elegiste para tu proyecto y cómo va tu avance en foundations. Me encanta ver el resultado de cada estudiante.