En la sexta clase del curso de iniciación a Figma, vamos a aprender cómo funciona el diseño automático (Auto Layout), las restricciones (Constraints) y las rejillas (Layout Grids).
Añadir Auto Layout a nuestras capas va a hacer que el diseño se adapte automáticamente al contenido, ¡parece magia! Antes de aprender cómo añadir Auto Layout, vais a ver lo complicado que sería crear un simple botón manteniendo un diseño coherente si no tuviéramos Auto Layout.
Pero, por suerte, ¡sí tenemos! Con Auto Layout es muy sencillo mantener los mismos espacios entre capas, y el mismo padding en las diferentes capas de un diseño. Esto es fundamental para que nuestro diseño sea coherente y armónico. ¡Vamos a verlo!
Ya habéis visto cómo nos facilitan la vida estas tres herramientas. Los Constraints nos van a permitir definir cómo queremos que se comporte la distancia de las capas a los márgenes del frame cuando redimensionamos un frame. Nos viene de perlas para nuestros diseños responsive. Y con los Layout Grid pueden ser de tipo Grid, Columna y Rejilla, y nos van a ser muy útiles a la hora de diseñar.
Ahora os toca ponerlo en práctica en vuestro Figma. Como ejercicios para practicar lo que hemos visto en este tema, os propongo lo siguiente:
- Cread el texto «Descargar». Añade Auto Layout con Shift + A para crear un botón. Cambiadle el color de fondo y redondea las esquinas. Seleccionad el frame del botón y añadid Auto Layout. Seleccionad el frame del botón y duplica ese botón con CMD + D (en Mac) o CTRL + D (en Windows). Desde las opciones del panel de la derecha, Auto Layout, colocad los dos botones en horizontal. Cambiad el texto de uno de los botones para comprobar que el padding sigue siendo el mismo. Reducid el espacio entre los dos botones a 8 píxeles.
- Cread un frame. Dentro de ese frame, cread una estrella (Star) que esté restringida (Constraints) a 24 píxeles de distancia de la parte superior del frame (Top) y a 18 píxeles de la parte derecha (Right). Redimensionad el frame y, para comprobar que la estrella se mantiene restringida a esa distancia, averiguad las distancias seleccionando la capa de la estrella y, pulsando la tecla Alt, situando el cursor encima del frame, sin hacer clic.
- Cread un frame y añádele una rejilla de 12 columnas (Column), de tipo (Type) Stretch, con 8 píxeles de margen (Margin) y 8 píxeles de espacio entre columnas (Gutter).
¡Ya lo veis! Figma nos facilita muchísimo la vida a la hora de crear buenos diseños: con consistencia y responsive.
Si tenéis cualquier duda, podéis dejar un mensaje en el formulario de la intranet. Muchas gracias y nos vemos en el siguiente tema. ¡Un abrazo y disfrutad mucho de los diseños automáticos!
Todos los capítulos de este curso:
- Curso Figma #1. Introducción
- Curso Figma #2. Entorno de trabajo
- Curso Figma #3. Formas y herramientas
- Curso Figma #4. Textos e imágenes
- Curso Figma #5. Capas
- Curso Figma #6. Auto Layout, Constraints y Layout Grids
- Curso Figma #7. Componentes y estilos
- Curso Figma #8. Prototipado y exportar
- Curso Figma #9. Team Library
- Curso Figma #10. La comunidad de Figma