m

pl
ia
d a
-
Te
or
ía
am
pl
ia
da
Webinar gratuito

-
Auto Layout

Te
or
ía
am
desde cero

pl
ia
d
Ilustraciones de Storyset
Te damos la bienvenida

a este documento :)

En este archivo recolectamos fragmentos teóricos de nuestros

cursos y varios recursos, que te puede ser muy útil para
introducirte en el maravilloso mundo de Auto Layout.

Vas a tener acceso a la teoría de este webinar, links de

bibliografía para que puedas ampliar tus conocimientos y
recursos sobre Auto Layout para que puedas seguir
aprendiendo y lo puedas aplicar a tus proyectos.

Ilustraciones de Storyset
Esperamos que te sean útiles y los aproveches al máximo :D
 Tabla de contenidos

Teoría Bibliografía Recursos

Intro al Diseño Responsive · Elementos
del Diseño Responsive · Buenas
prácticas Diseño Responsive · Repaso
Auto Layout navegación · Buenas
prácticas Auto Layout
NN Group Mobile Websites · NNGroup
Responsive Web Design and User
Experience · What is responsive design?
Interacction Design Foundation ·
Design more, resize less with Auto
Layout Blog Figma
Documento de práctica Playground
Auto Layout (Figma community) ·
Archivo Figma de Material, IOS y
Atlassian · Plugins Figma Breakpoints y
Responsive · Tutoriales de Help Figma
Center y Figma en Youtube

Ilustraciones de Storyset
Teoría Ilustraciones de Storyset
Introducción al

Diseño Responsive

A partir de la década de 2010, los diseñadores se enfrentaron a un

cambio histórico. Cada vez más personas empezaron a usar
dispositivos portátiles para acceder a contenido online en lugar
de computadoras de escritorio. Acá es donde nace uno de los
enfoques clave para hacer frente a estos nuevos cambios, el
diseño responsive.



El diseño web responsive es una manera de crear sitios web que

se ajustan automáticamente según el tamaño de la pantalla y
la orientación del dispositivo que se está utilizando. Este
enfoque ofrece una solución para adaptar el diseño a la amplia
gama de dispositivos que utilizan los usuarios, desde pantallas de
celular hasta grandes monitores de escritorio.
Fuente de imagen: Doctor's Website - Responsive Design by Manvi Mehrotra on Dribbble
Tres principios fundamentales

del Diseño Responsive

Sistema de Grilla Fluida

Las grillas son herramientas que los diseñadores utilizan para

construir, organizar información y crear experiencias de

usuario coherentes. Hay diferentes tipos de cuadrículas o grillas,

como las de columnas, jerárquicas y modulares.

El principio es sencillo: cada elemento ocupa el mismo porcentaje

de espacio, sin importar el tamaño de la pantalla. Esto significa

que los componentes pueden ajustarse automáticamente, ya

Fuente de imagen: Responsive Design Tutorial | HTML & CSS Is Hard
sea que el usuario esté utilizando un dispositivo grande o

pequeño.
Imágenes fluidas

En el ejemplo podemos observar que, en la versión fija (fixed), el En diseño responsive, las imágenes fluidas son aquellas que se
ancho permanece constante independientemente del ajustan al tamaño de su contenedor. Esto implica que cuando el
dispositivo. En cambio, en la versión fluida (fluid), el contenido navegador llega a un punto de quiebre (breakpoint), la imagen se
se adapta al espacio disponible según el tamaño del dispositivo. agranda o reduce para adaptarse al tamaño de la ventana actual.

 definen en las hojas de estilo CSS. Para los diseñadores, un punto

de interrupción representa un límite en el cual el diseño
cambia para adaptarse a las características del nuevo tamaño.
En general, se utilizan tres tamaños al diseñar sitios web
responsivos: 1024 y superiores, 1023-768 y 767-320 píxeles. Estos
valores ayudan a garantizar una transición fluida y una experiencia
de usuario óptima en una variedad de dispositivos. Podés saber
más sobre los puntos de quiebre te recomendamos este artículo.

