Visión general de los Sistemas de Diseño

1

Construcción de Sistemas de Diseño con Figma

2

Conceptos Básicos de Figma para Sistemas de Diseño

3

Creación de un Sistema de Diseño: Pasos y Estrategias

4

Diseño Neobrutalista: Construcción de un Sistema de Diseño

5

Taller de Creación de Nombres para Design Systems

6

Documentación de Fundamentos en Sistemas de Diseño

Guía de Estilos con Figma

7

Conceptos y beneficios de los design tokens en diseño y desarrollo

8

Escalas Tipográficas y Proporción Áurea en Figma

9

Creación de Escalas Tipográficas en Figma

10

Teoría y Práctica del Color en Diseño de Interfaces

11

Creación y gestión de paletas de colores en Figma

12

Espaciado y Elevación en Diseño de Interfaces

13

Espaciado y Elevación en Figma: Guía Práctica y Aplicaciones

14

Uso de Íconos e Ilustraciones en Diseño de Aplicaciones

15

Documentación de Sistemas de Diseño en Figma

Librería de componentes

16

Atomic Design: Construcción de Componentes en Design Systems

17

Arquitectura y Auditoría de Componentes en Atomic Design

18

Creación de Botones con Variantes en Componentes UI

19

Creación de Componentes de Cart en Diseño UI

20

Creación de Headers Responsivos en Figma

21

Creación de Variantes de Componentes en Diseño de Interfaces

22

Publicación de Librerías y Componentes en Figma

23

Uso de Figma para Crear Interfaces con Design Systems

Implementación y medición

24

Vender y medir un sistema de diseño internamente en la empresa

25

Experiencia Creando un Design System en una Startup

26

Desarrollo de Sistemas de Diseño con JavaScript y CSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Espaciado y Elevación en Figma: Guía Práctica y Aplicaciones

13/26
Recursos

¿Cómo aplicar espaciados y elevación en Figma?

El espaciado y la elevación son principios fundamentales en diseño de interfaces y Figma ofrece herramientas precisas para gestionarlos. Para iniciar, es beneficioso examinar otros design systems, como el de Shopify, Polaris. Esto proporciona una visión clara de cómo manejar espaciados y otras pautas de diseño, y nos ofrece la oportunidad de adaptar estas técnicas a nuestras necesidades específicas.

¿Qué pautas seguir para el espaciado?

Cuando se trabaja con espaciados, establecer pautas claras es crucial. Se recomienda trabajar con múltiplos de cuatro (4, 8, 12, 16), avanzando a 24, 32, 40, y 56, tanto para espaciados internos de componentes como para el layout.

  1. Crear un Frame en Figma: Utilizar dispositivos específicos como el iPad Mini para comenzar el diseño asegura consistencia.
  2. Establecer reglas de espaciado: Crear cuadros de diferentes medidas (por ejemplo, 4x4 píxeles) ayuda a visualizar y aplicar constantemente el espaciado deseado.
  3. Uso de tokens: Utilizar tokens de diseño para aplicar y gestionar consistentemente las medidas estandarizadas.

¿Cómo se representa gráficamente la elevación?

La elevación añade profundidad a los diseños proporcionando sensación de "capas" en la interfaz.

  • Diseño de sombra (shadow): En Figma, personalizar las sombras seleccionando el efecto, ajustando el eje X (por ejemplo, -4 para invertir la sombra) y configuraciones como el blur puede diferenciar el diseño.
  • Uso de sombras globales: Establecer estilos globales para sombras permite reutilizarlos fácilmente en componentes futuros, asegurando consistencia.

¿Cómo integrar breakpoints definidos?

Es vital tener en mente las diferentes resoluciones y ajustar el diseño en consecuencia.

  • Crear texts y márgenes específicos: Establecer breakpoints como mobile (768 píxeles). Definir márgenes (24 píxeles) y columnas (4) facilita la gestión visual.
  • Auto Layout en Figma: Utilizar Auto Layout ayuda a mantener consistencia y facilitar cambios en el diseño adaptándolo a diferentes tamaños de pantalla.

Considerar estos aspectos en el diseño asegura una interfaz coherente y eficiente. Invito a revisar otros design systems para inspirarse y ajustar estas pautas a tu proyecto. Busca, explora y comparte tus descubrimientos y resultados con la comunidad. ¡Mucho éxito en tu camino de diseño!

Aportes 2

Preguntas 2

Ordenar por:

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

Así quedó con un poco de documentación.

✅✅✅Les recomiemdo estos link para guia de los espaciado. ✅✅✅
✅https://atlassian.design/foundations/spacin
✅https://polaris.shopify.com/design/space#space-scale
✅https://carbondesignsystem.com/guidelines/spacing/overview/