Instala Figma y configura tu primer proyecto

Concepto clave

Figma es una herramienta de diseño colaborativa basada en la nube que permite crear interfaces de usuario de manera eficiente. Imagina que es como un taller digital donde puedes esbozar, construir y refinar tus diseños, similar a cómo un arquitecto usa planos en 3D para visualizar un edificio antes de construirlo. A diferencia de software tradicional que se instala en tu computadora, Figma funciona directamente en tu navegador, lo que significa que siempre tienes la versión más actualizada y puedes colaborar en tiempo real con otros diseñadores.

Para un Product Designer, Figma es esencial porque centraliza todo el proceso de diseño: desde wireframes básicos hasta prototipos interactivos. Su enfoque en la nube elimina la necesidad de enviar archivos pesados por correo, reduciendo errores de versión. Piensa en ello como tener un lienzo infinito donde cada elemento que creas puede ser reutilizado y escalado fácilmente, gracias a funciones como Auto Layout, que automatiza el espaciado y alineación, similar a cómo un sistema de rieles guía un tren para mantenerlo en su trayectoria.

Cómo funciona en la práctica

Para empezar, sigue estos pasos para instalar Figma y configurar tu primer proyecto:

1. Ve al sitio web de Figma (figma.com) y haz clic en "Registrarse" para crear una cuenta gratuita. Usa tu correo profesional vinculado a tu rol de Product Designer.
2. Una vez registrado, descarga la aplicación de escritorio de Figma desde la sección de descargas. Esto te dará un acceso más rápido y estable, aunque también puedes usar la versión web.
3. Al abrir Figma, verás una pantalla de inicio. Haz clic en "Nuevo archivo" para crear tu primer proyecto. Nómbralo "Mi Primer Proyecto - Práctica".
4. Dentro del archivo, familiarízate con la interfaz: la barra de herramientas a la izquierda, el lienzo central y los paneles de propiedades a la derecha. Usa la herramienta "Rectángulo" (atajo R) para dibujar un cuadrado simple en el lienzo.
5. Configura las propiedades del rectángulo en el panel derecho: cambia el color a azul (#007AFF) y ajusta el tamaño a 100x100 píxeles. Esto te introduce a cómo manipular elementos básicos.

Este proceso inicial es como preparar tu mesa de trabajo: tener las herramientas a mano y un espacio limpio para crear.

Caso de estudio

Imagina que eres un Product Designer en una startup que está desarrollando una app de fitness. Tu primer encargo es diseñar la pantalla de inicio. En Figma, esto se traduce en:

• Crea un nuevo frame (atajo F) con las dimensiones de un iPhone 14 (390x844 píxeles). Esto establece el contexto del dispositivo.
• Usa la herramienta "Texto" (atajo T) para añadir un título: "FitTrack". Configura la fuente a Inter, tamaño 24, peso semibold, y color negro (#000000).
• Añade un botón usando un rectángulo redondeado: tamaño 200x50 píxeles, radio de borde 25, color verde (#34C759). Superpone texto "Comenzar" en blanco.
• Organiza estos elementos en el lienzo, dejando márgenes consistentes de 20 píxeles desde los bordes. Esto simula una interfaz real que los usuarios verán.

Este caso muestra cómo Figma te permite trasladar ideas rápidamente a un diseño tangible, listo para iterar con tu equipo.

Errores comunes

Al comenzar con Figma, los principiantes suelen cometer estos errores:

• No usar frames desde el inicio: Diseñar directamente en el lienzo sin frames puede llevar a desorganización. Siempre crea un frame para cada pantalla o componente, como usar moldes para hornear en vez de verter la masa directamente en el horno.
• Ignorar la nomenclatura: Dejar elementos con nombres por defecto como "Rectángulo 1" dificulta la colaboración. Renombra todo claramente (ej., "Botón Principal") para mantener un proyecto ordenado.
• Olvidar la cuadrícula y guías: No activar la cuadrícula (atajo Ctrl+G) o guías de alineación resulta en diseños desalineados. Es como construir sin un nivel: todo se ve torcido.
• No explorar los atajos de teclado: Depender solo del mouse ralentiza el trabajo. Aprende atajos básicos como V (selección), R (rectángulo), y T (texto) para ser más eficiente.
• Saltarse la configuración del proyecto: No definir colores o tipografías desde el inicio lleva a inconsistencias. Establece una paleta básica y fuentes en el primer día, similar a cómo un chef prepara sus ingredientes antes de cocinar.

Checklist de dominio

Al final de esta lección, verifica que puedes hacer lo siguiente:

1. Crear una cuenta en Figma y descargar la aplicación de escritorio.
2. Abrir Figma y crear un nuevo archivo con un nombre descriptivo.
3. Dibujar al menos tres formas básicas (rectángulo, círculo, texto) en el lienzo.
4. Cambiar propiedades de un elemento (color, tamaño, posición) usando el panel derecho.
5. Guardar tu trabajo y saber dónde acceder a tus proyectos en la vista de inicio.
6. Identificar las partes clave de la interfaz de Figma (barra de herramientas, lienzo, paneles).
7. Usar un atajo de teclado (ej., R para rectángulo) en lugar del mouse.

Recuerda: Figma es tu lienzo digital; dominar estos fundamentos es el primer paso hacia diseños profesionales.

Configura tu primer proyecto de Figma con elementos básicos

Sigue estos pasos para practicar lo aprendido:

1. Abre Figma y crea un nuevo archivo llamado "Práctica Inicial".
2. En el lienzo, crea un frame para una pantalla de móvil usando las dimensiones 375x812 píxeles (iPhone X).
3. Dentro del frame, dibuja los siguientes elementos:
   • Un rectángulo de 300x60 píxeles, color #1D1D1F (gris oscuro), posicionado a 20 píxeles desde la parte superior.
   • Un círculo de 80x80 píxeles, color #FF3B30 (rojo), centrado horizontalmente en el frame.
   • Un texto que diga "Bienvenido" con fuente Inter, tamaño 18, color #000000, colocado debajo del círculo.
4. Renombra cada elemento en el panel de capas: por ejemplo, "Header", "Icono", "Título".
5. Guarda el proyecto y exporta una imagen PNG del frame para revisar tu trabajo.

Pistas

• Usa la herramienta Frame (F) para crear el contenedor de la pantalla.
• Para centrar el círculo, selecciónalo y usa las guías de alineación que aparecen.
• Recuerda guardar frecuentemente con Ctrl+S (o Cmd+S en Mac).

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Práctica acompañada: Interfaces que se pueden probar

Un flujo, sus estados y un prototipo en Figma. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Práctica: prueba sin explicar

Conecta tres pantallas y un estado de error. Pide a alguien: «Reserva una clase el martes y cambia la fecha antes de confirmar». Observa dónde toca primero, qué lee y si sabe cuándo terminó. No digas el nombre del botón que esperas que use.

Registra los problemas por consecuencia: impide terminar, provoca una elección equivocada o solo añade esfuerzo. Corrige primero los dos primeros. Repite con textos largos y una pantalla estrecha. Si el prototipo no representa el comportamiento del teclado, anota esa limitación para la implementación en lugar de afirmar que ya verificaste la accesibilidad completa.

Comprueba tu entrega

Entrega el flujo, una hoja de componentes y un registro de cambios. Para cada cambio explica el problema observado y la modificación elegida. Por ejemplo: «Dos personas confundieron guardar con confirmar; cambié el texto y mostré un resumen antes de la acción».

• Abrir el cuaderno ilustrado de 7 páginas
• Descargar PDF, ejercicios y plantillas de esta ruta
• Figma: Auto layout · recurso externo
• Figma: consejos de Auto layout · inglés · video complementario externo