• Saltar a la navegación principal
  • Saltar al contenido principal

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Vibe coding
  • Product Design
  • Design system
  • Tutoriales de Figma
  • Blog
  • Newsletter
Design system / Añadimos migas de pan y otros 4 componentes

Añadimos migas de pan y otros 4 componentes

En la versión 1.4 del UX fomo Design system encontrarás unas migas de pan para mejorar el diseño UX de tus proyectos.

Tus usuarios quieren navegar mejor por tu producto digital.

migas de pan ux para diseñar navegación
Variantes del componente migas de pan para usar en Figma

Índice del artículo

Toggle
  • Componente Migas de pan
    • Link Button
    • Textarea
    • Notification
    • Skeleton

Componente Migas de pan

Te cuento las novedades, ya tenemos migas de pan con variantes MD y SM.

Son perfectas para mejorar la navegación de tus proyectos. Incluye hasta 4 links y un indicador para la URL actual.

En la documentación que estoy preparando daré más detalles y añadiré un vídeo para que sepas cómo usarlas.

En realidad lo haré con todos los componentes del sistema de diseño.

Link Button

La primera versión está disponible en tamaños MD y SM, con estados Enabled, Hovered, Focused y Disabled.

Textarea

Es una adaptación del componente Textfield que liberamos la semana pasada.

El Textarea es un poco más simple, tiene las mismas variantes y menos propiedades, las que realmente son realmente necesarias.

Notification

Las notificaciones tienen 4 variantes: Information, Success, Warning y Error.

Cada una incluye propiedades Title (título), Content (contenido) y Close button, para mostrar u ocultar un botón para cerrar la notificación.

El diseño es bastante simple, para que sean informativas y al mismo tiempo discretas.

Skeleton

Hemos creado un pequeño componente interactivo con un degradado animado, ideal para prototipar y visualizar la carga de contenido.

Por último voy con las mejoras implementadas:

Se añade la variante Skeleton a los componentes Button, Chips e Icon Button.

Y se hacen ajustes en varios componentes para optimizar su desempeño y apariencia, nos hemos basado en el feedback que hemos recibido en la comunidad de UX y UI fácil.

Consíguelo en Figma Community

Compartido bajo licencia Creative Commons 4.0

Machaca los componentes, si hay algún error me lo dices por favor.

Aprende sobre UX/UI + IA, Figma y Product Design

📣 Apúntate a mi newsletter semanal

🔥 Únete a la comunidad UX y UI fácil en Discord

🔴 Suscríbete al canal de YouTube para ver tutoriales

Acerca de Juanpol

Diseñando desde 1993 y todavía aprendiendo. Actualmente como Product Designer en Freepik, aquí comparto mis notas sobre lo que voy probando de UX/UI e IA.

Juanpol

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Acerca de
  • info@juanpol.com
  • LinkedIn
  • GitHub
  • YouTube
  • Discord
  • Telegram
  • X | @juanpol

  • Aviso legal, Privacidad y Cookies

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

Política de cookies

Más información sobre nuestra política de cookies.