12 trucos y atajos de Figma para diseñar más rápido

Llevo muchos años usando Figma a diario, primero como diseñadora y ahora como Head of Design en Automattic. En todo este tiempo he ido acumulando trucos que me hacen diseñar más rápido.

Sé que algunos te parecerán obvios, pero estoy convencida de que otros te van a cambiar la vida (o al menos te ahorrarán muchos clics).

El motivo principal para «ir más rápido» es que cada minuto que te ahorras con estos atajos es un minuto que puedes dedicar a lo que importa… que es la propuesta de diseño 😁

Si tienes prisa, te dejo con un cheatsheet rápido:

Acción	Mac	Windows
Zoom 100%	0	0
Ver todo el canvas	1	1
Zoom a selección	2	2
Alinear a izquierda/derecha	⌥ + A / ⌥ + D	Alt + A / Alt + D
Alinear arriba/abajo	⌥ + W / ⌥ + S	Alt + W / Alt + S
Centrar vertical/horizontal	⌥ + V / ⌥ + H	Alt + V / Alt + H
Renombrar capas	⌘ + R	Ctrl + R
Insertar imágenes	⌘ + ⇧ + K	Ctrl + Shift + K
Escalar (sin deformar)	K	K
Auto Layout	⇧ + A	Shift + A
Panel de atajos	Ctrl + ⇧ + ?	Ctrl + Shift + ?

1. Atajos de teclado imprescindibles
2. Trucos para trabajar más rápido
3. Trucos para no romper tu diseño
4. Navegación y organización
5. Bonus: edición múltiple
6. Apuntes finales, y más sobre Figma

Atajos de teclado imprescindibles en Figma

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 para tener una visión general. Estos tres atajos cubren el 90% de los casos:

• 0 en el teclado te colocará el zoom al 100% (tamaño real)
• Si aprietas 1 en el teclado verás todo lo que hay en el canvas
• Apretando 2 harás zoom en el elemento que tengas seleccionado
• + o – en el teclado te multiplicará o dividirá x2 el zoom. Si estás al 100% y vas apretando la tecla +, irá haciendo 100%, 200%, 400%, 800%. Y al revés con –.

Por último, y ya de forma más concreta: si quieres hacer zoom en un elemento en concreto, tienes dos opciones:

• Doble clic en el icono de la lista de capas
• Un solo clic y Shift + 2

Atajos para alinear elementos

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 Option + D → Alinear izquierda o derecha
2. Option + W o Option + S → Alinear arriba o abajo
3. Option + V o Option + H → Centrar vertical u horizontalmente

PD: En Windows, usa Alt en lugar de Option

Truco adicional: Si seleccionas una capa y pulsas Option mientras mueves el cursor, Figma te mostrará la distancia exacta respecto a cualquier otro elemento. Muy útil para alinear con precisión.

Atajos de herramientas básicas

Estos son los que más uso en mi día a día:

• V → Herramienta de selección (Vector)
• R → Rectángulo
• O → Óvalo
• T → Texto
• K → Escalar
• Shift + A → Auto Layout

¿No recuerdas un atajo? Haz clic en el icono del interrogante (abajo a la derecha) y selecciona «Keyboard Shortcuts». O usa Ctrl + Shift + ?.

No intentes aprenderlos todos a la vez. Fíjate en qué acciones repites más y ve memorizando esas combinaciones poco a poco.

Trucos para trabajar más rápido

Cuando seleccionas una capa y la mueves con Shift + flechas, se desplaza 10 píxeles. Pero si trabajas con una retícula de 8pt, esos 10 píxeles no encajan.

Para cambiar el nudge en Figma solo tienes que acceder a las preferencias: Figma → Preferences → Nudge Amount

• Small nudge: desplazamiento con flechas (por defecto: 1px)
• Big nudge: desplazamiento con Shift + flechas (por defecto: 10px)

Yo lo tengo configurado a 8px. Así cada desplazamiento encaja perfectamente con mi retícula.

Renombra capas rápidamente

Si llevas un rato diseñando, seguro que tienes muchas capas llamadas «Rectángulo 5» o «Frame 47». Para renombrarlas en lote:

1. Selecciona los elementos que quieres renombrar
2. ⌘ + R (Mac) o Ctrl + R (Windows)
3. Decide cómo quieres el nuevo nombre: mantener el original, reemplazar una parte, o cambiarlo todo
4. Puedes añadir números en orden ascendente o descendente

