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 Componentes en Figma: Creación de una Cart Interactiva

19/26
Recursos

¿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.

Aportes 9

Preguntas 4

Ordenar por:

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

Recomendable hacer el curso avanzado de autolayout, Si lo hacen con autolaout, se les hará mas facil hacer modificaciones gigantes es cuestión de clicks.

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.

Me zumban los oidos cada vez que escucho a la profe utilizar diminutivos, no se si soy el unico que cada vez que lo hace la corrige en voz alta, que desespero.
**¿Cómo abrir el menú de emojis?** **En Windows:** Atajo "**Tecla Windows + .**": ![](https://i.blogs.es/7f3c75/busqueda/1366_2000.jpg) **En Mac OS:** Atajo "**Fn + E**" ![](https://help.apple.com/assets/65A8106E7C69B635140E606E/65A81072C0272B1FFA02DE51/es_419/a7630ee9ec61802cf7d2460dd257c49f.png)

Muy buena la clase que primera vez que veo bien explicada la base de las variantes

Excelente clase!!