Breakpoints y Responsively para probar diseño responsive

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:58

Breakpoints y Responsively para probar diseño responsive

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 10 de 29

Clase 10 / 29

Comentarios (14)14 comentarios

Ferney Alexander Nava Trujillo

Hace 3 años

¡Así quedo mi prototipado mobile, tablet y Desktop 🚀!

Rubén Vega

Hace 3 años

Está buenísimo man

Omar Alejandro Martinez Cisneros

Hace 2 años

Genial

Ariel Hernán Contini

Hace 3 años

Es un bug del plugin, esta bueno, quizás le hace falta mejor mantenimiento :)

Rubén Vega

Hace 3 años

Totalmente de acuerdo, no es muy bueno. Supongo que en equipos grandes se pagará por un plugin de calidad.

Diana Alexandra Rodríguez Rojas

Hace 2 años

Así va mi prototipado, queda mucho por aprender, fui de las que se inscribió este curso sin saber usar absolutamente NADA de figma, y tuve bastante dificultad porque de pasar de un curso básico a tecnicas avanzadas no fue facil, youtube tambien fue mi mejor amigo!!

Eliseo Baquero

Hace 7 meses

Quedo muy bien, felicitaciones.

Victor Manuel Pedreros

Hace 3 años

Saludos, necesito ayuda, es posible hacer responsive un elemento con posición absoluta? He creado una barra de navegación para mobile que se mantenga fija mienstras se hace el scroll vertical pero claro, cuando hago ampliación de pantalla horizontal no logro hacer que se adapte. Como se puede conseguir esto?

Gracias.

Carmen Ansio

Profesor

Hace 3 años

Hola Victor! Puedes hacer uso de las Constraints o incluso del nuevo wrap de autolayout ☺️

Darwin Perez

Hace 3 años

Hola me surgió una duda, cuando realizamos nuestros componentes, en el caso de la barra menú o de las cards ¿Se hace una versión para desktop y otra Mobile, o se ajusta con algún plugins de manera automática?

La duda surgió porque en la clase anterior al usar el componente se le indicaba en figma si era para mobile o desktop y se ajustaba de forma automática.

Platzi

Hace 3 años

En el caso de la barra menú y las cards, se puede hacer una versión para desktop y otra para mobile, ajustándolas manualmente. También se pueden utilizar plugins o librerías que ayuden a hacer el ajuste automático.

Carolina Gómez

Hace un año

En esta clase se trabaja la versión desktop del diseño. Se usa un frame de tamaño 1440 y se comienza trayendo la barra de navegación desde la versión de diseño anterior. Esta se incluye dentro de una cuadrícula de 12 columnas, eliminando la configuración por defecto del componente.

Al intentar ubicar el encabezado (header), se observa que no se posiciona correctamente debido a que el frame contenedor no tiene activado el auto-layout. Esto se corrige para que los elementos se acomoden como se espera.

Luego, se añade el componente de carta, pero como tiene un container hug y el layout está en fijo, tampoco se acomoda bien. Se corrige esto eliminando la configuración incorrecta. Finalmente, se agrega el footer, que puede encontrarse fácilmente usando el buscador de componentes.

Con esto, se completa la versión desktop. Para verificar cómo se comportan las interfaces al cambiar de tamaño (de mobile a tablet y desktop), se presentan dos plugins:

Breakpoint
- Es más preciso, pero tiene un periodo de prueba de dos semanas.
- Permite definir diferentes versiones (mobile, tablet, desktop) y simular cómo se adaptan.
- Aunque luego haya que pagar, las pruebas realizadas siguen funcionando.
- Es útil tanto para diseñadores como para desarrolladores, ya que muestra cómo deben comportarse los elementos al cambiar de tamaño.
Responsively
- Es gratuito, pero menos preciso.
- Requiere nombrar los frames con números (no solo con etiquetas como "mobile" o "desktop") para que funcione correctamente.
- Muestra una animación del comportamiento, aunque puede fallar con elementos duplicados o mal posicionados.

Se concluye que Breakpoint ofrece mejores resultados y es ideal para probar diseños responsive. Finalmente, se invita a la siguiente clase, donde se animarán las interfaces y se agregarán microinteracciones para darles vida.

Carlos Alberto Salazar Páez

Hace 3 años

Muy útil el curso, sin embargo tengo una duda, estoy trabajando con Constraints el banner de inicio, sin embargo mi banner además del logo y el menú, tiene unos elementos de acceso rápido al lado del menú, a la hora de probar diferentes tamaños, no se logran posicionar con la distancia adecuada, y terminan sobreponiéndose, como podría hacer que el tamaño de letra y espaciado de elementos se ajuste dependiendo del tamaño?

