5 trucos y consejos de Figma para principiantes

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

Permíteme mostrarte 5 trucos y consejos de Figma. Estos serán muy útiles, especialmente si recién estás comenzando a usar Figma para la creación de interfaces de usuario y para el diseño web. El primer consejo es sobre cómo mejorar tu trazo, ¡así que comencemos!

5 consejos de Figma

1. Creación de mejores trazos

Al dibujar un trazo (una sola línea) en tu lienzo, dentro del panel de opciones Stroke (Trazo) podrás establecer el color y el grosor. Pero, además de estas opciones estándar, también puedes elegir cómo se ven los extremos del trazo:

Aquí puedes ver que hemos configurado los extremos del trazo para que parezcan flechas. Esto puede ser extremadamente útil al crear diagramas de flujo y wireframes, como se muestra en este kit de interfaz de usuario de wireframe de Figma:

UX Flowchart Cards — Tarjetas de diagrama de flujo para la experiencia de usuario: kit de interfaz de usuario de wireframe de Figma

Desde el panel de opciones Stroke (Trazo) puedes determinar si la línea es sólida, punteada o discontinua, y definir los espacios y las líneas utilizadas. También puedes determinar la apariencia de las uniones entre los extremos de dos trazos (afiladas, biseladas o redondeadas).

2. Recorte de imágenes sencillo

Supongamos que tengo una imagen en mi lienzo y que quiero recortarla para mostrar solamente una sección determinada. Hay dos enfoques para hacer esto.

Una opción es hacer doble clic en la imagen y seleccionar Crop (Recortar) desde las opciones de relleno de Image (Imagen) que aparecen. Luego usa los controles alrededor de la imagen para determinar el área visible y presiona Intro cuando estés listo.

Haz doble clic en la imagen recortada si quieres modificar el área que acabas de configurar.

Pero hay una forma más rápida que esta: mantén presionada la tecla Comando ⌘ o Ctrl, dependiendo de tu sistema operativo, selecciona la imagen en cuestión y podrás arrastrar los mismos controles que usamos anteriormente.

Esta es una excelente manera de recortar varias imágenes a la vez.

Vuélvete bueno recortando, y las miniaturas de tus diseños de interfaz de usuario se verán tan elegantes como las de Gocier:

Gocier - Grocery E-commerce UI Kit — Gocier: kit de interfaz de usuario de Figma de comestibles

3. Operaciones matemáticas más simples

Supongamos que tienes varios elementos en tu lienzo cuyos tamaños quieres cambiar y aumentar su altura en una cantidad específica. Puedes usar el campo Height (Altura) en el Inspector y agregar, digamos, 128 px a la cantidad que ves. Pero es más fácil si, en lugar de eso, usas una fórmula: 175+128. Figma calculará el resultado por ti.

Esto funciona para todas las operaciones matemáticas que puedas imaginar, y puedes aplicarlas a cualquier propiedad dimensional también; altura, ancho, ángulo, posición del eje, etcétera.

Pero, ¿y si quisieras cambiar uno de estos valores para varios elementos al mismo tiempo? Si seleccionas varios elementos diferentes, verás el valor Mixed (Mixto) en las propiedades de la dimensión. Esto no representa ninguna diferencia para Figma; para añadir 56 px de ancho a todos los elementos, simplemente agrega tu operación matemática así: Mixed+56 (Mixto+56).

4. Listas numeradas y con viñetas

Para agregar viñetas a los componentes de una lista en elementos de texto, puedes simplemente buscar símbolos de viñetas ASCII y pegarlos al principio de cada línea. Pero en Figma hay una mejor manera de hacerlo.

En el inspector de texto, haz clic en el botón (los tres puntos) Type details (Detalles de tipo) para obtener todas las opciones que necesitas en cuanto a estilos de listas.

De esta manera puedes ordenar o desordenar tu lista rápidamente.

5. Vista previa de esquemas de diseño responsivos

Nuestro último consejo, y este involucró el uso de un plugin para ver cómo se comporta tu diseño al usar ciertos puntos de interrupción.

Para esta demostración tengo tres mesas de trabajo de Figma, llamadas Max 480, 481-960 y 961+.

Todo estos cuadrados que ves podrían ser imágenes o algún tipo de miniaturas para galerías. En cualquier caso, he configurado sus propiedades de cambio de tamaño con el valor Fill Container (Rellenar contenedor), lo que significa que son fluidos y se estiran junto con el ancho de la mesa de trabajo.

Vamos a probar estos diseños de una manera realmente intuitiva, así que continúa e instala el plugin Breakpoints para Figma (si nunca antes has usado complementos con Figma, consulta mi guía rápida aquí).

Este es un plugin de pago, pero ofrece una prueba gratuita de 15 días.

Abre el plugin, y lo primero que vas a hacer es ir a Create a New Adaptive Layout (Crear un nuevo diseño adaptable).

En el panel de Breakpoints puedes definir tus puntos de interrupción (como lo hicimos al nombrar las mesas de trabajo anteriormente).

Una vez agregados los puntos de interrupción, puedes seleccionar cada uno y asociarle una mesa de trabajo. Entonces, para el primer punto de interrupción elegimos nuestra primera mesa de trabajo y así sucesivamente.

Una vez hecho eso, nuestro lienzo de Breakpoints nos muestra el rango de tamaños que hemos definido:

Ahora, cuando estiramos el lienzo de diseño adaptable de Breakpoints vemos que nuestro diseño cambia en consecuencia.

Esta es una herramienta realmente genial para obtener una vista previa de tus diseños responsivos en Figma.

¡Hemos terminado!

Y ahí los tienes: ¡5 trucos y consejos de Figma para principiantes! Cuéntanos cuáles son tus consejos favoritos de Figma ¡y quizá los presentemos en el próximo resumen!

Aprende Figma con Tuts+

Tenemos una gran cantidad de recursos de Figma para ayudarte a aprender y a mejorar, desde tutoriales hasta cursos completos (¡y todo de forma gratuita!). Échales un vistazo: