No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Guía de iconos e ilustraciones en Figma

14/26
Recursos

Aportes 12

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

**Íconos** que no necesitan estar acompañados de un texto: * 🏠 (inicio) * 🔍 (buscar) * 🗑️ (eliminar) * 🤍 (me gusta, favorito) * 🔔 (notificaciones) * 👁️ (ver)
⚠️ **Importante:** Para sobreescribir las propiedades al cambiar de un icono a otro, estos deben tener un solo vector y llamado de la misma forma: ejemplo: `Icon` ![](https://static.platzi.com/media/user_upload/image-f9b5ae27-e355-48a4-a3c3-ba67280daf1e.jpg)

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