Auto-Layout

Clase 11 de 25 • Curso Básico de Figma - 2022

German Pinilla

student•

++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

Vanessa Pineda Bernal

student•

muchas gracias

Manuela Leyva Bernal

student•

excelente gracias

Jairo Ordoñez Pacheco

student•

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?

Ferney Alexander Nava Trujillo

student•

Juan David Niño Rodriguez

student•

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

Luis Aguirre

student•

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

Daniel Cruz

student•

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

Kevin Rodrigo Flores Acosta

student•

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.

Jeisson Espinosa

student•

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

Robinson Javier Ordoñez Barreiro

student•

Edith Johana Colmenares Contreras

student•

la verdad no entendi muy bien la 3ra funcionalidad

Disl B

student•

Hola, espero te ayude mi resumen

fixed height, fixed horizontally: El contenedor mantendrá su tamaño fijo cuando el contenedor padre se agrande o se haga más pequeño

fixed width, fill vertically : El contenedor mantendrá la medida de anchura aunque el contenedor padre se agrande o se haga más pequeño, pero la altura cambiará dependiendo del tamaño del contenedor padre, pues llena el espacio verticalmente

fixed height, fill horizontally: La altura del contenedor es fija, mientras que el ancho variará dependiendo del tamaño del contenedor padre

fill vertical, fill horizontal: El contenedor hijo incrementará o disminuirá su alto y ancho, cuando el contenedor padre aumente o disminuya su tamaño.

Edith Johana Colmenares Contreras

student•

Muchas gracias!!! voy a probarlas !!!

Gabriela Peñaloza Ramos

student•

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.

yesica tamara mattos

student•

no me gusta la actualizacion de platzi

Rosmery Medina Linares

student•

si a mí ya poco antes estaba bien

Fernanda López

student•

no funciona bien :(

Disl B

student•

Atajo de Windows y Mac para crear un Auto Layout

Shift + a

Hrach Kaderyan Midence

student•

cuando selecciono los tres elementos para hacer el autolayout, la foto se centra automáticamente en la parte de abajo y al agregar mas texto no se mueve para dar paso al texto nuevo, se queda fija y se monta sobre texto. A alguien mas le ha ocurrido? no se como arreglarlo.

brahian rodriguez

student•

tienes que cambiar el resizing de la caja contenedora de texto que quieres que se modifique, si es a lo ancho auto width o a lo alto auto height.

Nico Levy

student•

Tengo el mismo problema. Intente con la solucion de abajo pero no encuentro de donde cambiar el resizing automatico

Cristhian Villar

student•

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

Jose Tellez

student•

He adorado fervientemente esta clase. Soy desarrollador pero le hago un poco al diseño también y como no sé usar bien figma, nunca habia usado el auto layout.

No sabeeeen el tiempo que pasé alineando objetos uno por uno de forma individual, esto es una maravilla.

Cindy Milena Fontalvo Jiménez

student•

Mi trabajo.![](

Jimena Haran

student•

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

María Luisa Barboza Restrepo

student•

Mi ejercicio de Auto- Layout

Pedro Isaac Aguilar

student•

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.

Auto-Layout

Introducción

¿Para qué sirve Figma y por qué elegirlo?

Interfaz en Figma

Básicos

Configuración de guías y retículas

Creación de textos y estilos

Figuras e imágenes en Figma

Efectos en Figma

Redes de Vectores

Colores en Figma

Combo

Importar y exportar

Cómo crear guías de estilo

Auto-Layout

Los 15 mejores atajos para trabajar en Figma

Creación de componentes reutilizables: clase teórica

Creación de componentes reutilizables: clase práctica

Playground: Practica la creación de componentes reutilizables

Prototipado

Prototipado simple: interacción de scroll

Prototipado simple: conexión de diferentes frames

Prototipado avanzado: smart animate y componentes Interactivos

Co-Creando

Cómo agregar comentarios a los diseños

Historial de versiones en Figma

Librerías de estilos y componentes

Superpoderes

FigJam

Uso de plugins en Figma

Community: proyectos open-source y perfiles

Cierre

Proyecto final del curso de Figma