Atajos esenciales de Figma para trabajar eficientemente

() translation by (you can also view the original English article)

Estos atajos esenciales de Figma aumentarán tu productividad y te permitirán trabajar de manera más eficiente. Son mis recomendaciones personales y las uso todo el tiempo. Así que vamos a dejar de perder el tiempo y empecemos de una vez!

Accesos directos de Figma

Aquí hay una versión completa en video de los accesos directos de Figma en este resumen. ¡No te olvides de suscribirte a nuestro canal de YouTube Envato Tuts+ para tutoriales, cursos gratuitos y mucho más!

1. Todos los atajos de teclado

Para averiguar todos los atajos de teclado de Figma disponibles, pulsa el botón Ayuda y Recursos en la esquina inferior derecha de la pantalla (o pulsa Ctrl+SHIFT+?):

Esto mostrará una superposición ordenada con todos los atajos de teclado divididos en categorías útiles. Todos los accesos directos están atenuados, pero (esto es bastante genial) los que has usado antes se resaltarán para mayor claridad:

2. Crear rápidamente formas y objetos

Vamos a continuar con los atajos más básicos de Figma.

Para hacer formas, utilice R (para Rectángulo)
L (para Línea)
O (para Óvalo, o Elipse)
T (para Texto)
y F (para Marco)

Una vez que tengas el hábito de usar estos 5 atajos de teclado ahorrarás mucho tiempo creando nuevos objetos en la página.

3. Navegue por la página

Supongamos que tienes un montón de elementos en la página, estás ampliando y deseas navegar alrededor de ellos. Pulsar H (Herramienta Mano) te permitirá arrastrar la ventana hasta que encuentres lo que estás buscando.

Pero hay una manera más rápida. Puedes desplazarte manteniendo presionado ESPACIO y arrastrando con el ratón. Efectivamente lo mismo que la Herramienta Mano, sin necesidad de cambiar entre herramientas.

4. Ajuste de la opacidad en un elemento

Utiliza rápidamente las teclas 0 a 9 para establecer la opacidad en un objeto seleccionado. Con el objeto seleccionado, pulsa 1 para 10% de opacidad, 2 para 20% y así sucesivamente hasta 0 para 100%.

Setting Opacity on an Element — Presiona 9 para 90% (mostrado en las propiedades de capa por "Pasar a través"

Para un control más fino, presiona dos números en rápida sucesión; 4 y 3 para el 43%, por ejemplo.

5. Acercar y alejar

Acercar y alejar es muy importante para todas las herramientas de diseño, y en Figma hay una serie de atajos de teclado que puedes utilizar, dependiendo de tus métodos de trabajo preferidos.

Mantener presionada la tecla SHIFT+1 (esto funciona para Windows y MacOS) se acercará para ajustarse (por lo que todos los objetos en el lienzo están contenidos en la ventana gráfica).
Con SHIFT+2 se acerca a cualquier objeto seleccionado actualmente.
Y SHIFT+0 establecerá el nivel de zoom en 100%.
Las teclas + y - acercarán y alejarán, y manteniendo pulsado COMMAND (en MacOS) o CTRL (en Windows) te permite utilizar la rueda del ratón para acercar y alejar suavemente, centrado dondequiera que esté el cursor del ratón.
Por último, al mantener presionada la tecla Z se abre la herramienta Zoom para que puedas hacer clic o arrastrar sobre el lienzo y acercar. ALT+Z hace lo mismo para alejar.

Más ajustes de zoom

Para más opciones y ajustes de zoom, haz clic en el menú desplegable en la esquina superior derecha de la ventana:

6. Empujar y Redimensionar con las teclas de flecha

Echemos un vistazo a los objetos de empujar y redimensionar con las teclas de flecha (utilizo estos accesos directos todo el tiempo, son muy útiles).

Empujar es mover un objeto en cualquier dirección. Con un elemento seleccionado, utiliza las teclas de flecha ARRIBA, ABAJO, IZQUIERDA y DERECHA para empujarlo 1px en el lienzo. Mantén pulsada la tecla SHIFT y haz lo mismo para mover el objeto 10px a la vez.

Para cambiar el tamaño de un objeto 1px en una dirección determinada, mantén presionada la tecla CTRL o COMMAND y utiliza las teclas de flecha. Como antes, mantener presionada la tecla SHIFT al mismo tiempo hará lo mismo pero por 10px.

7. Añadir rápidamente Auto-Diseño y Grupo

Otro de mis atajos favoritos es añadir auto-diseño. Selecciona los objetos que deseas utilizar y luego pulsa SHIFT+A.

Auto-Diseño es una característica que te permite crear rápidamente componentes redimensionables.

Para agrupar una selección de elementos, pulsa COMMAND+G en MacOS y CTRL+G en Windows.

8. Selector de color

Otro atajo de teclado de Figma realmente útil nos permite llamar al selector de color con el clic de un dedo. Selecciona un objeto y luego presiona I para abrir el selector de color. Haz clic en otra parte del lienzo para aplicar ese color al objeto.

9. Búsqueda rápida

En Figma puedes presionar COMMAND+/ o CTRL+/ para abrir el menú de búsqueda, y aquí puedes hacer muchas cosas (encender un plugin, ocultar la interfaz de usuario, buscar un archivo, y muchos, muchos más).

10. Mostrar y ocultar cuadrículas de diseño

Otro atajo al que hago referencia una y otra vez es alternar la visibilidad de las cuadrículas de diseño. Estas cuadrículas generadas por Figma te permiten colocar elementos en el lienzo con precisión. CTRL+SHIFT+4 mostrará y ocultará las cuadrículas, lo que es mucho más rápido que el proceso de dos pasos de seleccionar un objeto y alcanzar el botón de alternancia en la barra lateral.

11. Duplicar objetos

Duplica rápidamente un objeto seleccionándolo y pulsando CTRL+D (COMMAND+D en MacOS).

El elemento duplicado se colocará precisamente encima del original, así que supongamos que mueves el duplicado a una nueva posición: a la derecha. Si lo siguiente que haces es duplicar ese duplicado, su duplicado aparecerá a la derecha en lugar de encima de su predecesor.

Los puntos anteriores también funcionan en grupos, no solo en objetos individuales.

12. Centros de alineación

Alinear objetos a lo largo de un eje central (horizontal o verticalmente) es fácil en Figma gracias a su panel de alineación. Pero los atajos de teclado ALT+H (para horizontal) y ALT+V (para vertical) son mucho más rápidos de usar!

¡Esos atajos de Figma te harán más eficiente!

Para ver todos estos accesos directos en acción no te olvides de echar un vistazo a la versión en vídeo de este resumen. Déjanos saber qué accesos directos de Figma te ahorran más tiempo!

Más tutoriales de Figma

Recursos y Activos de Figma (Gratis y Premium)

¡Inspírate con estos resúmenes de kits de interfaz de usuario y experiencia de usuario para Figma, gráficos, kits de iconos y mucho más!