Guía de iconos e ilustraciones en Figma

Iconos: ayudan a comprender rápida y claramente cómo funcionan las cosas en cada experiencia

Ilustración: agregan información no verbal, contexto y comprensión de lo que se está haciendo

Consideraciones en los iconos

• Agruparlos: bajo temas o funcionalidades.
• Usarlos cerca a un texto: los iconos no reemplazan palabras.
• Establecer pautas: guía de usos y aplicación.

Consideraciones en las ilustraciones

• Ser consistentes: mantener el mismo estilo
• Evitar distracciones: hay que mantener presente el objetivo del usuario en cada parte donde interactúe con el producto
• Usar la misma paleta
• Acercarlas al mundo real
• Establecer pautas

iconos que no necesitan texto:

Caneca de basura = eliminar
x = cerrar
< = go back
= go next
corazón = like

Ejemplos

• ⚙️ Configuración
• 🔎 Busqueda
• ✖️ Cerrar
• 🔔 Notificaciones

Buenas! Creo que aporta 🧐 plugins para figma ➡️https://story.to.design/blog/best-figma-plugins-for-design-systems

Uno de los iconos mas llamativos es la famosa campanita, la cual nos notifica de eventos, nuevos cursos, post muy interesantes, entre otras ❤️

Los iconos nos ayudan a comprender rápida y claramente cómo funcionan las cosas en cada experiencia

Me esta gustando mucho este curso 🤩

👽: alien

▼: Desplegar contenido
ᐅ: Play
< >: Desplazamiento de contenido izquierda, derecha
"Lupa": Busqueda
"Campana": Notificaciones
"Tres puntos conectados": Compartir/share
"Engranaje": Configuraciones

Iconos: ayudan a comprender rapida y claramente como funcionan las cosas en cada experiencia.
.
.

Consideraciones:

• Agruparlos, feedback, arrows, file,etc

• Usarlos cerca a un texto: No para reemplazar palabras. (No es mandatorio)

• Establecer pautas: tamanos, donde usarlos,etc
  .
  .
  .

Illustraciones:
Agregan informacion no verbal, contexto y comprension de lo que se esta haciendo.
.
.

Consideraciones:

• Ser consistente (Ejemplo color, estilo de illustracion, etc)
• Evitar distracciones
• Usar la misma paleta
• acercarlas al mundo real
• establecer pautas.
  .
  .
  Martin Coronel - Product Designer
  Linkedin