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

¿Cómo se crea una 'cart' componente en un diseño?

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.

¿Cómo estructuramos la cart principal?

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.

• Fondo y bordes: Crea un rectángulo, aplica un relleno y establece un radio (radius) y un borde (stroke) de 2.
• Emoji: Usando una elipse, inserta el emoji con un tamaño adecuado (por ejemplo, 60 px). Hay herramientas como Emoji Keyboard que facilitan esta tarea.
• Textos: Utiliza tamaños de texto según los fundamentos predefinidos, como Body 18 y Body 14.

{
  "fill": "white",
  "radius": 4,
  "stroke": 2,
  "emoji_size": 60,
  "text_sizes": [18, 14]
}

¿Cómo aplicamos 'auto layout' para alinear elementos?

El uso de 'auto layout' permite gestionar fácilmente el espaciado entre los elementos y alinear el contenido correctamente.

• Aplicar auto layout: Selecciona los textos y utiliza 'Shift + A' para aplicar auto layout. Ajusta el espaciado entre textos a 4 px.
• Alinear la estructura: Crea un auto layout para todo el conjunto, y ajusta el espaciado entre elementos, recomendablemente a 16 px, si se adapta a tus reglas de diseño.

{
  "spacing_between": 4,
  "full_spacing": 16
}

¿Cómo se crean variantes de 'cart'?

Las variantes permiten modificar componentes según diferentes estados o tamaños, como hover o tamaño medium.

• Definir propiedades y variantes: Crea propiedades para size y state. Inicia con una variante pequeña (small) en estado activo (active).
• Añadir efectos visuales: Cambia el estado a hover agregando efectos de sombra para diferenciar visualmente.

{
  "properties": {
    "size": ["small", "medium"],
    "state": ["active", "hover"]
  },
  "effects": {
    "hover": "shadow effect"
  }
}

¿Cómo adaptamos la 'cart' para diferentes tamaños?

Para cambiar el diseño sin recrearlo desde cero, puedes ajustar su estructura para adaptarse a diferentes tamaños.

• Cambio de estructura en tamaño medium: Usa 'auto layout' para reacomodar elementos de forma vertical. Ajusta alineaciones para asegurar que el contenido esté centrado.

{
  "vertical_layout": true,
  "align": "center"
}

¿Cómo verificamos la funcionalidad del componente?

Es crucial asegurarse de que todas las variantes de tamaño y estado funcionan correctamente.

• Pruebas de variación: Arrastra el componente desde la sección de 'assets' y verifica que puedas cambiar entre sus estados y tamaños sin errores.
• Confirmar efectos visuales: Asegúrate de que todas las sombras y espaciados se hayan aplicado correctamente al cambiar entre variantes.

{
  "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.