No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Auto-Layout

11/27
Recursos

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渆limina鈥 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 鈥淏ox 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 鈥渕ust鈥 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.