Botones transparentes

En la versión 3.5 del UX fomo Design system, hemos añadido nuevas variantes de botones transparentes.

Se llaman transparent y transparent-negative, y vienen cargadas de opciones para ofrecerte aún más flexibilidad y personalización en tus diseños.

Cómo son los botones transparentes

Las nuevas variante transparentes de los componentes Button y IconButton permiten editar fácilmente la cadena de texto label y seleccionar, mostrar u ocultar los íconos left y right en el caso del componente Button.

En cambio, en el componente IconButton sólo puedes seleccionar el icono de su interior utilizando una propiedad Swap instance de Figma.

Dónde utilizar los botones transparentes de Figma

La respuesta es fácil, puedes usar las variantes transparent y transparent-negative en pantallas light y dark mode.

En nuestro caso las hemos utilizado para diseñar varios de los componentes de nuestro sistema de diseño.

Exacto, hemos aplicado una vez más la metodología Atomic design para mantener una coherencia visual en todo el UX fomo Design system.

Esto son los componentes actualizados:

• Accordion: utilizamos las nuevas variantes de botones transparentes en el bloque encabezado del componente acordeón.
• GuidedTour, Modal y DropdownButton: en estos componentes cambiamos la variante borderless por la transparent, en el componente IconButton utilizado para la acción CloseButton.
• Notification: en las notificaciones el uso es igual al de los tres componentes anteriores, la única diferencia es que en este caso hemos desactivado las interacciones en la instancia de IconButton para obtener una mejor experiencia de usuario.

Estas nuevas variantes son solo el comienzo de lo que viene para el UX fomo Design system.

Seguiremos trabajando en más mejoras y ajustes para asegurarnos de que tengas todas las herramientas que necesitas para crear diseños efectivos y fáciles de usar.

Duplícalo y descarga los botones transparentes, no dudes en dejar tus comentarios con dudas y peticiones de mejora.

Recuerda que nos encanta saber cómo usas el design system y qué más podemos hacer para ayudarte.

Compartido bajo licencia Creative Commons 4.0

Cómo diseñar botones transparencia en Figma

Si quieres construir botones sin fondo que funcionen bien sobre cualquier tipo o color de fondo te dejamos el tutorial que publicamos en nuestro canal de YouTube, donde podrás aprender cuáles son todos los pasos para crear botones transparentes.