Visión general de los Sistemas de Diseño
Construcción de Sistemas de Diseño en Figma
Sistema de Diseño en Figma: Conceptos Esenciales
Creación de un Sistema de Diseño: Guía Completa paso a paso
Tendencia Neobrutalismo en Diseño Gráfico
Fundamentos de Tokenización en Sistemas de Diseño
Documentación de Sistemas de Diseño con Figma
Guía de Estilos con Figma
Fundamentos de Tokens de Diseño y su Aplicación Práctica
Escalas Tipográficas: Uso de la Proporción Áurea en Diseño Web
Creación de Estilos Tipográficos en Figma: Tokens y Escalas
Psicología y Selección de Colores: Guía Práctica en Figma
Creación de Paletas de Colores en Figma
Espaciado y Elevación en Diseño UI con Figma
Diseño de Espaciado y Elevación en Figma
Diseño de Íconos e Ilustraciones Efectivas
Documentación de Componentes en Diseño UX/UI
Librería de componentes
Atomic Design: Creación de Componentes UI en Figma
Arquitectura de Componentes en Atomic Design
Propiedades y variantes en diseño de componentes UI
Diseño de Componentes en Figma: Creación de una Cart Interactiva
Diseño de Headers Responsivos en Figma
Diseño de un Hero: Variantes Mobile y Desktop en Figma
Publicación de Librerías en Figma para Diseño de Interfaces
Gestión de sistemas de diseño en Figma
Implementación y medición
Cómo medir el impacto de un sistema de diseño exitosamente
Creación de Design Systems en Startups: Lecciones Aprendidas
Diseño de Sistemas Web con JavaScript y CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Cuando estamos diseñando una interfaz, uno de los componentes básicos es la 'cart'. Este elemento fundamental ayuda a organizar información visual y a crear una jerarquía clara en la página. Crear una 'cart' con diferentes variantes es esencial para mantener la flexibilidad y el dinamismo del diseño. Aquí exploraremos cómo estructurar y diseñar una 'cart' eficazmente.
Para empezar, debemos definir la estructura base de la 'cart', que incluirá un emoji, un texto y el fondo. Se utilizan márgenes específicos y tamaños de letra basados en tokens predefinidos.
{
"fill": "white",
"radius": 4,
"stroke": 2,
"emoji_size": 60,
"text_sizes": [18, 14]
}
El uso de 'auto layout' permite gestionar fácilmente el espaciado entre los elementos y alinear el contenido correctamente.
{
"spacing_between": 4,
"full_spacing": 16
}
Las variantes permiten modificar componentes según diferentes estados o tamaños, como hover o tamaño medium.
{
"properties": {
"size": ["small", "medium"],
"state": ["active", "hover"]
},
"effects": {
"hover": "shadow effect"
}
}
Para cambiar el diseño sin recrearlo desde cero, puedes ajustar su estructura para adaptarse a diferentes tamaños.
{
"vertical_layout": true,
"align": "center"
}
Es crucial asegurarse de que todas las variantes de tamaño y estado funcionan correctamente.
{
"test_cases": ["small-active", "medium-active", "medium-hover", "small-hover"],
"visual_checks": ["shadow", "spacing"]
}
Crear y adaptar componentes como 'carts' mejora no solo el diseño estético de una interfaz, sino también su usabilidad y consistencia visual. ¡Sigue practicando! Cada pequeño ajuste amplía tus habilidades y te acerca a ser un experto en diseño de interfaces.
Aportes 9
Preguntas 4
Muy ameno el estilo de enseñanza de la profesora, todo se le entiende muy bien.
Siguiendo la métodología del Atomic Design que vimos hace algunas clases atrás, creo que aquí faltó o construir los átomos que constituyen la molécula es decir, la molécula debe de contener las instancias de los átomos como el icono por ejemplo.
Muy buena la clase que primera vez que veo bien explicada la base de las variantes
Excelente clase!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?