5 formas esenciales de usar restricciones de diseño

¿Recuerdas la buena época del diseño tecnológico, cuando tenías que crear interfaces, como máximo, para una PC y una Mac? Yo tampoco. Ese universo parece estar a años luz en el mundo adicto a la pantalla de hoy.

Los trabajos de los diseñadores se han vuelto exponencialmente más difíciles con la introducción de teléfonos móviles y tabletas. Estás diseñando para infinitas adaptaciones y contextos, una tarea sisifana interminable.

Sentimos su dolor en Figma, por eso creamos nuestra herramienta con una poderosa función de restricciones. Le permite fijar elementos de su diseño a diferentes lados de su marco principal. Si establece sus restricciones correctamente, su diseño se escalará para adaptarse a cualquier tamaño de pantalla.

Puede encontrarlos aquí, en el panel de propiedades de la derecha cuando selecciona un marco:

Diferentes opciones de restricción

Las restricciones son increíbles, pero requieren un poco de tiempo acostumbrarse. En Figma, le permitimos arreglar objetos a la izquierda, derecha, arriba, abajo, centro, escala, izquierda y derecha, o arriba y abajo. Puede jugar con un simple botón en un marco para ver cómo reaccionan los objetos a los diferentes tipos de restricciones.

Cómo reacciona un botón con diferentes restricciones cuando se cambia el tamaño de un marco

¿Necesita ayuda para descubrir cómo ponerlos en práctica? Recopilamos cinco formas en que las restricciones pueden hacer que su vida sea mucho más fácil, desde el nivel principiante hasta el intermedio.

1) Fijar un botón en la esquina

Muchas IU móviles tienen botones de acción situados en el mismo lugar cada vez. Por ejemplo, las Directrices de diseño de materiales de Google favorecen un botón inferior derecho (también conocido como FAB) que alienta al usuario a tomar medidas.

Con restricciones, puede establecer ese botón en la esquina inferior y derecha de su marco principal. Eso garantiza que el botón no flote alrededor de la pantalla cuando el tamaño de la pantalla se expande: permanece exactamente donde lo desea.

2) La magia de los componentes + restricciones

Puedes hacer un poco de magia de diseño divertido usando la función de componentes de Figma en relación con las cuadrículas. Los componentes (que otras aplicaciones llaman símbolos) le permiten convertir partes de su diseño en instancias repetidas y duplicadas. Cuando realiza cambios en el original, los cambios se reflejan en cualquier otro lugar donde utilizó ese componente. (Puede leer más sobre los componentes aquí).

Ahora, para agregar restricciones a esto: una vez que haya restringido las partes clave de su diseño a los lados del marco, convierta el marco en un componente. Duplique el marco para múltiples tamaños de pantalla. Ahora, cuando cambia los atributos del original, como el color o el tamaño del texto, puede verlos reflejados inmediatamente en diferentes tamaños de pantalla.

3) La magia de las restricciones + rejillas

Muy bien, abróchate el cinturón porque estamos avanzando un poco más. Con Figma, puede usar restricciones para ajustar objetos a una cuadrícula. Esto es particularmente útil para algo como una barra de navegación en la parte inferior de una aplicación.

Para crear una barra de navegación flexible en Figma, cree el marco que sirve como pantalla del teléfono y luego anide el marco de la barra de navegación en la parte inferior de la pantalla.

Establezca las restricciones de la barra de navegación a izquierda y derecha, y abajo. Con ese marco de barra de navegación aún seleccionado, elija una cuadrícula de diseño en el panel de propiedades de la derecha y establezca el tipo en "estirar".

Luego, coloque un objeto, como un botón circular, dentro de cada columna de la cuadrícula. Establezca las restricciones en cada botón para centrarse. Cuando el tamaño de la pantalla cambia, sus botones se adaptarán en consecuencia. Para una inmersión aún más profunda en las cuadrículas, mira esta publicación.

4) celdas de tabla

Puede usar restricciones para hacer diseños de celdas de tabla reutilizables que sean flexibles. Los diseñadores a menudo necesitan celdas de tabla para presentar listas de personas o información, y agregar restricciones a la celda básica facilita la adaptación. Por ejemplo, agrupé texto y un avatar juntos (presionando el control g), y lo limité al centro a la izquierda del marco. Luego agrupé el texto y un rectángulo con esquinas redondeadas juntas en un botón y lo limité al centro a la derecha del marco.

Como puede ver, el componente ahora reacciona como espera que lo haga, con cada información que abraza el lado del marco al que pertenece, independientemente del tamaño del marco.

5) ilustraciones divertidas

Por último, pensamos que incluiríamos un ejemplo divertido de restricciones solo por diversión. Puede poner restricciones horizontales o verticales en ilustraciones o dibujos para agregar un poco de humor extra. Puede convertir un hot dog en una versión elegante de sí mismo, o convertir un perro que parece un hot dog en más de uno. Jugamos con él para uno de los cumpleaños más recientes de nuestro diseñador en Figma.

Muchas gracias a Chris Hamamoto, Johan Prag y Rasmus Andersson por su ayuda e ilustraciones para esta publicación.