Fuente de imagen: Responsive Images trong CSS

Consultas de medios y breakpoints (puntos de quiebre)

Esto es un poco más avanzado, pero las consultas de medios
actúan como filtros que detectan las dimensiones del
dispositivo que se está utilizando para navegar, adaptando el Fuente de imagen: What is Responsive Design?
diseño para que se vea de forma adecuada sin importar el tamaño
de la pantalla. Estas consultas trabajan en conjunto con los En esta imagen, se aprecia cómo cambia la disposición de las
puntos de interrupción o breakpoints (puntos de quiebre), que columnas en función del espacio disponible en la pantalla. En el
son valores específicos donde el contenido del sitio web se celular, el contenido se muestra en una sola columna, mientras
reorganiza para ofrecer la mejor experiencia al usuario.

que en la tableta se distribuye en dos columnas y en el escritorio

se extiende a tres columnas. Este ajuste dinámico garantiza que la
Tanto las consultas de medios como los puntos de interrupción se presentación sea óptima y fácil de leer en cada tipo de dispositivo.
Dado que el diseño responsive implica ajustar elementos en toda
la página, es importante que el diseño y el desarrollo trabajen
de la mano para asegurar una experiencia efectiva en todos los
dispositivos. Es como resolver un rompecabezas: es necesario
reorganizar elementos en páginas más amplias para que se
ajusten en páginas más estrechas y largas, o viceversa.
Fuente de imagen: Design Team Hannah Swann for Asana on Dribbble
Para que un diseño responsive tenga éxito, debe ser utilizable en
todas las resoluciones y tamaños de pantalla. No sólo
asegurarnos sobre la ubicación o distribución de los elementos,
sino también que la experiencia de usuario sea fluida y
satisfactoria, independientemente del dispositivo utilizado.
Cuando los elementos se reorganizan en la página, la experiencia
del usuario puede variar considerablemente de una vista del sitio a
otra. Por eso, es muy importante que los equipos de diseño y
desarrollo colaboren estrechamente, no sólo para decidir la
distribución del contenido, sino también para evaluar cómo
afecta ese cambio al aspecto final y a la experiencia del usuario.
Siempre es aconsejable llevar a cabo pruebas de usabilidad en los
diseños. En el caso de diseños responsivos, es fundamental
realizar pruebas en todas las plataformas. Ya es bastante
desafiante diseñar un sitio web que funcione bien en un escritorio,
pero se vuelve aún más complejo cuando se trata de crear un sitio
que sea efectivo con diversas reorganizaciones y configuraciones
de elementos, adaptándose a distintos tamaños y orientaciones
de pantalla.
Fuente de imagen: Usability Dmytro Novitskyi on Dribbble
Un elemento de diseño que puede ser perfecto

para una pantalla de escritorio podría no

funcionar tan bien en un tamaño móvil, y

viceversa.

Por eso, realizar pruebas exhaustivas en diferentes dispositivos

garantiza que el diseño sea óptimo y que la experiencia del

usuario sea positiva en todas las plataformas.

Esta estrategia se basa en la idea de optimizar la experiencia del

usuario en cualquier formato, eliminando elementos que pueden

resultar menos relevantes o prácticos en pantallas más pequeñas.

Así, el diseño responsivo no se trata solo de adaptar, sino

también de optimizar, asegurando que la versión móvil

conserve la funcionalidad esencial.

Elementos del

Diseño Responsive

