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

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

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?

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

la verdad no entendi muy bien la 3ra funcionalidad

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.

Atajo de Windows y Mac para crear un Auto Layout

Shift + a

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

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.

Excelente clase

Excelente herramienta de Figma.

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

Auto layout, súper herramienta.

Auto layout, súper herramienta.