Carmen Ansio

Profesor

Hace 3 años

Hola Carlos!

En ese caso deberías utilizar en conjunto contraints con Auto layout, en especial la nueva propiedad WRAP que permite que los elementos se acomoden automaticamente si no tienen suficiente espacio ☺️

Miguel Alejandro Camacho Sánchez

Hace 2 años

Puntos importantes de la clase:

Uso de auto layout:
- Asegurarse de aplicar auto layout para que los elementos se posicionen automáticamente en el frame desktop.
Ajuste de los componentes:
- Usar fill container en las opciones de layout para que los componentes como las cards y el footer se ajusten correctamente al contenedor.
Uso de plugins para adaptabilidad:
- El plugin Breakpoints es más preciso para probar la responsividad entre mobile, tablet y desktop.
- El plugin Responsive es gratuito pero menos preciso, aunque útil para pruebas rápidas.
Consideraciones para el diseño responsive:
- Es importante ver cómo los diseños cambian entre diferentes tamaños de pantalla, no solo para el diseño, sino también para ayudar a los desarrolladores a implementar correctamente las transiciones entre tamaños.
Pruebas y ajustes en Figma:
- Es útil probar cómo los elementos responden a cambios de tamaño usando ambos plugins.
- Incluso después del periodo de prueba de Breakpoints, los diseños que ya hayas montado seguirán funcionando.

Erika Diaz

Hace un año