Tamaño de visualización
El primer aspecto a considerar al diseñar un sitio web responsive
es el tamaño de visualización que ofrecen los dispositivos de
navegación. Esto se refiere al espacio disponible para que los
usuarios vean el contenido en sus dispositivos.
Los tamaños de visualización varían según el dispositivo, pero hay
proporciones comunes como 16:9 por ejemplo. Es importante
investigar qué formatos son populares o están en tendencia y
anticipar las dimensiones con las que vamos a trabajar. Esto
nos permitirá seleccionar la disposición y el tamaño más
adecuados para los contenidos. Fuente de imagen: App Design Book - Interacción y patrones
Cada web o app puede definir sus tamaños basándose en sus
personas usuarias y los usos que le dan. Pueden tener métricas Por ejemplo Spotify tiene que funcionar en dispositivos smart
de los dispositivos claves de mayor uso de sus usuarios y con eso como un smartWatch y también en TVs pero su uso principal está
basarse en la definición de los breakpoints. en los teléfonos.
Tamaño de navegación Contenido textual
El tamaño de navegación incluye el contenido que los usuarios El contenido textual abarca todos los materiales en formatos de
pueden explorar: lo que una página web pretende mostrar, su letras y números presentes en tu página, como títulos, párrafos,
longitud y formato. llamadas a la acción (CTA), entre otros.

Es esencial programar estos contenidos para que el tamaño de las

tipografías se adapten al dispositivo de navegación y su
configuración. Como norma general, se recomienda que las
líneas de texto no superen las 10 palabras para asegurar que el
lector pueda comprenderlas de manera fácil en un tamaño legible,
también que en párrafos no sean menos de 4 para que la lectura
no sea tan fragmentada. Esto contribuye a una experiencia de
lectura más cómoda y efectiva.

Fuente de imagen: Responsive Images trong CSS

Es frecuente que los sitios web sean considerablemente más

extensos cuando se navega desde un teléfono móvil, ya que la
misma cantidad de información debe adaptarse a un espacio más
estrecho. Es crucial tener en cuenta esta longitud, ya que los
usuarios podrían cansarse de desplazarse hacia abajo y sentir Te dejamos este post sobre cómo leemos en la web de Sol Parnofiello,

que la página nunca termina. En el diseño responsive, encontrar referente de UX Writing en Español.

un equilibrio en la presentación del contenido.

Contenido visual
En épocas visuales, los usuarios prefieren datos presentados en
infografías, videos y gráficos, una estrategia responsiva efectiva es
crear materiales visuales específicos para la navegación móvil.
Por ejemplo, si contamos con un gráfico de barras con estadísticas
en la versión de escritorio, sería necesario modificarlo para que la
visualización sea más amigable, quizás presentándolo de manera
simplificada y fácil de explorar en una pantalla más pequeña.
Esto asegura una experiencia visual optimizada y fácil de
entender, adaptada a las preferencias y limitaciones de las
pantallas más pequeñas de los dispositivos móviles.
Fuente de imagen: Luka Bendi ć for Balkan Brothers on Dribbble
Identificadores de marca
Fuente de imagen: Responsive Logos by Joe Harrison
Los identificadores de marca incluyen el logo, el nombre de la
empresa, entre otros. En los sitios de escritorio, estamos
acostumbrados a verlos en un formato más amplio. Sin embargo,
en las páginas responsive, al adaptar el diseño, es necesario
eliminar o simplificar algunos de estos indicadores sin arruinar
la identidad.
Esto se puede lograr mediante la creación de un logo simplificado
específicamente para la navegación web, eliminando o colocando
un eslogan al final de la página, y abreviando o excluyendo el
nombre de tu empresa. Además, es importante establecer una
paleta de colores sólida y representativa de la marca para
asegurar que la identidad de la empresa no se pierda en estos
dispositivos. Este enfoque garantiza que los elementos de marca
sigan siendo reconocibles, incluso en pantallas más pequeñas.
Botones de acción (CALL TO ACTION - CTA)

Gracias a los botones de acción es que los usuarios pueden

navegar y desplazarse entre diferentes páginas o dentro de una
misma. Los CTA amplían las funciones de la página o redirigen a
los usuarios a donde desean ir.

Es crucial que los menús y las ventanas de chat estén siempre

