11 atajos útiles de Figma para un flujo de trabajo más rápido

Figma es una poderosa herramienta de diseño y es la primera opción de la mayoría de los diseñadores de UX/UI como programa de diseño. Puedes crear mucho dentro de Figma, y ​​es un programa fácil de aprender.

Como diseñadores, a menudo buscamos ahorrar tiempo, por lo que dedicamos nuestras preciosas horas a crear un buen trabajo en lugar de navegar por los menús. Recopilamos una lista de atajos útiles de Figma que agilizarán su flujo de trabajo.

1. Seleccione la herramienta de escala

Este simple atajo de una tecla es una forma rápida de escalar sus elementos. Presione la tecla K , luego seleccione el objeto que necesita cambiar de tamaño. Todo lo que necesita hacer es hacer clic y arrastrar un punto de anclaje y su objeto permanece en escala mientras cambia el tamaño a lo que necesite que sea.

2. Seleccione la herramienta Marco

La herramienta Marco es una herramienta muy utilizada en Figma cuando se crean múltiples tableros de marcos para diseños de prototipos. Al presionar F en su teclado, aparece la herramienta con un solo toque, lo que le permite dibujar o cambiar el tamaño de su marco rápidamente.

Puede dibujar el marco directamente haciendo clic y arrastrando el cursor, o una vez seleccionada la herramienta Marco, puede escribir los tamaños deseados en los cuadros de dimensiones en el menú del marco a la derecha.

3. Cambiar entre los modos de diseño y prototipo

El atajo Shift + E le permite cambiar entre el modo Diseño y el modo Prototipo. El mismo atajo funciona independientemente del modo desde el que comience y al que cambie. Consulte nuestra guía para principiantes de Figma para conocer las diferencias entre estos modos.

Alternativamente, existen atajos más específicos para este propósito. Alt (Windows) / Opción (Mac) + 8 se puede usar para cambiar del modo Prototipo al modo Diseño, mientras que Alt (Windows) / Opción (Mac) + 9 cambia del modo Diseño al modo Prototipo. Obviamente, Shift + E es más fácil, pero es bueno tener opciones.

4. Seleccione el elemento más interno con un clic (selección profunda)

Al diseñar en varias capas o con imágenes incrustadas, puede ser difícil seleccionar un elemento rápidamente. Para ahorrar tiempo, haga clic lo que parece una docena de veces para seleccionar la capa más inferior, use este atajo en su lugar.

En una Mac, mantenga presionada la tecla Cmd + clic en el elemento y, en Windows, presione Ctrl + clic . Una tecla simple ahorra minutos de clics sin sentido para seleccionar un elemento de la capa inferior.

5. Salir un nivel después de seleccionar el elemento más interno

Una vez que haya logrado seleccionar el elemento más interno de su diseño, es posible que se dé cuenta de que desea seleccionar un elemento un nivel más cercano: fácil. Una vez que haya encontrado el elemento más interno, presione Shift + Enter para retroceder un nivel. Puedes hacer esto para todos los niveles.

6. Contraer todas las capas

Al diseñar en Figma, su panel de capas comenzará a expandirse y potencialmente se verá un poco desordenado, especialmente cuando convierta HTML a un diseño de Figma. Para colapsar sus capas, simplemente presione Alt + L (Windows) u Opción + L (Mac).

Si tiene un elemento seleccionado mientras usa este atajo, la capa con ese elemento permanecerá abierta. Seleccione cualquier lugar fuera de la mesa de trabajo para anular la selección de todos los elementos y use el acceso directo para colapsar todas las capas.

7. Mostrar u ocultar cuadrículas de diseño

El uso de cuadrículas de diseño es la mejor manera de asegurarse de que su diseño alcance ciertas proporciones y se pueda escalar correctamente para varios dispositivos. Si bien son útiles, no siempre desea que se muestren las cuadrículas.

Activar y desactivar cuadrículas de diseño es diferente en una Mac que en Windows. En una Mac, presione Ctrl + G para activarlo o desactivarlo. Si está usando Windows, es un atajo de tres teclas; Ctrl + Mayús + 4 . Son diferentes, pero hacen lo mismo.

8. Coloque varias fotos a la vez

Si ha diseñado un diseño con formas de marcador de posición listas para sus imágenes, puede ser frustrante insertar las imágenes una por una. Este acceso directo le permite colocar varias fotos y simplemente seleccionar el marcador de posición, o cualquier lugar de su mesa de trabajo, para colocar cada foto individual.

Para usuarios de Mac, presione Cmd + Shift + K para abrir la ventana de diálogo y encontrar sus imágenes. En Windows, es Ctrl + Shift + K para encontrar y colocar varias fotos en su diseño de Figma. Si crea una plantilla maestra en Figma, este es un gran atajo para usar.

9. Copie cualquier imagen como PNG

Al usar imágenes en su diseño de Figma, es posible que tenga una variedad de formatos de archivo, pero tal vez su cliente requiera PNG. Puede copiar cualquier imagen como PNG, independientemente de su formato de origen.

Seleccione su imagen elegida y presione Cmd + Shift + C en Mac y Ctrl + Shift + C en Windows para copiarla como PNG. Puede usar fácilmente este atajo para garantizar un formato de imagen de alto estándar, especialmente si está creando presentaciones con Figma.

10. Colirio de un color desde cualquier lugar

Hacer caer la vista de un color es una característica útil cuando se toma un color de una parte de su diseño a otra. Este atajo de teclado rápido le permite levantar el cuentagotas en un segundo y ver un color desde cualquier lugar de su mesa de trabajo.

En Mac, presione Ctrl + C , y en Windows es la tecla de letra I. Una vez que haya presionado los atajos de teclado, mueva el objetivo del cuentagotas sobre el color que desea usar y haga clic una vez para ver el color.

11. Abra la pestaña Recursos

La pestaña Recursos alberga los menús Componentes, Complementos y Widgets. Si bien no hay atajos para abrir esos menús individualmente, el atajo de recursos aún ahorra algo de tiempo: Shift + I . Puede usar complementos para crear y agregar maquetas a sus diseños de Figma.

Ahorre tiempo con los atajos de Figma

Los diseñadores suelen utilizar atajos en su trabajo para ahorrar tiempo y energía, y trabajar en Figma no es diferente. Estos atajos de Figma solo arañan la superficie de los atajos que puede usar en el programa.

Estos atajos no son obvios ni fáciles de encontrar, así que lleva tus nuevos aprendizajes a Figma y deléitate con la información que muchos diseñadores tardan meses o años en descifrar.