En mi versión mobile no logro quitar ese espacio entre la barra de arriba y ese contenido, que estoy haciendo mal?:(

Clever David Cardenas Medina

Hace 5 meses

Hola, podrías seleccionar todo el frame principal(click Iphone 13 mini) y darle márgenes y espaciado vertical.

Paulo Esteban Orsini

Hace 2 años

Que costo tiene la licencia de Breakpoints? Sitio web de compra?

Jessica Alejandra Mogollon Lopez

Hace 3 años

Como hago esa versión mobile???

Gabriela Diaz Cubillos

Hace 2 años

Hola, quisiera saber como puedo en un nuevo file tener la libreria de todo lo que esta en este curso.

Diana Alexandra Rodríguez Rojas

Hace 2 años

Hola! tengo la duda de si ustedes están realizando su prototipado desde el formato de figma compartido por la profesora con los componentes y toda la libreria, o estan copiando y pegando los componentes en un diseño nuevo en figma? Es que, yo haciendolo desde el formato compartido se me da mas facil, pero haciendolo desde 0 porque quiero aprender, todo se mueve mucho y estoy teniendo fallas cuando copio y pego componentes. Soy una de las que escogió el curso sin saber nada de figma y vengo desde el basico jaja

Alexander Flores Rayme

Hace 2 años

Recursos

Diseñar una versión desktop responsive en Figma requiere algo más que ampliar un frame mobile: necesitas estructurar el layout con auto layout, apoyarte en componentes reutilizables y validar el comportamiento entre breakpoints con plugins especializados. Esta guía te muestra cómo armar la interfaz desktop a 1440 px y comprobar la fluidez entre tamaños usando Breakpoints y Responsively.

Cómo monto la versión desktop a 1440 píxeles en Figma

El punto de partida es crear un frame de 1440 px de ancho, el estándar para diseño desktop. A partir de ahí, vas trayendo los componentes que ya construiste en la versión mobile y los adaptas al nuevo contenedor.

Por qué necesito auto layout en el frame contenedor

Cuando arrastras la barra de navegación dentro del frame desktop, notarás que no se acomoda sola. La razón es simple: el frame central no tiene auto layout activado. En el momento en que lo aplicas, el header se posiciona automáticamente y el resto de elementos siguen el flujo vertical sin esfuerzo.

Después del header, el orden de inserción es:

Componente card, configurado con la opción huge container desde la sidebar derecha.
Grid de 12 columnas, recordando quitar la grid por defecto del componente para evitar conflictos.
Footer, que puedes localizar rápido escribiendo "footer" en el buscador de assets.

¿Para qué sirve auto layout en Figma? Es la propiedad que permite a un frame redimensionarse y reorganizar sus hijos automáticamente cuando agregas, quitas o cambias contenido. Sin él, los componentes responsive no se acomodan solos.

Qué plugin uso para probar breakpoints responsive en Figma

Una vez que tienes mobile y desktop diseñados, lo importante es ver cómo se comporta la interfaz al pasar de un tamaño a otro. Para eso existen dos plugins muy útiles, cada uno con sus ventajas.

Cómo funciona el plugin Breakpoints

Breakpoints es la opción más precisa, aunque tiene un periodo de prueba de dos semanas y luego requiere licencia de pago. Para usarlo necesitas registrarte la primera vez y tener listos los frames de los tamaños que quieres testear: mobile, tablet y desktop.

Al abrirlo, aparece una regla donde indicas qué frames asociar a cada tamaño. El plugin genera un componente con puntos de breakpoint que te permite arrastrar y ver cómo responde el diseño en cada resolución. Es información oro tanto para diseño como para perfiles de desarrollo, porque deja claro cómo debe transformarse la UI en la implementación.

¿Sigo pudiendo usar Breakpoints después del trial? Sí. Las reglas y componentes que ya creaste continúan funcionando cuando expira el periodo de prueba. Lo único que no podrás hacer es crear nuevas interfaces fluidas sin licencia.

Cómo configuro Responsively, el plugin gratuito

Responsively es la alternativa sin costo, aunque menos precisa. Tiene una particularidad clave: no entiende nombres semánticos como mobile o desktop. Necesita que renombres tus frames con valores numéricos que representen el tamaño mínimo de pantalla:

0 para la pantalla más pequeña (mobile).
600 para tablet.
1000 para desktop.

El flujo de uso es directo: seleccionas al menos dos frames sosteniendo shift para hacer selección múltiple, abres el plugin desde el panel de plugins y le das Run. Se genera un componente Responsive donde puedes deslizar para ver el comportamiento.

El detalle a tener en cuenta es que cuando excedes el tamaño esperado, Responsively duplica elementos a la derecha de forma inesperada. Por eso, si tu proyecto lo permite, Breakpoints sigue siendo la mejor opción porque también ajusta la altura, no solo el ancho.

Por qué validar breakpoints mejora la entrega a desarrollo

Probar la fluidez entre mobile, tablet y desktop no es un capricho de diseño. Es la diferencia entre entregar una interfaz que el equipo de desarrollo puede implementar sin dudas y una que genera reuniones interminables sobre cómo debería comportarse en cada resolución.

Cuando un developer ve la regla de breakpoints con los puntos visuales, entiende exactamente cómo debe transicionar el layout. Eso reduce errores de implementación y decisiones improvisadas que terminan rompiendo la consistencia visual.

Un buen ejercicio para reforzar lo aprendido es probar Breakpoints sobre interfaces existentes, como por ejemplo Pinterest, para observar cómo un producto real maneja sus transiciones entre tamaños. Verás que el plugin ofrece muchísima información sobre cómo se reorganizan grids, tipografías y componentes a medida que cambia el viewport.

Con esto ya tienes las habilidades para diseñar una página web responsive en Figma de principio a fin. ¿Cuál de los dos plugins vas a probar primero en tu próximo proyecto? Cuéntame en los comentarios cómo te fue con la transición entre breakpoints.

Resumen

Cómo monto la versión desktop a 1440 píxeles en Figma

Por qué necesito auto layout en el frame contenedor

Después del header, el orden de inserción es:

Componente card, configurado con la opción huge container desde la sidebar derecha.
Grid de 12 columnas, recordando quitar la grid por defecto del componente para evitar conflictos.
Footer, que puedes localizar rápido escribiendo "footer" en el buscador de assets.

¿Para qué sirve auto layout en Figma? Es la propiedad que permite a un frame redimensionarse y reorganizar sus hijos automáticamente cuando agregas, quitas o cambias contenido. Sin él, los componentes responsive no se acomodan solos.

Qué plugin uso para probar breakpoints responsive en Figma

Una vez que tienes mobile y desktop diseñados, lo importante es ver cómo se comporta la interfaz al pasar de un tamaño a otro. Para eso existen dos plugins muy útiles, cada uno con sus ventajas.

Cómo funciona el plugin Breakpoints

¿Sigo pudiendo usar Breakpoints después del trial? Sí. Las reglas y componentes que ya creaste continúan funcionando cuando expira el periodo de prueba. Lo único que no podrás hacer es crear nuevas interfaces fluidas sin licencia.

Cómo configuro Responsively, el plugin gratuito

0 para la pantalla más pequeña (mobile).
600 para tablet.
1000 para desktop.

Por qué validar breakpoints mejora la entrega a desarrollo

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Breakpoints y Responsively para probar diseño responsive