7 trucos y atajos de Figma que me gustaría haber conocido antes

Escrito por Cris Busquets. Publicado en Diseño UI

7 trucos y atajos de Figma que debes conocer

Figma se lanzó en 2016 y, desde entonces y según su blog, lanzan una media de dos a diez actualizaciones al mes.

Esto hace que sea muy fácil perder el hilo o perderse alguna actualización que incluya algún truco o atajo que permita diseñar mejor o más rápido.

Estos son los trucos de Figma con los que me he cruzado durante los últimos meses. Iré actualizando el artículo a medida que encuentre más 🚀

7 trucos y atajos de Figma

Te dejo con el índice para que consultes directamente lo que te interesa:

Inserta varias imágenes a la vez

Si estás creando una galería de fotos con cards o algún componente similar, es fácil que necesites insertar varias imágenes a la vez en el archivo de Figma.

Para ello:

  1. Selecciona todas las capas donde necesites incluir una imagen
  2. CMD + Shift + K (Mac) o Control + Shift + K (Windows)
  3. En la ventana que se abre, selecciona todas las imágenes. Es preferible que ya las tengas todas juntas en una sola carpeta
  4. Ve haciendo clic donde quieras que aparezcan. Recuerda que aparecerán en el mismo orden en el que estaban en la carpeta, así que nómbralas bien.

 

Renombra capas rápidamente

Si llevas un rato diseñando es posible que hayas dejado de preocuparte por el nombre de las capas y empieces a tener muchos Rectángulo 5 y otros nombres similares. Así es como puedes renombrar rápido las capas en Figma:

  1. Selecciona los elementos que quieres renombrar
  2. CMD + R (Mac) o Control + R (Windows)
  3. Decide cómo quieres que sea el nuevo nombre. Puedes mantener el original, remplazar una parte o reemplazarlo todo.
    • También podrás incluir números, que podrán estar en orden ascendente o descendente

 

Arrastra elementos sin sacarlos del frame

Esto siempre me lleva por la calle de la amargura. Hay ocasiones en las que quiero mover algún elemento del frame hacia un lado, de manera que se vea muy poquito (en un carrusel, por ejemplo).

Si lo hago arrastrándolo con el cursor, inevitablemente se sale del frame. Esta es la manera correcta de hacerlo:

  1. Selecciona la capa, los grupos o los elementos que quieras mover
  2. Mantén apretado Espacio en el teclado mientras lo arrastras
  3. Suéltalo donde quieras

 

Domina los tres tipos de zoom

Hay momentos en los que necesito hacer zoom en un frame concreto y otros en los que necesito alejarme lo máximo posible para poder tener una visión general de qué estoy diseñando.

Puedes hacer zoom en Figma de forma muy rápida con solo dos teclas:

  • 0 cambia el zoom al 100%
  • 1 te muestra todo lo que hay en el canvas
  • 2 hace zoom sobre lo que sea que tengas seleccionado

 

Atajos de teclado para alinear

La mayor parte del tiempo nos la pasamos alineado elementos unos con otros: horizontalmente, hacia la derecha, hacia abajo… la forma tradicional es utilizando los iconos que hay en la parte superior derecha, pero lo cierto es que con el teclado lo harás más rápido:

  1. Option + A o D = alinear hacia la izquierda o hacia la derecha
  2. Option + V o H = alinear vertical u horizontalmente
  3. Option + W o S = alinear hacia arriba o hacia abajo

PD: Si estás usando Windows, la tecla es Alt

 

Personaliza el “nudge” en Figma

Si diseñas utilizando una retícula de 8pt es muy posible que el nudge que viene por defecto en Figma no te encaje: el pequeño se desplaza 1pt y el grande, 10.

Para cambiar el nudge en Figma solo tienes que acceder a las preferencias: Figma > Preferencias > Cantidad de desplazamiento (nudge amount en inglés).

 

Escala elementos con Figma

Muchas veces, al redimensionar un elemento acabamos por deformarlo: aunque las proporciones sean las mismas, la escala de los elementos tipográficos y de algunos iconos no cambia como esperamos.

La mejor manera de escalar es… sí, lo has acertado: usando la herramienta de escalar 😌

Solo tienes que pulsar la letra K en el teclado o seleccionar la opción en la barra de herramientas que tiene un cuadrado con una flecha diagonal en su esquina superior derecha.

Conclusiones

Puede ser que te cueste crear el hábito y acostumbrarte a utilizar estos trucos y atajos de Figma, pero una vez los comiences a integrar verás cómo tu trabajo va volviéndose un poco más eficiente.

Para que puedas practicarlo, te dejo en este archivo de Figma un ejemplo de cada uno para que lo pruebes. Simplemente, copia el archivo en tus borradores de Figma y sigue los pasos 🙌



Esto también te interesa 👇

Buenas prácticas UX: Selectores de idioma, ubicación y moneda

Cómo diseñar un selector de idioma, ubicación y moneda: ejemplos y buenas prácticas

Qué es Crazy 8's y cómo generar ideas

Guía completa de Crazy 8’s: qué es y cómo hacer el ejercicio

Documenta tu progreso y crece en tu carrera

Por qué debes tener un sistema para documentar tu progreso (y cómo hacerlo)


Deja tu opinión

  1. Dexter

    Muy útil! Gracias por compartir, Cris.

  2. María

    Yujuuuuuuuuu!!! Maravilla lo de mover pulsando espacio para que no se salga de Frame!!!! Me habéis ahorrado millones de clicks a las flechitas :). GRACIAS!

Deja tu comentario

Tu email no será publicado. Los campos con asterisco son obligatorios.