Dudas de un uso avanzado de Figma

Según empiezas a trabajar con Figma seguramente tomes pocos riesgos y hagas cosas muy lentas. Poco a poco incluirás atajos de teclado y descubrirás nuevas features como el uso de autolayout para todo y el uso de plug-ins que te terminarán dirigiendo a un uso avanzado de Figma. En el camino te harás preguntas como las que recojo a continuación:

Tabla de contenidos

Estos son las dudas de uso avanzado que vamos a ver:

• Pixel Preview
• Pixel Grid
• Nudge Amount
• Herramienta Slice
• Puntos de Ancla

¿Qué es el Pixel Preview?

Pixel preview es una opción de visualización de Figma que nos permite ver los píxeles de las formas vectoriales que creamos en Figma. Esta opción es bastante útil para saber cómo se verá posteriormente nuestro trabajo rasterizado, por ejemplo si lo exportamos como PNG o JPG, es decir en formato de mapa de bits.

La opción pixel preview viene deshabilitada por defecto para que veamos todo en formato vectorial. Sin embargo, lo podemos activar tanto a escala 1x como a escala 2x desde el el desplegable que encontramos en la esquina superior derecha junto al % de zoom dado.

Otra opción para activar o desactivar esta vista pixelizada en figma es con los atajos de teclado ^ Control P en Mac o Control Alt P en Windows.

¿Quieres saber más trucos de Figma?

¡Descubre los Secretos del Diseño UX/UI! 🎨

Sigue a AprenderUXUI en LinkedIn para contenido casi casi diario sobre diseño UX / UI

¡Sígueme en LinkedIn ya! ➡

¿Qué es snap to Pixel Grid?

El pixel grid es la rejilla de píxeles que podemos ver en Figma dentro de cada diseño si hacemos mucho zoom y si además activamos la opción de visualización de este pixel grid.

La rejilla de píxeles de Figma existe independientemente de si la activamos o no. Por ello, la opción Snap to pixel grid (ajustarse a la rejilla de píxeles) nos permite que todos los cambios de estirar y posicionar elementos se ajusten a dicha rejilla. Esta opción es muy útil para no cometer el error de diseñar con decimales. Así pues, si quieres diseñar en Figma sin decimales, tienes que tener la opción Snap to Pixel Grid activada.

Nudge Amount

El Nudge amount, es la cantidad de puntos que la flecha del teclado empuja al pulsarla. Me explico mejor, cada vez que en figma pulsamos una de las flechas del teclado el elemento seleccionado se desplaza en esa dirección una cantidad de veces. Esa cantidad de veces es la que se define en el nudge amount.

Hay una cantidad de empuje pequeña (small nudge) y otra grande (big nudge). El pequeño se corresponde con simplemente pulsar la flecha y el grande con pulsar la flecha a la vez que presionamos Shift creo que tanto en Windows como en Mac.

¿Cómo ajustar el nudge amount? Podemos hacerlo desde el desplegable de la esquina superior izquierda y ahí yendo a Preferences y luego a Nudge Amount.

Por defecto vienen predefinidos en 1 y 10 pero si trabajas con sistemas de espaciado y tamaño en base 8, posiblemente quieras definir el pequeño como 4 puntos y el grande como 8 puntos.

¿Qué es la herramienta Slice?

La herramienta Slice es muy poco conocida en Figma y la verdad que cuesta de saber para qué sirve. Sin embargo, yo que vengo de Photoshop la conozco bien porque usaba mucho su equivalente.

Slice sirve para dividir diseños y que se exporten separados en partes. Algo más o menos útil por lo general para generar assets para web, pero sobre todo si queremos hacer efectos parallax.

Eliminar y Corregir Puntos de Ancla

Otro problema que me sucedía muy frecuentemente cuando no era un usuario avanzado de Figma era el tener que corregir puntos de ancla dentro de las formas. No me gustaba nada porque muchas veces rompía toda la forma.

La solución para eliminar puntos de ancla sin eliminar, borrar o borrar la forma es con la opción de eliminar y corregir puntos de ancla. Esto hace que en vez de quedarse roto el trazado que los une, se ajuste a las nuevas posiciones y lo mejor que tiene es que respeta las curvas.

Cómo eliminar y corregir los puntos de ancla? Con atajos de teclado, confío que algún día darán una opción en el menú de forma pero de momento tenemos que hacerlo con los atajos de teclado Shift+Delete