Si les pasa que no les aparece la opción Space-between en la ventana de Advanced auto layout settings a la hora de hacer responsive los elementos dentro del header, utilicen la propiedad Auto, en la opción de espaciado entre elementos.
Cómo iniciar los proyectos en Figma
Landing Page responsive
Atomic Design en Figma
Uso de librerías en Figma
Quiz: Cómo iniciar los proyectos en Figma
Diseño Responsive y Técnicas Avanzadas
Uso de Grids
Uso de Constraints
Constraints y Layout
Propiedades Wrap, Min y Max en Autolayout
Sistemas de Diseño
Prototipado mobile
Prototipado Desktop
Quiz: Diseño Responsive y Técnicas Avanzadas
Crea componentes avanzados
Uso de Variants
Component properties
Implementa Component properties
Quiz: Crea componentes avanzados
Variables en Figma
Cómo usar las variables de Figma para colores y tamaños
Cómo usar las variables de texto en Figma: traducciones automáticas
Quiz: Variables en Figma
Inteligencia Artificial para Figma
Funcionalidades de Inteligencia Artificial (IA) en Figma
Inteligencia Artificial para proyectos de diseño Figma
Crear Landing Pages con Figma
Diseño de una Landing Page para el sector de Banca: briefing de diseño con IA
Diseño de una Landing Page para el sector de banca: paleta de colores
Diseño de una Landing Page para el sector de Banca
Diseño de una Landing Page para el sector de Banca: prototipado
Interacción Avanzada con Prototipos
Cómo crear interacciones con los componentes
Interacciones en la card
Prototipado de navegación
Quiz: Interacción Avanzada con Prototipos
Prototipado avanzado con Figma
¡Comparte tu landing page, entrega y recibe feedback de la comunidad!
Las mejores landings creadas con Figma
Documentación para el desarrollo en Figma
Quiz: Prototipado avanzado con Figma
Cómo trabajar con los equipos de desarrollo
Colaboración con desarrollo: Dev Mode de Figma
Colaboración con Desarrollo: Figma y Visual Studio Code
Quiz: Cómo trabajar con los equipos de desarrollo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Constraints y Layout
6/30Recursos
¿Cómo crear un menú responsive utilizando constraints y autolayout en Figma?
Transformar un simple menú en un diseño responsive puede parecer un desafío, pero con herramientas como Figma y técnicas como constraints y autolayout, el proceso se vuelve accesible y eficiente. En esta guía, exploraremos paso a paso cómo crear un menú adaptable utilizando estas técnicas. Este enfoque te proporcionará control y flexibilidad para asegurarte de que tus diseños funcionen a la perfección en diferentes dispositivos.
¿Cuál es el primer paso al crear un menú responsive en Figma?
Lo primero es establecer la base para nuestro menú. Partimos de un tamaño de iPhone 8 Plus, creando un frame que sirva como base. Este frame debe ajustarse a las medidas esenciales: 414 píxeles de ancho y 736 píxeles de alto, representando las dimensiones del iPhone. Añadimos los principales elementos del menú, como el logo y un icono, dentro de este frame. Para estructurar correctamente el diseño, empleamos autolayout. Al activarlo, podemos asegurarnos de que el frame y sus elementos internos se adapten automáticamente al tamaño que necesitemos.
¿Cómo se configura el autolayout para un menú en Figma?
Utilizar autolayout en Figma proporciona automatización en el comportamiento del diseño. Una vez incluido el logo y el icono en el frame, pueden seguir los siguientes pasos:
-
Activar autolayout: Esto se hace desde la barra lateral derecha en Figma. Al activarlo, el diseño puede cambiar de tamaño, pero podemos ajustarlo para que mantenga un ancho fijo de 414 píxeles.
-
Posicionar el frame en el layout: Colocamos la barra en la parte superior del layout y cambiamos su color para diferenciarla del fondo.
-
Ajustar márgenes y padding: Eliminamos los márgenes interiores y ajustamos el ancho del autolayout para que se extienda a todo el contenedor, permitiendo que el menú se comporte de manera responsive.
-
Configurar espacio entre elementos: Usamos la función "space between" para asegurarnos de que Figma administre automáticamente el espaciado según el tamaño del contenedor.
¿Cuáles son las diferencias en el uso de constraints y autolayout?
Al crear un menú responsive, tanto constraints como autolayout tienen sus ventajas. Se puede explorar otro enfoque empleando únicamente constraints para entender cómo varían el manejo y posición de los elementos.
-
Recreación del frame usando constraints: Copiamos los elementos del menú y ajustamos un nuevo frame al tamaño del iPhone 8 Plus. Colocamos el logo y el icono de manera similar dentro de este nuevo frame.
-
Configurar comportamientos de los elementos: Utilizando constraints, indicamos que el logo quede fijo a la izquierda mientras que el ícono se mantiene a la derecha. Esto asegura que al redimensionar el menú, los elementos se mantengan en sus posiciones específicas.
-
Fijar ancho sin autolayout: A diferencia del autolayout, bajo constraints, se define manualmente cuando un elemento deberá llenar el container (fill container) para hacer frente a variables de tamaño sin necesidad de cambios automatizados.
¿Cómo decidir entre autolayout y constraints al diseñar un menú responsive?
La elección entre autolayout y constraints depende del resultado deseado y la funcionalidad que se requiere. Ambos permiten lograr un menú responsive pero ofrecen distintos niveles de control:
-
Autolayout es perfecto cuando se requiere que los elementos se adapten automáticamente al espacio disponible, asegurando uniformidad y sencillez en la administración del diseño.
-
Constraints ofrecen un mayor control sobre la posición específica de los elementos. Esto es útil si se busca que ciertos componentes mantengan su lugar específico sin ser influenciados por cambios en otros elementos del diseño.
Se recomienda experimentar con ambos métodos para obtener una comprensión completa y decidir cuál se alinea mejor con las necesidades de tu proyecto. Continúa desarrollando tus habilidades de diseño y crea menús impresionantes que se adapten a cualquier pantalla y dispositivo. ¡La práctica constante convierte el aprendizaje en dominio!
Aportes 15
Preguntas 1
Ordenar por:
**Auto layout ** es similar a CSS, así es como yo le entendí cuando aprendí
/* Auto Layout == Flex */
.auto-layout {
display: flex;
align-items: center; /* flex-start, flex-end */
justify-content: space-between; /* center */
}
Como desarrollador recomendaría mas el uso de autolayout ya que se traslada mejor al código de CSS que se vaya a crear.
Las constraints se asemejan a la posición absoluta que es poco usada para el desarrollo responsivo y pueden generar ciertos problemas incluso en el mismo template de Figma.
Sea lo que sea es bueno conocer estas herramientas. :)
Figma no permite el uso de constrains y autolayout al mismo tiempo
**Solución para implementar los constraints 2024 en figma**
1. seleccionar el botón que se indica en pantalla
![]()
2. luego nos aparecerá el constraints y podremos realizar las modificaciones necesarias.
Es interesante como figma está constantemente optimizando su interfaz, pues actualmente basta con hacer doble click al cuadro para realizar el space-between y es genial
* Un elemento no puede tener autolayout y constrains al mismo tiempo.
* Con constrains puedo jugar con comporamientos de anclaje individuales dentro del frame. cosa que no se puede con autolayout.
* El autolayout automaticamente flexibiliza el tamaño del frame ajustandolo a su contenido, si quiero que el tamaño sea mas grande debo alterar la dimensión que necesito dejándola fija.
Woooooow, no sabía que podías añadirle un fill container a un frame, creí que solo se podía si era autolayout :o
Qué buen dato, no sabía que se podía aplicar ‘Fill Container’ a los elementos sin usar ‘Auto Layout’. Lo aplicare
cómo consigo el archivo con el que ella trabaja?
### **Puntos importantes de la clase:**
1. **Auto Layout y Constraints**:
* Auto layout gestiona el espaciado y la distribución de los elementos dentro de un frame de manera automática.
* Constraints permiten controlar cómo se comportan los elementos en relación con su contenedor (fijo, centrado, alineado a los lados).
2. **Configuraciones en Auto Layout**:
* Ajustar el ancho y alto fijo del contenedor.
* Configurar el comportamiento de los elementos dentro del auto layout: **space between**, **packed** (espaciado fijo), o automático.
* Utilizar márgenes (padding) y cambiar los valores para asegurar que no haya espacios no deseados entre los elementos.
3. **Uso de Constraints**:
* Puedes definir cómo un elemento debe comportarse cuando el contenedor cambia de tamaño: alineado a la izquierda, derecha, centrado, arriba, abajo, etc.
* Ideal para casos donde auto layout no permite el comportamiento que buscamos (por ejemplo, mantener elementos fijos en el centro).
4. **Comparación entre Auto Layout y Constraints**:
* Auto layout se utiliza para layouts más fluidos y automáticos.
* Constraints son útiles cuando necesitamos control más específico sobre la posición y el tamaño de los elementos.
5. **Responsive Design**:
* Utilizar constraints para que los elementos se adapten a cambios de tamaño en el contenedor.
* Los menús responsive deben crecer o decrecer de manera proporcional al contenedor.
yo tengo problemas para mover la barra de figma despues de hacer el autolayout en el frame de iphone
No me sale el sapcin mode
Porque hay que batir el puntero como un remolino?
Es normal que salga así? 
No veo más opciones
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?