Constraints en Figma para 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:003:40

Constraints en Figma para diseño responsive

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

Clase 5 de 29

Clase 5 / 29

Recursos

Si quieres que tus diseños en Figma se adapten al tamaño de su contenedor, las constraints son la herramienta que necesitas dominar. Te permiten controlar cómo se comporta cada elemento cuando el frame crece o decrece, simulando el efecto responsive que vemos en distintas pantallas.

¿Qué son las constraints en Figma y para qué sirven?

Las constraints son reglas que le indican a un elemento dónde debe quedarse o cómo debe estirarse cuando su contenedor cambia de tamaño. Piensa en ellas como anclas: tú decides si un objeto se pega a la izquierda, a la derecha, al centro, arriba, abajo o si se estira con el frame.

¿Qué son las constraints en Figma? Son reglas de posicionamiento que definen cómo se comporta un elemento dentro de su contenedor cuando este cambia de tamaño, permitiendo crear diseños responsive [01:30].

En el panel derecho de Figma, al seleccionar un elemento, aparece el control visual de constraints. Ese pequeño diagrama te ayuda muchísimo a entender qué pasará al redimensionar el frame.

¿Cómo se aplican constraints a diferentes formas?

Imagina un frame con cuatro elementos: un círculo, un triángulo, un cuadrado y una línea. A cada uno le puedes asignar un comportamiento distinto [00:55]:

Círculo con constraint left top: se queda anclado en la esquina superior izquierda y no se mueve.
Línea con constraint left and right: se estira horizontalmente, creciendo o decreciendo con el contenedor.
Triángulo con constraint left bottom: permanece en la esquina inferior izquierda.
Cuadrado con constraint right bottom: se queda fijo en la esquina inferior derecha.

Cuando agarras el frame y lo haces más ancho o más alto, cada forma reacciona según la regla que le diste. Esa es la magia: control total sobre el comportamiento de cada pieza.

¿Por qué combinar constraints con grids para layouts responsive?

Aquí viene lo interesante. Cuando aplicas una grid a un frame, las constraints dejan de tomar el contenedor como referencia y pasan a basarse en la rejilla.

Pongamos un ejemplo práctico con un submenú en mobile [02:30]. Si le indicas que se comporte center center, los elementos no se anclarán al centro del frame completo, sino al centro de la grid que aplicaste sobre ese frame. Esto te da una precisión enorme para construir interfaces que respondan bien a múltiples tamaños de pantalla.

¿Cómo funcionan las constraints con grids? Cuando un elemento tiene una grid aplicada, las constraints toman como referencia esa rejilla y no el contenedor, lo que permite alineaciones más precisas en diseños responsive [02:45].

¿Se pueden usar constraints y auto layout al mismo tiempo?

No de forma directa. Figma no permite combinar auto layout con constraints sobre el mismo elemento [00:40]. Es una limitación importante a tener presente cuando planeas tu estructura. Más adelante, al montar el layout principal de la página, verás cómo resolver esta restricción combinando ambos sistemas en distintos niveles de la jerarquía.

¿Cómo construir interfaces complejas con rejillas anidadas?

Una técnica potente es usar rejillas dentro de rejillas. No te limitas a una grid horizontal en el frame principal, sino que aplicas grids adicionales dentro de componentes internos.

Esto permite que tanto las imágenes como el contenido textual se reorganicen de forma fluida cuando cambias el ancho del layout. Es lo que hace posible construir interfaces que se sientan nativas en mobile, tablet y desktop sin tener que rediseñar desde cero.

Algunas claves para sacarle provecho:

Define primero la grid del contenedor principal.
Aplica grids secundarias en los componentes internos que necesiten su propia lógica.
Asigna constraints específicas a cada elemento según el comportamiento esperado.
Prueba el resize moviendo los bordes del frame para validar el resultado.

Con estas dos herramientas, grids y constraints, ya tienes lo necesario para empezar a montar el layout principal de tu página. El siguiente paso será construir el componente inicial: la barra de navegación.

¿Has probado a combinar rejillas anidadas con constraints en tus propios proyectos? Cuéntame en los comentarios qué efecto responsive te gustaría replicar.

Jhon Sanchez

Hace 2 años

Los constraints en Figma son una herramienta fundamental para crear diseños responsivos y adaptables a diferentes tamaños de pantalla. En esencia, los constraints te permiten controlar cómo se redimensionan los elementos de tu diseño cuando el frame contenedor cambia de tamaño. Imagina que tienes un botón dentro de un frame. Sin constraints, al cambiar el tamaño del frame, el botón podría estirarse, encogerse de forma desproporcionada o incluso desaparecer. Los constraints evitan esto.