visibles y sean fáciles de encontrar. La accesibilidad y la
visibilidad de estos elementos son fundamentales para facilitar la
navegación y la interacción del usuario en cualquier dispositivo.

Fuente de imagen: Domestika

Buenas prácticas
para Diseño Responsive
Comenzar con “Mobile First”
Es recomendable diseñar desde la pantalla más pequeña o desde
la versión móvil. De esta manera se prioriza el contenido y se
simplifican los elementos gráficos e imágenes para la versión
móvil. En esta microclase te contamos un poco sobre de qué trata
este enfoque de diseño.
Fuente de imagen: Mobile Notification Illustrations by Lukasz Adam on Dribbble
Puntos de quiebre (Breakpoints)
Como mencionamos anteriormente, hay que tener en cuenta el
tamaño de las pantallas donde se va adaptar el contenido. Se
recomienda incluir tres o más puntos de interrupción para la
adaptación de diferentes dispositivos.
Fuente de imagen: Breakpoint - UXCel
Buenas prácticas para Diseño Responsive

Priorizar el contenido Minimalismo

Según el contexto de los usuarios podemos priorizar o descartar Menos es más. Al diseñar interfaces simples garantizamos que la
contenido. Aplicar jerarquías visuales dentro de la navegación experiencia de las personas usuarias sea efectiva y sin fricciones.
para presentar primero los elementos esenciales.

Fuente de imagen: Type Hierarchy by Rikki Janae on Dribbble

Fuente de imagen: Breakpoint - UXCel
Buenas prácticas para Diseño Responsive

Patrones de Diseño Accesibilidad

Aplicar patrones, para ver cómo se estructura el contenido en Es importante tener en cuenta los tamaños y estilos de fuente

diferentes dispositivos. Como por ejemplo: no es lo mismo tener para mejorar la accesibilidad. También tener presente el

que hacer click que tapear un botón, los tamaños son otros. La contraste y fondo y las escalas tipográficas.

interacción varía según el dispositivo con el que estoy

interactuando. Aprendé más sobre patrones en esta clase gratuita.

Fuente de imagen: UI Design Patterns and How They Are Applied - Designorate Fuente de imagen: Design Guidelines Part One by Adis Cengic on Dribbble
Repaso de

Auto Layout

La función Auto Layout (Distribución automática) en Figma es una

herramienta sumamente flexible. Al principio, puede resultar un

poco desafiante comprender su funcionamiento y lograr los

resultados que queremos enseguida, pero esto forma parte del

proceso realizando varios intentos de prueba y error. Así que no te

preocupes si no te sale a la primera.

Auto Layout es una herramienta esencial en Figma que facilita la

creación de frames y componentes adaptables, ajustándose y

redistribuyéndose conforme cambia el tamaño del diseño. Esta

característica brinda la capacidad de desarrollar elementos

dinámicos y flexibles en todo el proyecto.

Lo que realmente destaca a Auto Layout es su versatilidad,

marcando la diferencia respecto a otras herramientas de diseño.

Fuente de imagen: Auto Layout vertical alignment - Figma Community Forum
En términos simples, esta función te permite organizar

elementos y frames de manera que un contenedor se ajuste

automáticamente al tamaño de su contenido, y viceversa.

Es como si tuvieras una especie de magia que logra que todo Flujo del Diseño
encaje perfectamente. Con Auto Layout, la adaptabilidad y la

armonización de los elementos en tu diseño se vuelven intuitivas y Permite que los elementos se organicen de manera automática, ya

eficientes. Teniendo en cuenta la organización de los elementos sea en dirección vertical u horizontal, dentro de un marco.

con la función de autolayout nos acercamos más a cómo van a

programar nuestros diseños los desarrolladores. Es clave

entender que todo lo que diseñamos de manera digital pasa por

desarrolladores que deben interpetar nuestros diseños

Con Auto Layout, la adaptabilidad y la armonización de los

Fuente de imagen: Figma auto layout playground
elementos en tu diseño se vuelven intuitivas y eficientes.

