Template para Figma: Section

En la versión 3.3 del UX fomo Design system, hemos añadido un nuevo componente ideal para quienes buscan un template section para Figma, un componente muy versátil, que podrás usar en páginas de inicio, cualquier tipo de landing, proyectos SaaS y aplicaciones móviles.

Contenidos del componente

Revisemos todos los detalles de la estructura y las propiedades del template section para Figma:

• Formatos: está diseñado para adaptarse a dispositivos desktop, tablet y mobile, asegurando una buena experiencia de usuario en todas las plataformas.
• Image Alignment: permite mostrar una imagen a la izquierda o derecha del contenido, facilitando una presentación visual equilibrada.
• Show Image: cuenta con una propiedad booleana para mostrar u ocultar la imagen según la necesidad del diseño.
• Pretitle: esta propiedad te permite mostrar, ocultar y editar un antetítulo. Es ideal para destacar secciones específicas que guíen al usuario, dar contexto o destacar un aspecto importante del contenido.
• Title: otro elemento que cuenta con propiedades para mostrar, ocultar y editar el título del template, para mostrar jerarquía visual y dar claridad al usuario.
• Text: debajo del título podremos mostrar texto y como en los demás elementos del componente podremos editarlo, mostrarlo u ocultarlo.

Botones

Debajo tenemos un bloque llamado Buttons, en su interior mostramos un botón primario y otro secundario. Este bloque también se puede mostrar u ocultar.

• Primary button: el botón principal es crucial para acciones primarias como «Comprar ahora» o «Registrarse».
• Secondary button: el botón secundario lo usarás casi siempre para acciones del tipo «Más información» o «Leer más».
• Podrás editar el contenido de ambos botones desde el panel de propiedades del componente Section-1 gracias a las Nested instances que hemos creado: editar el texto del botón y mostrar, ocultar y seleccionar los iconos a la izquierda y derecha del contenido.

Texto de ayuda

Debajo del bloque de botones hemos puesto un campo de texto llamado Helptext que también cuenta con propiedades para mostrar, ocultar y editar su contenido, ofreciendo espacio adicional para hacer aclaraciones o mostrar información complementaria.

Recuerda que esta es la primera versión del componente, en próximas versiones añadiremos más propiedades y características.

Compartido bajo licencia Creative Commons 4.0

Venga, duplica el UX fomo Design system 3.3 y empieza a diseñar con el template section para Figma.

Otras mejoras del sistema de diseño

• Componente Modal: anidamos las propiedades de los botones primary y secondary en el componente Modal, simplificando su gestión y personalización.
• Patterns: renombramos el apartado Sections como Patterns, alineando mejor la terminología con las prácticas comunes en diseño UX.