La explicación tuya sobre como crear variantes a los componentes me pareció la más genial y amigable para entender como funcionan… Muchas gracias
Visión general de los Sistemas de Diseño
Anatomía de un Sistema de Diseño
Fundamentos de diseño para Figma: lo que necesitas saber antes de comenzar
¿Cómo crear un sistema de diseño? Proceso, principios y flujo de trabajo
Neo Brutalismo: tendencias de diseño y proyecto del curso
Taller Creativo: Nombramiento de nuestro Sistema de Diseño
Conceptos y recursos importantes en Sistemas de diseño
Guía de Estilos con Figma
Design Tokens: cómo y cuándo usarlos
Cómo calcular escalas tipográficas matemáticamente
Guía de Tipografías en Figma: tamaños, escalas y tokens
Cómo escoger colores: psicología, pautas y accesibilidad
Guía de Colores en Figma
Espaciado y elevación
Guía de espaciado y elevación en Figma
Guía de iconos e ilustraciones en Figma
Cómo Documentar Sistemas de Diseño
Librería de componentes
Atomic Design
Arquitectura y auditoría de componentes
Átomo: botón y variantes
Molécula: card responsiva y variantes
Molécula: header responsivo y variantes
Organismo: hero y variantes
Publicando la librería de componentes
Reto: template y páginas
Implementación y medición
Cómo vender y medir un Sistema de Diseño
Mi experiencia creando Sistemas de Diseño (desde cero) en Startups
Toma el Curso de Sistemas de Diseño con Storybook
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear un diseño atractivo y funcional es esencial en el desarrollo de interfaces de usuario. En este contexto, trabajar con herramientas como Figma no solo facilita el proceso, sino que permite optimizar y ajustar diseños para diversas plataformas, desde móviles hasta escritorios. Aquí exploraremos cómo diseñar un header que se adapte a diferentes necesidades y dimensiones, utilizando el método designado por la técnica mobile first.
En este proyecto, trabajamos con dos variantes de headers: uno con botón de llamada a la acción (CTA) y otro sin él. Estas son algunas de sus características:
Las dimensiones son clave para el diseño responsivo. Aquí te ofrecemos una guía sobre cómo definirlas:
La funcionalidad Auto Layout en Figma es ideal para hacer diseño responsivo permitiendo un ajuste automático de los elementos al cambiar el tamaño del contenedor:
Shift + A
. Esto centra y ajusta automáticamente el contenido.View More Options
en Auto Layout.El uso de componentes y variantes es esencial en Figma para simplificar el manejo de diferentes versiones de un diseño:
La estructura atómica en el diseño es el enfoque donde los componentes pequeños (átomos) se combinan para formar estructuras completas como moléculas y organismos. En este proyecto:
¡Y eso es todo para este vistazo al diseño de un header responsivo en Figma! Con estos pasos, no solo podrás crear interfaces más adaptables y atractivas, sino también asegurar un flujo de trabajo organizado y coherente. Sigue experimentando y mejorando tus habilidades en diseño para convertirte en un experto en usar herramientas modernas de diseño de UI.
Aportes 6
Preguntas 0
La explicación tuya sobre como crear variantes a los componentes me pareció la más genial y amigable para entender como funcionan… Muchas gracias
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?