Cómo diseñar un botón con icono en Figma

En este tutorial te explicaré el proceso para diseñar un botón con icono en Figma. Lo diseñé junto a la comunidad de UX y UI en el último directo que publiqué en mi canal de YouTube.

Esta es una clase perfecta para estudiantes que desean profundizar en el diseño de interfaces y en mejorar la experiencia del usuario a través de componentes interactivos.

Anatomía del botón con icono

Hoy vamos a construir un botón con 4 estados: Default, Hover, Selected default, y Selected hover. Su estructura es muy simple, consiste en un icono dentro de un frame contenedor.

Para crear los estados del botón utilizaremos variantes de Figma y 2 propiedades instance swap que nos ayudarán a cambiar fácilmente los iconos usados en los estados Default y Selected.

Temas del tutorial

• Presentación del prototipo del botón con icono
• Crear los diferentes estados del botón
• Consejos sobre dónde y cómo utilizar el botón interactivo en tus proyectos
• Ejemplos prácticos de uso real para inspirarte
• Guía paso a paso para crear un componente de Figma
• Cómo personalizar un botón con icono para que se adapte a tus necesidades
• Instrucciones detalladas para crear variantes de un componente
• Cómo modificar los colores de algunas variantes para mejorar la visibilidad
• Revisión y optimización del naming de las 4 variantes del componente
• Cómo crear propiedades booleanas
• Configuración de conexiones entre variantes para la creación de prototipos interactivos
• Consejos básico para la creación de prototipos
• Cómo cambiar los iconos Default y Selected en el componente “icon button” desde su panel de propiedades

Si tienes alguna duda por favor deja un comentario. Siempre suelo responder con otro comentario, con un nuevo post publicado en el blog o con un nuevo tutorial en vídeo subido a YouTube.

Descarga el componente

Si deseas utilizar el componente botón con icono en tus proyectos te dejo un enlace a mi perfil de Figma Community para que lo puedas duplicar.