7 trucos y atajos de Figma que me gustaría haber conocido antes
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:
- Selecciona todas las capas donde necesites incluir una imagen
- CMD + Shift + K (Mac) o Control + Shift + K (Windows)
- En la ventana que se abre, selecciona todas las imágenes. Es preferible que ya las tengas todas juntas en una sola carpeta
- 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:
- Selecciona los elementos que quieres renombrar
- CMD + R (Mac) o Control + R (Windows)
- 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:
- Selecciona la capa, los grupos o los elementos que quieras mover
- Mantén apretado Espacio en el teclado mientras lo arrastras
- 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:
- Option + A o D = alinear hacia la izquierda o hacia la derecha
- Option + V o H = alinear vertical u horizontalmente
- 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 🙌