Antes de abrir cualquier programa, recuerda algo: en diseño digital todo empieza con un problema por resolver. Sin entender ese problema, no hay diseño posible. Por eso, antes de saltar a Figma o a cualquier otra herramienta de diseño UX/UI, primero defines el medio y luego eliges el software adecuado.

A veces papel y lápiz son lo más rápido para arrancar. Cuando la idea ya está más clara, ahí sí pasas a la herramienta correcta.

¿Qué herramientas de diseño digital existen y para qué sirven?

Cada programa resuelve un tipo distinto de problema. Conocer su propósito te ayuda a no usar un martillo cuando necesitas un destornillador.

• Lightroom: catalogar y retocar fotografías.
• Blender: diseño y modelado en 3D.
• Photoshop y Pixelmator: retoque de imágenes.
• Illustrator: ilustración vectorial.
• InDesign: diseño editorial.
• Sketch y Figma: diseño digital de UX/UI.

En este curso el foco está en Figma, y hay una razón clara para esa elección.

¿Por qué usar Figma para diseño UX/UI?

Figma resuelve varios dolores históricos del diseño digital: archivos perdidos, versiones desactualizadas y falta de colaboración en tiempo real [01:30].

• Tus ficheros viven en la nube, así que dejas de preocuparte por carpetas o respaldos.
• Compartes cualquier archivo con una simple URL.
• Tiene guardado automático, ideal cuando se va la luz o cierras el navegador sin querer.
• Es 100% colaborativo: varias personas diseñan y comentan al mismo tiempo.
• Funciona en cualquier plataforma, incluido Windows, porque es una web app que solo necesita un navegador.

¿Qué es Figma? Es una aplicación web de diseño UX/UI que vive en la nube, permite colaboración en tiempo real y funciona en cualquier sistema operativo con solo un navegador.

Esa última característica es clave si trabajas en remoto, porque elimina fricciones de instalación y compatibilidad.

¿Cómo está organizada la interfaz de Figma?

Al entrar a un fichero, te encuentras con una estructura predecible que se repite siempre [03:30]. Entenderla te ahorra tiempo desde el primer día.

¿Qué hay en la barra de navegación y la barra de herramientas?

En la parte superior está la navigation bar, donde regresas al home y ves las pestañas de los ficheros abiertos. Justo debajo aparece el toolbar con las herramientas principales para dibujar vectores, añadir texto, compartir, previsualizar y prototipar.

Desde ahí controlas casi todas las acciones del día a día.

¿Qué muestran los paneles laterales y el canvas?

El área principal se divide en tres zonas [04:15]:

• A la izquierda, el listado de capas.
• En el centro, el canvas, donde ocurre todo tu diseño.
• A la derecha, el panel de propiedades.

El panel de propiedades es dinámico: cambia según lo que tengas seleccionado en el canvas. Eso significa que no te muestra opciones inútiles, solo las relevantes para el elemento activo.

¿Cómo funcionan las capas y las propiedades en Figma?

La organización en Figma se hace por capas, igual que en otros programas de diseño, pero con atajos que aceleran tu flujo [05:00].

Puedes reordenar capas arrastrándolas con el cursor o usando shortcuts de teclado para subirlas y bajarlas. Cambiar el orden afecta qué elemento queda encima de otro en el canvas.

¿Para qué sirven las capas en Figma? Para controlar el orden visual de los elementos. La capa de arriba en el panel se ve por encima en el canvas, y puedes reorganizarlas con drag and drop o atajos de teclado.

¿Cuáles son las propiedades básicas de un elemento?

Aunque el panel derecho cambia, hay propiedades que casi cualquier elemento comparte [05:50]:

• Posición, tamaño y rotación, en la parte superior derecha.
• Relleno, opacidad, borde y efecto, en la zona inferior del panel.

Estas propiedades son tu kit básico para empezar a dar forma a cualquier diseño.

¿Cuál es la diferencia entre opacidad de relleno y opacidad de capa?

Aquí viene un detalle que confunde a quienes empiezan. Si aplicas opacidad al relleno, solo afecta al fondo del elemento, dejando el borde intacto. En cambio, si aplicas opacidad a toda la capa, afecta tanto al relleno como al borde [06:40].

¿Cuándo uso opacidad de relleno vs opacidad de capa? Usa opacidad de relleno cuando quieras conservar el borde visible y suavizar solo el fondo. Usa opacidad de capa cuando necesites desvanecer el elemento completo.

Este pequeño matiz te da control fino sobre la jerarquía visual de tus diseños, y es de esos detalles que marcan la diferencia entre un diseño cuidado y uno apresurado. Cuéntame en los comentarios qué herramienta de diseño usabas antes de Figma.