Componentes
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
Crear un organismo a partir de componentes ya construidos es un pilar esencial en el diseño de interfaces modulares y escalables. En este caso, se utilizan los componentes de un botón, un cart y un header previamente creados. El objetivo es integrar estos elementos para diseñar un "hero" en diferentes variantes tanto para versión mobile como desktop.
El primer paso es integrar uno de los componentes más importantes y visibles de la interfaz: el header. Es crucial asegurarse de que se ajuste adecuadamente a los márgenes y respete la coherencia visual con los demás componentes. Luego, se añade texto para el título que será parte del hero. Es recomendable revisar y ajustar las medidas para que el diseño no resulte apretado visualmente.
Las imágenes son un elemento fundamental para atraer la atención en los diseños. Usando plugins como Unsplash, se pueden buscar imágenes gratuitas según las necesidades del proyecto. Al insertar la imagen, es importante ajustar su tamaño para mantener la relación de aspecto deseada, cuidando que se acople de manera armoniosa dentro de los límites de diseño, tanto para mobile como desktop.
Es indispensable tener un diseño responsivo. Para lograrlo, se crean variantes dentro del propio componente. Por ejemplo, dentro del hero, los tamaños para mobile y desktop deben estar claramente definidos. Ajustar y probar las medidas como el Width y el Height son claves para obtener la adaptación deseada.
Por ejemplo, en la variante Desktop, el texto se centra y las imágenes y cards pueden tener un diseño particular que se adapte a pantallas más amplias.
Una vez creadas las variantes, es indispensable probar que el diseño se comporte como se espera al cambiar de una a otra. Esto no solo garantiza que el diseño funcione bien en distintas resoluciones, sino que también asegura la versatilidad del sistema de diseño.
Los componentes deben ser capaces de pasar de Mobile a Desktop sin problemas; esto se verifica al cambiar el valor de la variante en el componente principal. Con estos pasos, se proporciona una robusta base para construir diseños más complejos manteniendo consistencia y calidad visual.
Finalmente, el resultado no solo es un componente funcional, sino que refleja un trabajo bien estructurado y distribuido que facilita la reacción ante cambios y escalabilidad. ¡Comparte tus resultados y muestranos la evolución de tu sistema de diseño! Continuemos aprendiendo y mejorando en el emocionante mundo de la creación de interfaces de usuario.
Aportes 8
Preguntas 1
Componentes
FOUNDATIONS
COMPONENTS
Avances en mi DS
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?