9 trucos para mejorar tu workflow y ahorrar tiempo con Figma

Escrito por Cris Busquets. Publicado en Diseño UI, Productividad

En este artículo encontrarás 9 trucos que utilizo para trabajar más rápido con Figma. Algunos te parecerán obvios y otros creo que solucionarán problemas que tienes 😉

Quizás te parece una “tontería” dominar todo esto, pero te aseguro que ir sumando pequeños minutos, a la larga, te dará más tiempo para trabajar en la propuesta.

Si buscas este contenido para Sketch, léete este artículo.

Los 9 trucos para ahorrar tiempo con Figma

#1 Modifica el “Nudge”

Si seleccionas una capa y la mueves con Shift + CMD + Flecha de dirección te hace un desplazamiento de 10 pixeles.

Esto está bien, pero si trabajas con la 8-point grid tendrás que apretar dos veces la flecha para “restarle” estos 2 pixeles de más que te añade.

En el Menú > Preferences > Nudge Amount podrás modificar cuanto quieres que se desplace cada elemento:

• Small nudge, que es el desplazamiento de una capa cuando la seleccionas y la mueves con las flechas de dirección del teclado. Por defecto es 1 pixel.
• Big nudge, el que te comentaba antes (Shift + CMB + flecha de dirección). Por defecto es 10 pixeles.

#2 Atajos de teclado dentro de Figma

Si buscas un atajo de teclado en particular, Figma te lo pone muy fácil para que no tengas que irte a Google a buscarlo.

Simplemente haz clic en el icono del interrogante que tienes abajo a la derecha y selecciona “Keyboard Shortcuts”. Voilá.

Otra forma de acceder allí es con Ctrl + Shift + ?, pero es un poco difícil de recordar….

#3 Alinea de forma precisa

Es bastante fácil que cuando lleves un buen rato diseñando tengas elementos que queden fuera de sitio o desalineados.

Es cierto que seleccionando una capa + apretando Option en el teclado y mover el cursor te da la distancia que tiene respecto a cualquier elemento.

Este paso requiere más precisión que el que te explicaré ahora:

• Utiliza el atajo de teclado Shift + R para ver las reglas
• Selecciona una capa
• Fíjate en las zonas azules de la regla: te indica a cuánta distancia está de la esquina superior izquierda del Frame

#4 Ordena fácilmente capas

Como en el truco anterior, es fácil que cuando lleves días diseñando el orden de las capas que has cuidado tanto al empezar el proyecto ya no exista.

Para facilitarte la vida a ti y a cualquier otro miembro del equipo que pueda consultar el archivo de Figma, ordena las capas.

Simplemente selecciona una y con Option + CMD + Flecha arriba / abajo la colocarás por encima o por debajo del resto.

Y ya, si usas CMD + R cuando la tengas seleccionada y le cambias el nombre de “Oval Copy 2” a “Avatar”, doble combo 😉

#5 Domina el zoom en Figma

Antes de pasarme a Figma trabajé varios años con Sketch y el Zoom todavía me trae loca, básicamente porque me equivoco de teclas todo el rato.

Así que te resumo aquí cómo funciona:

• 0 en el teclado te colocará el zoom al 100% (aka, tamaño real)
• Si aprietas 1 en el teclado verás todos los Frames
• 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

#6 Copia y pega propiedades entre elementos

Si tienes una capa con un determinado color de fondo, de borde, sombra, bordes redondeados… y quieres copiar esas propiedades a otra capa, utiliza este truco:

• Selecciona el original → Option + CMD + C
• En el que quieres copiar propiedades → Option + CMD + V

#7 Cambia el tamaño de un frame SIN modificar el contenido

Cuando encontré esto de verdad que me salvó la vida y no exagero.

No puedo ni contar la de veces que he intentado modificar el tamaño de un Frame y al hacerlo me deformaba algún elemento de dentro… con la consiguiente inversión en tiempo para tocar constrains e ir haciendo pruebas.

Como todo, es más fácil de lo que parece:

• Selecciona el Frame
• Aprieta Cmd mientras cambias el tamaño

#8 Navega por los Frames

Es bastante fácil que tengas un canvas con muchos Frames y quieras repasarlos todos. O quieras ir a uno en concreto, depende.

Para navegar por ellos:

• Selecciona un Frame
• Haz clic en 2, para definir el Zoom al elemento
• Ve haciendo clic en Fn + flecha izquierda / derecha.

#9 Copia SVG directamente

Cuando Figma lanzó esta funcionalidad me explotó un poco la cabeza: es de aquellas cosas que cuando ves que existe piensas: ¿y por qué nadie pensó en ello antes?.

Si necesitas utilizar un SVG que tienes en la web o usar algún icono que veas por allí (ehem, ehem), copia el código del SVG con el inspector del navegador y pégalo tal cual en Figma (Cmd + V).

Conclusiones

¿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 te ha gustado, dímelo en los comentarios y recopilaré algunos más ^^

Esto también te interesa 👇

Cómo diseñar en un entorno que no se para

Que es un empty state, mejores prácticas y ejemplos

Principios de UX: Efecto goal-gradient y regla peak-end