Restricciones en Figma: Diseño Responsivo Simplificado

Restricciones definen cómo las capas responden cuando se redimensionan sus marcos principales, permitiendo diseños responsivos para diferentes tamaños de pantalla y dispositivos. Los objetos dentro de un marco se denominan objetos hijos, mientras que el propio marco es el marco principal.

Las restricciones tienen configuraciones horizontales (eje x) y verticales (eje y). Por defecto, los objetos están restringidos a los bordes superior e izquierdo de su marco principal.

Restricciones horizontales

• Izquierda: mantiene el objeto posicionado en relación con el lado izquierdo;
• Derecha: posicionado en relación con el lado derecho;
• Izquierda + Derecha: el tamaño del objeto se ajusta con el marco a lo largo del eje x;
• Centrar: mantiene el objeto centrado horizontalmente;
• Escalar: ajusta el tamaño y la posición del objeto proporcionalmente al marco.

Restricciones verticales

• Superior: posicionado en relación con el borde superior;
• Inferior: posicionado en relación con el borde inferior;
• Superior + Inferior: el tamaño del objeto se ajusta con el marco a lo largo del eje y;
• Centrar: mantiene el objeto centrado verticalmente;
• Escalar: similar al escalado horizontal pero para el eje y.

Las restricciones también se pueden establecer visualmente usando el cuadro de restricciones en el panel de diseño.

Uso de restricciones para diseño responsivo

• Alinear objetos (por ejemplo, texto, botones, imágenes) con cuadrículas de diseño para una posición precisa;
• Ajustar las restricciones de cada objeto según cómo debe comportarse cuando se redimensiona el marco;
• Asegurar que los grupos u objetos enmascarados se comporten como se espera anidándolos en marcos y volviendo a aplicar las restricciones. El atajo es CTRL + ALT + G (Windows), o Command + Option + G (Mac);
• Probar la capacidad de respuesta redimensionando el marco principal para asegurar que no haya distorsión o desalineación.