En la quinta clase del curso de iniciación a Figma, vamos a aprender a seleccionar capas, cómo organizarlas y qué propiedades podemos editar.
La selección en Figma no es un tema baladí, ya que Figma nos ofrece varias opciones muy interesantes para seleccionar capas. Podemos seleccionar una o varias capas haciendo clic en ellas, tanto encima de la propia capa como en el panel de capas.
Usando las teclas Shift y CMD (en Mac) y CTRL (en Windows), podemos hacer selecciones aisladas o contiguas. Al contrario, también podemos deseleccionar capas. También podemos seleccionar todas las capas con CMD + A en Mac (o CTRL + A en Windows).
En este vídeo, además, damos un repaso a todas las propiedades que podemos editar en las capas en Figma: posición, dimensiones, rotación, esquinas redondeadas, modos de fusión de la capa, relleno, trazo, efectos y opciones de exportación.
En este vídeo, además, damos un repaso a todas las propiedades que podemos editar en las capas en Figma: posición, dimensiones, rotación, esquinas redondeadas, modos de fusión de la capa, relleno, trazo, efectos y opciones de exportación. ¡Vamos a verlo!
¡Ya lo veis! Figma nos ofrece muchas opciones para seleccionar, organizar y editar las propiedades de nuestras capas. Y muy cómodo cómo podemos alinear y distribuir las capas y modificar el espacio equidistante entre ellas.
La magia de la selección inteligente (Smart Selection) nos va a ahorrar un montón de tiempo organizando capas en nuestro diseño, es genial. Además podemos ordenar las capas (cambiar el z-index) arrastrando las capas desde el panel de capas o haciendo clic con el botón derecho después de seleccionar la capa que queramos ordenar y seleccionando Bring Forward, Bring to Front, Send Backward o Send to Back. También tenemos atajos de teclado para ordenar más rápido.
Y fijémonos que tenemos tres formas para renombrar las capas, que es algo que debemos hacer siempre que estemos creando nuestros diseños, para tenerlas mejor organizadas.
Para que aprendamos bien cómo funcionan todas estas opciones, no hay nada como hacer unos prácticos ejercicios. Os propongo las siguientes tareas:
- Cread varias capas con distintas formas utilizando las herramientas de creación de capas. Distribuidlas por el canvas de manera aleatoria, procurando que los espacios entre ellas no sean equidistantes y que algunas se pisen entre ellas. Ahora, alinead y distribuid las capas con todas las opciones, hasta entender cómo funciona la opción de alinear y distribuir.
- Seleccionad algunas de las capas de la tarea anterior y cambia su orden, arrastrando las capas desde el panel de capas, para que las que creaste después queden por debajo de las que creaste primero.
- Cambiad el nombre de las capas haciendo clic sobre ellas en el panel de capas.
- Cambiad la posición en el eje X de alguna capa, desde el panel de propiedades y utilizando las flechas del teclado.
- Añadid sombra paralela (Drop Shadow) a una de las capas.
¡Estupendo! Habéis aprendido un montón sobre las capas en Figma. Si tenéis alguna duda o sugerencia, ya sabéis que estoy disponible en el formulario de la intranet. ¡Muchas gracias!
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