Auto Layout nos sirve para crear componentes como botones,

Espaciado
formularios, listas, cards y más. Es una herramienta súper

poderosa e interesante y a pesar de que puede dar la impresión de

Controla la distancia entre los elementos, asegurando una
ser compleja, a medida que practicamos vamos a ir
distribución uniforme o personalizada.
entendiendo y mejorando su uso.

¿Cómo funciona Auto Layout?

Auto Layout funciona mediante un sistema de restricciones o

propiedades que definen la posición y el tamaño de los objetos.

Algunas de las propiedades clave que ofrece Auto Layout incluyen:

Fuente de imagen: Figma auto layout playground

Alineación
Determina cómo los elementos se alinean entre sí, ya sea en el
centro, a la izquierda, a la derecha, arriba o abajo.
Fuente de imagen: Figma auto layout playground
Cambiar Tamaños
Facilita la adaptación del tamaño del marco según el contenido
que contiene, ajustándose automáticamente.
Fuente de imagen: Figma auto layout playground
Cuando aplicamos Auto Layout a un frame, los elementos en su
interior se organizan de manera ordenada, ya sea en disposición
vertical u horizontal. El tamaño del frame se ajusta
automáticamente para abarcar el tamaño total de los
elementos contenidos o al tamaño de su contenedor, según se
determine. Además, los frames con Auto Layout pueden tener
atributos adicionales como relleno, trazo y radio de esquina, lo
que permite la creación de elementos como botones sin
necesidad de agregar capas adicionales.
¿Cuándo utilizar autolayout?
Auto Layout es una herramienta útil para varias situaciones
Crear elementos o diseños responsive
Ideal para diseñar sitios web y aplicaciones móviles, ya que
permite crear diseños que se adaptan de manera automática a
diferentes tamaños de pantalla. Con Auto Layout, tus diseños se
vuelven responsivos por defecto, asegurando una experiencia de
usuario perfecta en todos los dispositivos y orientaciones.
Diseños Complejos
Cuando se trabaja con diseños complejos que pueden ser difíciles
o incluso imposibles de crear manualmente. Auto Layout facilita la
gestión y organización de elementos en diseños más elaborados.

Fuente de imagen: Weather App Ui Design by Sajjad Hossain on Dribbble
Mantener consistencia
Mantener espacios y proporciones consistentes es esencial para
lograr una interfaz de usuario visualmente atractiva. Auto Layout
garantiza que el diseño permanezca consistente en diversos
dispositivos y variaciones de contenido.
Ahorro de Tiempo y Esfuerzo
Su capacidad para ajustar automáticamente la disposición y el
tamaño de los elementos agiliza el proceso de diseño. Permite
ahorrar tiempo y esfuerzo que de otra manera se invertiría en
ajustes manuales para adaptarse a diferentes tamaños.
Fuente de imagen: Building A Product In House by Richa Arora for Wingify on Dribbble
Colaboración
Las funciones colaborativas de Figma combinadas con Auto Layout
facilitan la colaboración entre diseñadores y desarrolladores. Esto
permite una comprensión compartida del comportamiento
previsto del diseño y mejora la eficacia en el trabajo conjunto.
Figma Auto Layout se destaca como una herramienta poderosa
que se adapta a una variedad de necesidades de diseño.

Su facilidad de uso y su capacidad para optimizar la eficiencia en

la creación de interfaces lo convierten en una elección valiosa También podemos hacerlo a través del atajo de teclado ⇧ Shift + A
para diseñadores que buscan mejorar la velocidad y la o con clic derecho en un seleccionando Agregar auto layout (add
precisión en sus proyectos. autolayout). Aprendé más en su blog oficial
¿Cómo usar Auto Layout?
Puede agregar auto layout a un frame o a una selección de
objetos. Esto incluye
Frames nuevos o vacío
Frames con contenido existent
Componentes y conjuntos de componentes
Grupos u otras selecciones de capas y/u objetos

