1. Tutoriales para todo

Siento que para aprender Figma, no es necesario hacer un curso. En parte porque la herramienta se actualiza todo el tiempo (o sea que es posible que los cursos queden desfasados), y en otra parte, porque hay demasiado material en internet, así que sería un poco tirar la plata. Mi filosofía siempre autodidacta es aprender a base de tutoriales. Hay algunas cuentas que están buenas y que valen la pena seguir:

• En primer lugar, el canal de YouTube de Figma es el mejor de todos. Nadie mejor que ellos te explican y te enseñan como usarlo. De hecho te arman archivos para que vos pongas en práctica las nuevas actualizaciones. Personalmente, los videos que más me gustan son los Figma tips.
• El influencer Zander: @Zanderwhitehurs en Instagram o @zander_supafast en Twitter. Te enseña a hacer cosas muy copadas en cuestión de segundos. Más que nada explica prototipado, y efectos, pero sirve mucho para inspiración.
• Miggi professorfigma en tiktok: Más que nada te enseña a dibujar en Figma y olvidarte de Illustrator para siempre.

2. Los shortcuts: un camino de ida

Después de 10 años de usar psd o Illustrator, memorizar nuevos shortcuts (atajos del teclado) costó bastante. Por suerte algunos los heredamos, como Option para duplicar objetos o T para insertar texto. Con el tiempo aprendí otros que realmente me hicieron ganar varias horas de productividad y se los quiero compartir:

• Pegar y reemplazar contenido → Cmd + Shift + R
• Copiar propiedades → Option + cmd + C
• Pegar propiedades → Option + cmd + V
• Intercambiar relleno y trazo → Shift + X
• Zoom al objeto seleccionado → Shift + 2
• Ir seleccionando hijos dentro de un frame → Enter
• Regresar y seleccionar padres de un frame → Shift + Enter
• Escalar desde el centro (mientras estiras) → Option

Tip: Podés encontrar la lista completa de atajos de teclado yendo a la sección "Ayuda" en la esquina superior derecha de la ventana de Figma.

3. Mi atajo preferido: Shift+A

Pensar que el autolayout (shift+a) me cambió la vida, suena exagerado (y lo es). Pero sí puedo afirmar que me ahorró muchas horas de trabajo minucioso. Me acuerdo cuando no lo usaba. Tenía que acomodar todos los espaciados manualmente, y si decidía modificar algo como achicar el texto o cambiar un elemento de lugar, tenía que corregir todos esos espaciados uno por uno (y obviamente nunca quedaba pixel perfect). Al principio, puede parecer un poco abrumador, pero una vez que le agarras la mano, se vuelve fácil e intuitivo de usar, y hasta una necesidad. 
¿Para qué sirve? Ayuda a mantener los diseños consistentes, y además es clave para establecer parámetros en los diseños responsive. Para entenderlo y no volverse loco, mi sugerencia es ir de menos a más: primero aplicarlo a un botón, después a un navbar, más tarde hacer una card, y por último algunas pantallas más complejas. Y mirar tutoriales. Muchos tutoriales.

4. Las ventajas de componetizar

Una de las primeras cosas que aprendí cuando arranqué a usar Figma fue a componetizar y armar distintas variantes. ¿Para qué sirve esto? Si hay algún elemento que vas a reutilizar durante todo tu diseño, lo componetizas, de esa forma, si necesitas hacerle cambios, lo haces desde el componente madre y así se actualiza en todas las pantallas. 
También es importante armar las variables de cada componente, por ejemplo, para indicar sus distintos estados. Por ejemplo, si armamos un botón, lo hacemos con todas sus variantes: idle, hover, on click, focus y disabled. De esta manera queda todo documentado.

5. Plugins: mi top 5

Un plugin de Figma es un software adicional que se integra a la plataforma y agrega funciones personalizadas. En figma hay una lista infinita de plugins y recursos para aprovechar, pero he aquí mi top 5 más usado: Unsplash: Unsplash es un banco de imágenes gratuitas y de alta calidad. El plugin sirve para buscar y agregar imágenes directamente en tus proyectos de diseño sin tener que salir de la aplicación.

• Lorem ipsum: Este plugin te permite generar rápidamente texto de relleno en tu diseño.
• A11 color contras checker: Clave para lograr diseños 100% accesibles. Lo que hace este plugin es justamente verificar el contraste entre el texto y el fondo, es decir, te indica si los textos cumplen con las pautas de accesibilidad web (WCAG).
• Clean document: Ayuda a mantener el archivo ordenado, organizado y sin elementos “escondidos” o inutilizados.
• Measure: Sirve para medir elementos. Es clave para armar las especificaciones técnicas de un determinado diseño.

6. Mantén el orden

Cada uno puede tener su propio orden dentro de figma, pero les quiero contar como lo hacemos en Chispa. En primer lugar, jerarquizamos y organizamos nuestro trabajo en 3 niveles: Nivel 1, teams: En este caso nuestro equipo de trabajo, Chispa. Nivel 2, clientes: Para que se den una idea, son como carpetas de drive. Nosotros tenemos una carpeta por cada cliente, y dentro de cada una de ella podemos guardar distintos subproyectos o files. Nivel 3, files, subproyectos: Son los distintos archivos de diseño de Figma o figjam. A estos files los solemos diferenciar otorgándoles a cada uno su carátula.

Por otro lado, dentro de cada file, podemos ir creando distintas páginas. En Chispa, cuando hacemos una página web, por ejemplo, nos gusta ordenar las páginas así:

Ready to Dev: diseño listo para el desarrollador dividido en secciones.

---

Style guide: toda la guía de estilo: paleta de colores, tipografías, imágenes, sombras, iconos, etc.
Components: aquí dejamos todos los componentes por separado, con sus variables.
Prototype: Si es necesario, dejamos las pantallas conectadas para mostrar el flujo.
Playground: Este es el file creativo, dónde los diseños surgen y cuando están listos se pasan a ready to dev.

---

Refes: referencias, imagenes, links, moodboards y todo lo que nos sirve para encargar el diseño.
Trash: diseños que ya no nos sirven (pero que no queremos borrar para siempre).

---

Cover: Acá va la carátula de este file.

A su vez, también aconsejamos nombrar las distintas capas, secciones y frames dentro de cada página. Esto es clave para poder trabajar en equipo de manera eficaz y productiva.

7. Trabajo en equipo

En mi opinión, Figma fue disruptivo desde el momento cero. No se había visto antes una herramienta en la que Uxers, diseñadores, writers, devs, PO, etc., pudieran trabajar al mismo tiempo, en el mismo archivo y de manera colaborativa.

¿Cómo optimizar el trabajo en equipo?

• Deja comentarios dando feedback
• Deja etiquetas para que sepan el status del proyecto: ready for dev, in progress, falta contenido, etc.
• Haz llamadas de voz
• Mantén siempre el orden, ver punto anterior :)