Aquí te explico los puntos clave sobre los constraints en Figma:

¿Qué hacen los constraints?

Definen el comportamiento de redimensionado: Los constraints le dicen a Figma cómo debe comportarse un elemento (capa) dentro de su contenedor (frame) cuando este último se redimensiona. Esto incluye si el elemento debe mantener su tamaño, estirarse, moverse o permanecer fijo en una posición relativa.
Crean diseños responsivos: Al usar constraints correctamente, puedes asegurarte de que tus diseños se vean bien en diferentes dispositivos y tamaños de pantalla. Los elementos se ajustarán automáticamente al nuevo tamaño del frame, manteniendo la proporción y la estructura del diseño.
Ahorran tiempo y esfuerzo: En lugar de tener que ajustar manualmente la posición y el tamaño de cada elemento cada vez que cambias el tamaño de un frame, los constraints lo hacen automáticamente por ti.

Tipos de constraints:

Figma ofrece diferentes opciones de constraints tanto horizontales como verticales:

Horizontales:
- Left (Izquierda): El elemento se mantiene pegado al borde izquierdo del frame.
- Right (Derecha): El elemento se mantiene pegado al borde derecho del frame.
- Left & Right (Izquierda y Derecha): El elemento se estira o se encoge horizontalmente para llenar el espacio entre los bordes izquierdo y derecho del frame.
- Center (Centro): El elemento se mantiene centrado horizontalmente dentro del frame.
- Scale (Escala): El elemento se escala proporcionalmente al cambiar el tamaño del frame.
Verticales:
- Top (Arriba): El elemento se mantiene pegado al borde superior del frame.
- Bottom (Abajo): El elemento se mantiene pegado al borde inferior del frame.
- Top & Bottom (Arriba y Abajo): El elemento se estira o se encoge verticalmente para llenar el espacio entre los bordes superior e inferior del frame.
- Center (Centro): El elemento se mantiene centrado verticalmente dentro del frame.
- Scale (Escala): El elemento se escala proporcionalmente al cambiar el tamaño del frame.

Cómo usar los constraints en Figma:

Selecciona la capa: Elige el elemento al que quieres aplicar constraints.
Panel de diseño: En el panel de diseño (a la derecha de la pantalla), busca la sección "Constraints".
Elige los constraints: Selecciona las opciones de constraints horizontales y verticales que desees. Puedes combinarlas para lograr diferentes efectos. Por ejemplo, "Left" horizontal y "Top" vertical mantendrá el elemento fijo en la esquina superior izquierda. "Left & Right" horizontal y "Top" vertical hará que el elemento se estire horizontalmente pero se mantenga pegado a la parte superior.
Prueba los constraints: Cambia el tamaño del frame contenedor para ver cómo se comporta el elemento con los constraints aplicados.

Consejos importantes:

Piensa en la estructura de tu diseño: Antes de aplicar constraints, planifica cómo quieres que se comporten los elementos en diferentes tamaños de pantalla.
Usa constraints en conjunto con Auto Layout: Auto Layout y constraints son una combinación poderosa para crear diseños responsivos y flexibles. Auto Layout controla la disposición de los elementos, mientras que los constraints definen cómo se redimensionan.
Experimenta: La mejor manera de entender los constraints es experimentar con ellos. Prueba diferentes combinaciones para ver cómo afectan al comportamiento de tus elementos.

En resumen, los constraints son una herramienta esencial en Figma para crear diseños responsivos y adaptables. Dominarlos te permitirá crear interfaces de usuario que se vean bien y funcionen correctamente en cualquier dispositivo.

Comentarios (14)14 comentarios

Roberto Patrón

Hace 3 años

Estaría bueno que se compartiera en recursos ese archivo de Figma que explica los comportamientos de los constrains y también de la misma manera el del grid

Carmen Ansio

Profesor

Hola Roberto, y mil gracias Daniel por compartir la información!

El archivo está adjunto en la primera clase para que podáis trabajar sobre los mismos ejemplos del curso 😊

Luis Gonzalez

Las opciones de Constraints se usan generalmente en Figma para determinar la posición que tendrá un objeto a medida que cambia el tamaño del frame al que pertenece.