El diseño auto layout sólo se admite en frames. Si selecciona

objetos que no están en un frame, Figma creará un nuevo frame de
diseño automático alrededor de ellos.

Para aplicar auto layout a un frame tenemos la barra lateral

derecha, donde hacemos clic en “+” con un marco seleccionado.
Buenas prácticas

con Auto Layout

Funciones clave Relleno y espaciado: Auto Layout te permite definir el relleno y el

espaciado entre elementos, asegurando diseños consistentes y
Restricciones: Las restricciones constituyen la base fundamental
visualmente atractivos. Esta funcionalidad es especialmente
de auto layout. Al definir restricciones para tus componentes,
valiosa al trabajar con botones, tarjetas y listas, donde mantener
podes tener control sobre cómo se comportan cuando el
un espaciado uniforme es esencial para la coherencia visual y
contenedor principal experimenta cambios en su tamaño.

la estética del diseño.

Estas restricciones se pueden establecer tanto para el eje
horizontal como vertical, brindando una variedad de 8

comportamientos responsivos.

Fuente de imagen: Figma auto layout playground Fuente de imagen: Figma auto layout playground
Apilamiento: Esta característica proporciona una manera
poderosa de organizar automáticamente elementos dentro de un
contenedor. Figma ofrece opciones de apilamiento horizontal y
vertical, simplificando la disposición de elementos dentro de un
componente sin necesidad de ajustes manuales. Esta
funcionalidad mejora la eficiencia del diseño y asegura una
disposición ordenada y coherente de los elementos en tu proyecto.
elaboradas y detalladas sin perder la capacidad de respuesta y la
Fuente de imagen: Figma auto layout playground
Auto Layout anidado: La capacidad de anidar frames con auto
layout es una característica destacada que permite crear diseños
de interfaz de usuario complejos que escalan sin esfuerzo. Con
auto layouts anidados, los diseñadores pueden crear componentes
que contienen su propio conjunto de restricciones, brindando una
flexibilidad en el diseño. Esto facilita la creación de interfaces más
coherencia del diseño.
Fuente de imagen: Figma auto layout playground
Bibliografía Ilustraciones de Storyset
Lectura

recomendada
Diseño Responsive

Mobile Websites
Responsive Web Design What is Responsive Qué es un diseño
NNGroup (RWD) and User Design? Interaction
responsive: características
Ver artículo Experience Design Foundation y ejemplos
Ver artículo Ver artículo Ver artículo
Lectura

recomendada
Auto Layout

Behind the feature:

Design more, resize less, Auto Layout en Figma
the making of the new with Auto Layout Ver artículo
Auto Layout Ver artículo
Ver artículo
Lectura

recomendada
Auto Layout

Auto Layout de Figma

Everything you need to 10 Auto-Layout Tips

por Juanpol know about figma

in Figma

Ver artículo auto layout Ver artículo

Ver artículo
Recursos Ilustraciones de Storyset
 Documento de práctica:

Figma Auto Layout Playground

*Recordá duplicar el archivo para practicar

Tutoriales

Figma tutorial:
Diseñá tu primer botón
Figma Tip:
Creá una card responsive
What’s new in
Figma Help Center Using Auto layout
con Auto Layout y
Auto layout #Config2022 Ver artículo min and max values Constraints
Ver video Ver video Ver artículo
Recursos & herramientas

Archivo Figma Archivo Figma Archivo Figma

Material Design 3 Apple Design IOS 17 Atlassian

Plugin Figma Plugin Figma 10 Auto-Layout

Breakpoints Responsive Tricks (Community)

 Curso de diseño de 


interfaz de usuario (UI)

15% OFF

Código de descuento: NERDAS

Inicio de cursada: 19/01

Válido hasta: 26/01

Fotografía de Unsplash
 ¡Muchas gracias

por llegar hasta acá!

Si te gustó nuestro contenido te invitamos

a seguirnos en nuestras redes :)