Inserta varias imágenes a la vez

Si estás creando una galería con cards o necesitas poblar varios elementos con imágenes, este truco te ahorrará muchos clics:

1. Selecciona todas las capas donde necesitas incluir una imagen
2. ⌘ + Shift + K (Mac) o Ctrl + Shift + K (Windows)
3. Selecciona todas las imágenes en la ventana que se abre
4. Haz clic donde quieras que aparezcan (aparecerán en el orden de la carpeta)

Tip: Nombra las imágenes en el orden que las quieres antes de importarlas, así sabrás dónde va cada una.

Copia y pega propiedades entre elementos

Si tienes una capa con un color de fondo, borde, sombra o bordes redondeados que quieres aplicar a otra:

1. Selecciona el elemento original → ⌘ + Option + C
2. Selecciona el destino → ⌘ + Option + V

En Windows: Ctrl + Alt + C y Ctrl + Alt + V.

Copia SVG directamente desde el navegador

Esto me voló la cabeza cuando lo descubrí 🤯 Si necesitas usar un SVG que ves en una web, simplemente copia el código desde el inspector del navegador y pégalo directamente en Figma con ⌘ + V.

Figma lo interpreta automáticamente como un vector editable.

Trucos para no romper tu diseño

Arrastra elementos sin sacarlos del frame

¿Te ha pasado que quieres mover un elemento hacia el borde del frame (por ejemplo, en un carrusel) pero se sale del contenedor? La solución:

1. Selecciona la capa que quieres mover
2. Mantén Espacio mientras la arrastras
3. Suéltala donde quieras

El elemento se moverá pero permanecerá dentro del frame.

Cambia el tamaño de un frame SIN deformar el contenido

Este truco me salvó la vida más de una vez (y lo sigue haciendo, en realidad). Cuando redimensionas un frame arrastrando, a veces se deforman los elementos de dentro. Para evitarlo:

1. Selecciona el frame
2. Mantén ⌘ (Mac) o Ctrl (Windows) mientras cambias su tamaño

El frame cambiará pero el contenido permanecerá intacto.

💡 Si lo que buscas es que el contenido sí se adapte, asegúrate de tener las constraints adecuadas o usa Auto Layout.

Escala elementos con la herramienta K

Cuando redimensionas un componente arrastrando, las proporciones se mantienen pero la tipografía y algunos elementos no escalarán como esperas. La solución es usar la herramienta de escalar:

1. Pulsa K en el teclado (o selecciona el icono del cuadrado con flecha diagonal)
2. Arrastra para escalar

Todo el contenido, incluido el texto, escalará proporcionalmente.

Navegación y organización

Ordena capas rápidamente

Para mover una capa por encima o por debajo de otras en la jerarquía:

Option + ⌘ + flechas arriba/abajo (Mac)
Alt + Ctrl + flechas arriba/abajo (Windows)

Combinado con ⌘ + R para renombrar, puedes organizar un archivo desordenado en minutos.

Navega entre frames

Si tienes un canvas con muchos frames y quieres revisarlos uno a uno:

1. Selecciona un frame
2. Pulsa 2 para hacer zoom
3. Usa Fn + flechas izquierda/derecha para ir al siguiente o anterior

Bonus: edición múltiple

Si necesitas editar varios elementos iguales a la vez (por ejemplo, cambiar el texto de varios botones), Figma tiene una funcionalidad de edición múltiple (multi-edit) que te ahorrará muchísimo tiempo.

El atajo: ⌘ + Option + A (Mac) o Ctrl + Alt + A (Windows).

Sigue aprendiendo Figma

¿Qué te han parecido estos trucos? ¿Hay alguno que no conocías? 😇

Como te decía al principio, utilizarlos te permitirá ser más ágil con el uso de Figma y optimizar un poquito más tu proceso de trabajo. Si quieres profundizar más en Figma, estos artículos te ayudarán:

• Cómo hacer prototipos en Figma: Del diseño a la interacción
• Aprende Auto Layout de Figma: Fundamental para diseñar de forma eficiente
• Edición múltiple en Figma: Edita varios elementos a la vez
• Variables en Figma: Para diseños más dinámicos y fáciles de actualizar
• Los mejores plugins de Figma: Herramientas para complementar tu workflow