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 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 ^^
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Cookies de terceros
Esta web utiliza Google Tag Manager para recopilar información anónima tal como el número de visitantes del sitio o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Lo del frame……. Gracias!!!
El #7 me hizo llorar de alegría
El #7 es la joya de la corona de este artículo <3
gracias por el número 7!
Copiar y pegar SVG 😍
Gracias!
El 9 es muy guay!!
apretando control mas scroll del mouse, se puede hacer zoom in o out tambien
De este recopilatorio el #4 es mi favorito =)
Aunque en su momento tuve una anécdota con el #7, lo descubrí de la desesperación probando con la tecla shift, luego alt y con cmd voilà, funciono!
Hay alguna manera de trabajar con 2 o mas ventanas en figma pero viendo el mismo documento, solo que partes distintas del mismo???
GRACIAS POR EL #7!!!!! <3
El 7 me arreglo la vida :’)