Visión general de los Sistemas de Diseño

1

Construcción de Sistemas de Diseño en Figma

2

Sistema de Diseño en Figma: Conceptos Esenciales

3

Creación de un Sistema de Diseño: Guía Completa paso a paso

4

Tendencia Neobrutalismo en Diseño Gráfico

5

Fundamentos de Tokenización en Sistemas de Diseño

6

Documentación de Sistemas de Diseño con Figma

Guía de Estilos con Figma

7

Fundamentos de Tokens de Diseño y su Aplicación Práctica

8

Escalas Tipográficas: Uso de la Proporción Áurea en Diseño Web

9

Creación de Estilos Tipográficos en Figma: Tokens y Escalas

10

Psicología y Selección de Colores: Guía Práctica en Figma

11

Creación de Paletas de Colores en Figma

12

Espaciado y Elevación en Diseño UI con Figma

13

Diseño de Espaciado y Elevación en Figma

14

Diseño de Íconos e Ilustraciones Efectivas

15

Documentación de Componentes en Diseño UX/UI

Librería de componentes

16

Atomic Design: Creación de Componentes UI en Figma

17

Arquitectura de Componentes en Atomic Design

18

Propiedades y variantes en diseño de componentes UI

19

Diseño de Componentes en Figma: Creación de una Cart Interactiva

20

Diseño de Headers Responsivos en Figma

21

Diseño de un Hero: Variantes Mobile y Desktop en Figma

22

Publicación de Librerías en Figma para Diseño de Interfaces

23

Gestión de sistemas de diseño en Figma

Implementación y medición

24

Cómo medir el impacto de un sistema de diseño exitosamente

25

Creación de Design Systems en Startups: Lecciones Aprendidas

26

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

Diseño de un Hero: Variantes Mobile y Desktop en Figma

21/26
Recursos

¿Cómo construir un organismo basado en componentes previos?

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.

¿Por dónde empezar con la arquitectura del 'hero'?

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.

¿Cómo incorporar imágenes de calidad?

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.

¿Cómo gestionar el tamaño y variantes en el diseño?

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.

¿Qué pasos seguir para crear variantes efectivas?

  1. Cree una variante base: Asegúrese de que el tamaño y las proporciones estén correctas.
  2. Añada variantes nuevas: Cada variante debe tener propiedades únicas adaptadas a sus respectivos dispositivos.
  3. Ajuste elementos como el layout y las imágenes: Pueden ser centrados o alineados según sea necesario.
  4. Verifique el correcto comportamiento de las variantes: Probaremos el cambio de variante para asegurarnos que nuestro diseño es responsivo.

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.

¿Cómo cambiar entre variantes correctamente?

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Componentes

FOUNDATIONS

COMPONENTS

Buena explicacion

Avances en mi DS