Cuando hablamos de Auto Layout, las constraints determinan, además de esto, de qué forma "crecerá" el componente o frame a medida que cambie su contenido.

Victor Manuel Pedreros

Hola buenas noches,

Tengo una inquietud, cuando mencionas que nos dejas el material que se ve en pantalla es en donde, es que en el link de la primera clase solo he podido acceder a la portada en figma, no puedo entrar a nada mas, cómo se puede acceder a todo el material?

Gracias por la ayuda.

Hola Victor!

Puedes cambiar de página por el panel de la izquierda seleccionando otra página

Puedes intentarlo y me cuentas si necesitas ayuda ☺️

Enrique Isasi

Impresionante el uso de constraints es super poderoso

Miguel Alejandro Camacho Sánchez

Puntos importantes de la clase:

Constraints en Figma:
- Los constraints permiten definir cómo un elemento se comporta dentro de su contenedor (crece, decrece, mantiene su posición).
- Se configuran desde el panel de la derecha y permiten comportamientos como Left Top, Center Center, entre otros.
- Los constraints son fundamentales para que los elementos se adapten de manera fluida en un diseño responsive.
Limitaciones:
- Figma no permite usar Auto Layout junto con constraints en el mismo layout principal. Debes elegir qué herramienta usar según el caso.
Ejemplos de constraints:
- Left Top: El elemento se mantiene en la esquina superior izquierda del contenedor.
- Center Center: El elemento se mantiene centrado tanto vertical como horizontalmente, y puede crecer o reducirse de manera proporcional.
- Left Bottom: El elemento se mantiene en la esquina inferior izquierda del contenedor.
Grids y Constraints:
- Al combinar grids con constraints, puedes controlar cómo los elementos cambian de tamaño y posición según el diseño responsive.
- Un elemento configurado para estar centrado con Center Center se alineará no solo en el contenedor, sino en el centro de la grid asignada.
Rejillas anidadas:
- Puedes usar rejillas dentro de otras rejillas para crear layouts más complejos y adaptativos.
- Esto es especialmente útil en layouts responsive que necesitan mantener coherencia y flexibilidad en diferentes dispositivos.
Responsive Layout:
- La combinación de grids, constraints y rejillas anidadas permite crear layouts que se ajusten perfectamente a diferentes tamaños de pantalla, lo que es crucial en diseño web moderno.
Práctica:

Se recomienda jugar con los ejemplos proporcionados en Figma para entender mejor cómo los constraints afectan el comportamiento de los elementos al cambiar el tamaño del contenedor.

Clever David Cardenas Medina

Hace 5 meses

Que mal que no este el material del figma.

William Henry Luis Sánchez

Hace un año

interesante, lástima que no está el .material para probar

Melissa Ortíz

Hola, podrías por favor subir el link de tu archivo de Figma, gracias! :)

Hola!! Aquí tienes el enlace al archivo

Carolina Gómez

Resumen - Uso de Constraints en Figma para diseños responsivos

En esta clase aprendimos a usar constraints (restricciones) en Figma para que los elementos se adapten automáticamente a su contenedor cuando cambiamos su tamaño, logrando así un diseño responsive.

Las constraints permiten que los elementos se mantengan en su posición relativa (por ejemplo: izquierda, centro, derecha, arriba, abajo) cuando el marco cambia de tamaño.
Estas configuraciones se aplican individualmente por elemento, no a todo el proyecto. Es decir, cada selección define cómo ese objeto se comportará.
Un ejemplo: si un elemento está alineado al centro dentro de una rejilla, al agrandar o reducir el tamaño del contenedor, ese elemento se mantendrá centrado dentro de su área asignada.
Esto es muy útil para construir layouts flexibles y escalables, especialmente cuando trabajamos con grids o componentes repetidos como en un sitio web.

Finalmente, se iniciará la construcción de un componente clave: la barra de navegación, aplicando estas técnicas para que también sea responsiva.

Victoria Aldana Maldonado Pastén

La verdad que tuve que ver otro video para ver como es que configuro que el cuadrado es el contenedor de los elementos. No me quedo claro con la clase

25Watts

como puedes ver no me aparece la pagina

No veo esta pagina adentro del recurso que compartio del figma

Talent Support

Responsive y fluid son 2 conceptos distintos.

Responsive redistribuye todo el diseño.

Y fluid se ensancha horizontalmente.

Estaria bueno que hagan mencion de la diferencia para no generar confusiones.

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

Constraints en Figma para diseño responsive