Auto-Layout

Auto-Layout

Esta heramienta no solo permite estanadarizar nuestros objetos, tambien permite ver como van
a escalar en diferentes intefaces manteniendo consistencia entre los elementos mismos, esto
se llama Auto Layout.

Box model
El box model esta compuesto por:

• Content: Es el contenido de nuestro objeto (texto, figura, imagen)
• Padding: El área de padding es el espacio entre el contenido del elemento y su borde (border).
• Border: La propiedad border permite definir en una única regla todos los bordes de los elementos seleccionados.
• Margin: La propiedad margin establece el margen para los cuatro lados desde el borde.

Propiedades del Auto-layout

• Mantiene patrones de distancia simetricos entre sus elementos
• Son frames, no grupos
  • Tienen una alineacion vertical u horizontal
• Las propiedades de los elementos se modifican desde adentro,
  pero tienen comportamientos globales

Creando Auto-layout

• Seleccionar los elementos
• Shift + a
• Definir alineacion del frame
• Default depende de los elementos existentes

Editando Auto-layout

• Ocultar / mostrar elementos
  • Esto los “elimina” de la alineacion
• Re-organizacion con:
  • Drag
  • Flechas
  • Iconos

Para que sirve el Auto-layout?
Consistencia

• Los componentes de una interfaz van a existir dentro de un box model,
  independiente de la tecnologia que se use para codificarlos
• Replica dicho “Box model” sobre una interfaz es un gran lugar para
  empezar a comunicarse mejor con los programadores

Este mán es muy pro explicando, lo hace de una manera tan natural que quiero seguirlo en sus redes sociales, he quedado impresionado. ¿alguien sabe como localizarlo?

Muy interesante esa funcionalidad de auto layout sobretodo pensando en aplicaciones tipo ecommerce modificando los parametros algo tipo pinterest

Me costó un poco entender cómo funciona realmente el Auto-Layout al inicio. Una reforzadita con videos de YouTube y ya quedó 😄

Es muy bueno el autolayout para los devs porque si generamos un padding se mostrará en el panel de inspeccionar, y eso hace que podamos generar mejores responsive designs con flexbox

Excelente explicación, muchos pensarían que no tiene mucha importancia estos conceptos, pero para uno como desarrollador, sabe lo esencial que es saber esto; lo cual ayuda mucho cuando se esté creando un Design System para una empresa.

Información resumida de esta clase
#EstudiantesDePlatzi

• Auto-Layout es la herramienta que me permite estandarizar mis objetos y como estos escalan según la interfaz, siempre manteniendo la consistencia entre ellos mismos

• En programación veremos mucho el box-model y dentro de este encontramos: El content, el padding, el border y el margin

• El margen entre el content y el border se le conoce como padding

• Auto-Layout me permite combinar diferentes elementos y estandarizar los parámetros a lo largo de la interfaz

• El Auto-Layout es un Frame y no son grupos, estos se organizan de manera vertical u horizontal

• Los elementos que estén dentro del Layout tienen su propias propiedades que se pueden modificar pareo también un comportamiento global

• Shift + a = Crear Auto-Layout

• Cuando oculto un elemento dentro del Layout los demás se reorganizan

• Es importante tener claro que los componentes de una interfaz van a existir dentro del box-model

• Replicar el box-model dentro de nuestros proyectos es una gran ayuda para los programadores

• Cuando creo un Layout en sus propiedades puedo modificar su padding de manera vertical u horizontal y el padding en medio de sus elementos

• Presionando la tecla Ctrl y dando clic en el lugar donde modifico el padding activo un paddng global para el Layout

• Interesante

• Podemos organizar los elementos que tengamos en horizontal dentro de un Auto-Layout par luego organizarlos con otros elementos de manera vertical

• Aprender a manejar esta herramienta es fundamental

la verdad no entendi muy bien la 3ra funcionalidad

Alguien crea objetos en color rojo-rosado, verde, azul y morado. Automáticamente mi cabeza relaciona: bómbon, bellota, burbuja y bella XD No sé si solo me sucede a mí o a alguién más.

Atajo de Windows y Mac para crear un Auto Layout

Shift + a

Por fin puedo dominar las figuras donde yo quiero… Gracias Layout… jejeje

Mi trabajo.![](

Es una herramienta muy útil, vi cómo la usaban los devs y es muy importante

Mi ejercicio de Auto- Layout

Auto Layout se vuelve un “must” cuando tienes muchos elementos de texto, imágenes y formas, y no quieres que se desacomoden cuando armas más pantallas o cuando el espacio de trabajo crece o se achica. De esta manera, esta funcionalidad es una de las mejores y más útiles que ofrece Figma, y además, creo que por ello es una de las razones por las cuales se ha convertido en el software más popular del diseño de interfaces.

🔥 Apuntes / Notas / Resumen

Les dejo un compilatorio de todas las notas del curso, agregué imágenes de guía, entre otros.
Ver en GitHub👈👀 Revisalo, te puede ser de gran ayuda. ✌😃

REVISAR COMPORTAMIENTO INDEPENDIENTE EN AUTO-LAYOUT

_

Modelo de caja - explicación gráfica

Dejo mi aporte

• Auto-Layout

  • Es una herramienta que permite mantener la consistencia entre los elementos de una interfaz gráfica y su comportamiento en diferentes tamaños de pantalla.
  • Con Auto-Layout, puedes crear diseños flexibles que se ajusten automáticamente a los cambios en el contenido o en el tamaño de la pantalla. También puedes ajustar la alineación y distribución de los elementos de manera rápida y sencilla.

  Box model

  El box model esta compuesto por:

  • Content: Es el contenido de nuestro objeto (texto, figura, imagen)
  • Padding: El área de padding es el espacio entre el contenido del elemento y su borde (border).
  • Border: Es el borde de la caja o contenedor
  • Margin: Es el espacio externo después del borde.

  Propiedades del Auto-layout

  • Mantiene patrones de distancia simétricos entre sus elementos
  • Son frames, no grupos
    • Tienen una alineación vertical u horizontal
  • Las propiedades de los elementos se modifican desde adentro, pero tienen comportamientos globales

  Creando Auto-layout

  • Seleccionar los elementos
  • Shift + a
  • Definir alineacion del frame
  • Default depende de los elementos existentes

  Editando Auto-layout

  • Ocultar / mostrar elementos
    • Esto los “elimina” de la alineación
  • Re-organización con:
    • Drag
    • Flechas
    • Iconos

Auto Layout.

Excelente clase

Excelente herramienta de Figma.

Auto layout, súper herramienta.

Auto layout, súper herramienta.