Figma para principiantes: tu primera pantalla de login en 45 minutos

Esto es un tutorial de Figma en español pensado para alguien que nunca lo ha abierto. Yo venía de identidad y print (Illustrator e InDesign), y cuando salté a Figma me pasé los primeros días buscando el "guardar como" que no existe. Este es el artículo que ojalá me hubieran dado: 30% de teoría para que entiendas qué estás viendo, y 70% de práctica real para que salgas con una pantalla hecha. No necesitas saber UI/UX ni programar. Solo una laptop y conexión.

Qué es Figma y por qué todo el mundo lo usa

Definición clara

Figma es una herramienta de diseño de interfaces (UI) que corre en el navegador. La usan diseñadores para crear pantallas de apps y sitios web, armar prototipos navegables, hacer wireframes y entregar diseños a programadores. Es propiedad de Figma Inc. y hoy es prácticamente el estándar de la industria del diseño de producto digital.

Las 4 cosas que lo hacen distinto

• Vive en la web. No instalas nada (aunque hay app de escritorio opcional). Abres el navegador, entras a tu cuenta y tus archivos están ahí, sincronizados.
• Es gratis para empezar. El plan Starter te da herramientas completas sin pagar un peso.
• Colaboración en tiempo real. Varias personas editan el mismo archivo a la vez, con cursores en vivo. Es el "Google Docs del diseño".
• Comunidad enorme. Figma Community está llena de archivos, plantillas y plugins gratuitos que puedes duplicar y usar.

¿Para qué sirve realmente?

Figma cubre buena parte del ciclo de diseño digital: UI (las pantallas), prototipos (conectar pantallas para simular cómo se navega la app), wireframes (bocetos rápidos de estructura) y presentaciones con Figma Slides. Para lluvia de ideas y pizarras colaborativas existe FigJam, su producto hermano. No es para retoque fotográfico ni para ilustración vectorial pesada de print: ahí siguen Photoshop, Illustrator o Affinity.

¿En qué se diferencia de Canva?

Es la duda más común de quien viene de Canva. Resumen honesto:

Aspecto	Canva	Figma
Para qué es	Contenido rápido: posts, flyers, presentaciones	Interfaces digitales: apps y webs
Cómo trabajas	Plantillas listas para editar	Componentes, frames y prototipos propios
Interactividad	Limitada	Prototipos navegables y handoff a código
Curva	Casi nula	Suave al inicio, profunda después

Si tu meta es diseño UI/UX profesional, Figma es el camino. Si necesitas vector para print o identidad, mira nuestra comparativa de Affinity vs Adobe Creative Cloud.

Antes de empezar: instalación, cuenta y configuración mínima

Crear cuenta gratis (web vs app de escritorio)

Entra a figma.com y regístrate con tu correo o tu cuenta de Google. Con eso ya puedes diseñar desde el navegador. Si quieres, descarga también la app de escritorio (Mac y Windows): es la misma Figma, pero con mejor manejo de fuentes locales y ventana propia. Para empezar, el navegador sobra.

Plan free vs pro vs organization

El plan Starter (gratis) incluye herramientas de diseño completas, archivos personales ilimitados y hasta 3 proyectos de equipo. Es más que suficiente para aprender y armar tu portafolio. Los planes Professional y Organization se pagan por editor al mes y agregan archivos de equipo ilimitados, librerías compartidas y controles de equipo: cosas que solo importan cuando trabajas en grupo. No pagues nada todavía.

Configuración inicial recomendada

• Idioma: Figma está principalmente en inglés; los términos técnicos (Frame, Layer, Auto Layout) los verás así y conviene acostumbrarte porque toda la documentación los usa.
• Tema oscuro: si te cansa la vista, actívalo desde el menú de tu cuenta. Es cosmético.
• Atajos: memoriza tres de entrada — F (Frame), T (Texto) y R (Rectángulo). Con eso ya diseñas el 80% del tiempo.

¿Funciona Figma en el celular?

Para diseñar, no: necesitas laptop o desktop. En el celular puedes ver y comentar archivos desde el navegador, y sobre todo usar Figma Mirror (app iOS/Android) para previsualizar en tu teléfono real lo que estás diseñando en la compu, en tiempo real. Eso es oro para revisar tamaños táctiles.

La interfaz de Figma explicada con una analogía

Las cuatro zonas que debes ubicar

• Toolbar superior: tus herramientas (mover, frame, formas, texto, pluma) y los botones de compartir y presentar.
• Panel izquierdo: pestaña Layers (la lista de todo lo que has creado, como capas) y Assets (tus componentes reutilizables).
• Canvas (centro): el lienzo infinito donde diseñas.
• Panel derecho: cambia según lo que selecciones. Pestaña Design (tamaño, color, tipografía), Prototype (conexiones entre pantallas) e Inspect / Dev Mode (medidas y código para programadores).

Frame vs Group vs Section vs Page

Esto confunde a todos al inicio. Una analogía que funciona:

• Frame es como una mesa: el contenedor de una pantalla (un iPhone, una web). Tiene tamaño propio y todo lo que pongas encima vive "sobre la mesa".
• Group es una pila de papeles encima de la mesa: agrupa objetos para moverlos juntos, pero no define un lienzo.
• Section es un piso entero del edificio: agrupa varios frames relacionados (por ejemplo, todas las pantallas del onboarding).
• Page es un edificio completo: una superficie aparte dentro del mismo archivo (por ejemplo, "Wireframes" en una page y "Diseño final" en otra).

Regla práctica: para una pantalla, usa Frame. Para mover cositas juntas, Group. Lo demás llega cuando el proyecto crece.

Plugins, Widgets y Branches

Los plugins son extensiones que automatizan tareas (traer fotos, iconos, texto de relleno). Los widgets son objetos interactivos para FigJam. Las branches (ramas) permiten trabajar una versión paralela del archivo sin tocar el original, igual que en programación. De estos tres, lo único que te importa el día 1 son los plugins.

¿Qué tan difícil es aprender Figma?

Respuesta directa: Figma es fácil de aprender para principiantes. Es de las herramientas de diseño más accesibles que existen porque corre en el navegador, es gratis y su interfaz es intuitiva. Lo básico —crear frames, texto, formas, colores y exportar— se aprende en una sola tarde. Lo que de verdad toma tiempo no es "Figma", sino los conceptos de diseño que vive encima: Auto Layout, Variants y los design systems. Pero nada de eso lo necesitas para hacer tu primera pantalla. Si te abruma, es casi siempre por intentar aprender lo avanzado antes que lo esencial.

• Lo fácil (día 1): navegar, crear frames, escribir texto, poner color, usar formas, exportar.
• Lo que toma tiempo (semanas): Auto Layout, componentes con Variants, prototipos complejos y construir un design system.

¿Cuánto tiempo toma aprender Figma?

Versión corta para quien tiene prisa (y para el "How long does it take to learn Figma?"): tu primera pantalla, 45 minutos; nivel funcional para proyectos reales, de 1 a 4 semanas; nivel junior empleable, de 3 a 6 meses de práctica constante. Desglose por meta:

Tu meta	Tiempo aproximado	Recurso sugerido
Hacer mi primera pantalla	45 minutos	Este tutorial
Diseñar una landing simple	1 semana (~5 h)	Figma Academy + práctica
Hacer un prototipo navegable	2 semanas	Pestaña Prototype
Componentes y design system básico	1 mes	Componentes + Styles
Auto Layout y Variants dominado	2-3 meses	Proyectos repetidos
Nivel "junior empleable"	3-6 meses	Portafolio con 3-4 casos

Tutorial práctico: diseña tu primera pantalla de login en 45 minutos

Aquí está lo bueno. Vas a construir una pantalla de inicio de sesión completa, de principio a fin, lista para tu portafolio. No te saltes pasos. Tiempo activo: 45 minutos. Lo que necesitas: tu cuenta de Figma y nada más.

1. Paso 1 (3 min) — Crea el archivo y añade el frame. En tu panel, clic en + Design file. Ya en el canvas, presiona F (Frame) y, en el panel derecho, elige el preset iPhone 14 & 15 Pro (393 × 852). Aparece tu "mesa" de trabajo. Esto responde a la duda de cómo empezar a crear en Figma: archivo + frame, siempre.
2. Paso 2 (5 min) — Fondo, color y safe area. Selecciona el frame en Layers. En el panel derecho, en Fill, pon un color de fondo (un blanco roto #F7F8FA se ve limpio). Deja un margen mental de unos 24 px en los bordes (la "safe area") para que el contenido no pegue al filo de la pantalla.
3. Paso 3 (8 min) — Logo placeholder e ilustración. Presiona O y dibuja un círculo de 64 × 64 px centrado arriba: es tu logo temporal. ¿Quieres una imagen real? Instala el plugin Unsplash (menú Plugins → buscar → Run) y arrastra una foto. Para un toque humano, un emoji también sirve de placeholder.
4. Paso 4 (10 min) — Campos de input (email y password). Presiona R y dibuja un rectángulo de 345 × 52 px. En el panel derecho dale Corner radius 8, Fill blanco y un Stroke gris claro (#E2E5EA). Encima, con la tecla T, escribe el placeholder "Correo electrónico" en gris. Duplica todo (Cmd/Ctrl + D) para el campo "Contraseña". Para el texto, escoge una fuente con licencia comercial — tenemos un pack de fuentes gratis para diseñadores que puedes usar sin líos.
5. Paso 5 (5 min) — Botón "Iniciar sesión" con Auto Layout. Escribe el texto "Iniciar sesión" con T, selecciónalo y presiona Shift + A: eso aplica Auto Layout, que crea un botón que crece con su texto. En el panel derecho ajusta el padding (16 horizontal, 14 vertical), pon Fill de color (un azul #2D6CFF), texto blanco y radio 8. Acabas de usar el concepto más importante de Figma sin sufrir.
6. Paso 6 (5 min) — Links secundarios. Con T añade "¿Olvidaste tu contraseña?" debajo de los campos, alineado a la derecha y en gris. Abajo del todo, centra "¿No tienes cuenta? Regístrate" con la palabra "Regístrate" en el azul de tu botón para que se vea accionable.
7. Paso 7 (4 min) — Exporta a PNG @2x. Selecciona el frame completo. En el panel derecho, sección Export, clic en +, elige PNG y la escala 2x (para que se vea nítido). Clic en Export. Ya tienes una imagen lista para tu portafolio.
8. Paso 8 (5 min) — Comparte el archivo. Arriba a la derecha, botón Share. Cambia el acceso a "Anyone with the link" en modo can view (solo lectura), copia el enlace y mándalo. Cualquiera podrá ver tu pantalla sin tocar nada.

Cierre del tutorial. Ya tienes tu primera pantalla terminada, exportada y compartible. Para que la repliques desde cero, publicaremos el archivo final en Figma Community con acceso público de solo lectura. Y para repasar offline, prepararemos el manual descargable "Figma para principiantes — manual en PDF" como complemento de este artículo.

Cómo aprender Figma: las 4 rutas según tu perfil

¿Cómo aprender Figma? — la ruta general

La fórmula que funciona para casi todos: entiende la interfaz (ya lo hiciste arriba), haz un proyecto guiado completo (el tutorial de login) y luego repite con un proyecto propio. Aprender Figma es practicar Figma; no hay atajo a hacer pantallas reales. Si quieres acelerar, sigue la ruta rápida de 30 días de más abajo.

¿Cómo aprender Figma desde cero? — si no eres diseñador

Para alguien que no viene del diseño, el stack mínimo es: el curso oficial gratuito Figma Academy, este tutorial paso a paso, el plugin Unsplash para no atorarte con imágenes, y un archivo de práctica (el de login). No agregues nada más al inicio: el exceso de tutoriales paraliza.

¿Cómo aprender Figma rápido? — plan de 30 días

• Semana 1 — Fundamentos: interfaz, frames, texto, color, exportar. Repite el tutorial de login dos veces.
• Semana 2 — Auto Layout: rehaz botones, tarjetas y listas usando solo Auto Layout.
• Semana 3 — Componentes: convierte tus botones en componentes con Variants (estado normal, hover, disabled).
• Semana 4 — Tu propio proyecto: rediseña una pantalla de una app que ya uses, de principio a fin.

Aprender Figma gratis vs cursos pagos

Para empezar, gratis alcanza y sobra: este artículo, Figma Academy y la Community te llevan lejos sin pagar. Un curso estructurado de paga tiene sentido cuando ya hiciste lo básico y quieres orden, feedback y un temario que no tengas que armar tú. Si llegas a ese punto, prepararemos un review honesto del curso oficial Figma 2025 más alternativas como Domestika y Coursera en nuestra guía del curso de Figma para principiantes.

Si vienes de Adobe XD o Sketch: lo que cambia

Si ya diseñabas en otra herramienta, la buena noticia es que casi todo tiene equivalente directo. La curva es de vocabulario, no de concepto.

Concepto	XD / Sketch	Figma
Lienzo de pantalla	Artboard	Frame
Elemento reutilizable	Símbolo / Component	Component + Variants
Prototipo	Pestaña Prototype	Pestaña Prototype (similar)
Extensiones	Plugins limitados	Plugins (catálogo enorme)
Colaboración	Vía InVision/links	Tiempo real nativo
Archivo	.xd / .sketch (local)	.fig (en la nube)
Plataforma	XD: Win/Mac · Sketch: solo Mac	Navegador (cualquier OS)

En 2026 la migración es prácticamente obligada: Adobe descontinuó XD (sin desarrollo activo desde 2023) y Sketch sigue siendo solo para Mac, lo que lo deja fuera para equipos mixtos. Si además haces print o identidad, el stack moderno es Figma para UI y otra herramienta vectorial para impresión — mira nuestro tutorial de Affinity Designer en español para esa otra mitad.

Stack mínimo viable de aprendizaje

"Lo que necesitas y nada más" para no abrumarte. Seis elementos, cero relleno:

• Figma free: tu herramienta principal, gratis.
• Figma Academy: el curso oficial gratuito, ideal para fundamentos.
• 3 plugins del día 1: Unsplash (fotos), Iconify (iconos) y Content Reel (texto y datos de relleno). Cuando quieras más, tenemos la guía de los mejores plugins de Figma 2026 organizados por flujo de trabajo.
• 1 archivo de práctica: el de este tutorial. Reusa, rompe y rehaz.
• 1 fuente gratis con licencia comercial: de nuestro pack de fuentes gratis, para que puedas publicar sin problemas legales.
• 1 hub de recursos: nuestro hub de recursos gratis para diseño gráfico para cuando necesites mockups, paletas o assets.

Glosario de términos UI/UX que verás en Figma

• Auto Layout: sistema que hace que un contenedor crezca y reacomode su contenido automáticamente. Esencial para botones y listas.
• Boolean: operación que combina formas (unir, restar, intersectar) para crear una nueva.
• Component: elemento maestro reutilizable; si lo editas, se actualizan todas sus copias.
• Constraint: regla que define cómo se comporta un objeto al cambiar el tamaño de su frame (anclado a izquierda, centrado, etc.).
• Frame: contenedor de una pantalla o sección. La "mesa" de tu diseño.
• Instance: copia de un componente que hereda sus cambios.
• Mask: recorta un objeto usando la forma de otro.
• Page: superficie independiente dentro de un mismo archivo.
• Plugin: extensión que agrega funciones (imágenes, iconos, automatizaciones).
• Prototype: conexión entre pantallas para simular la navegación de la app.
• Section: agrupación de varios frames relacionados.
• Style: color, tipografía o efecto guardado para reutilizar con un clic.
• Variable: valor reutilizable (color, número, texto) que alimenta tokens y temas.
• Variant: variaciones de un mismo componente (estado normal, hover, disabled) agrupadas.
• Widget: objeto interactivo, sobre todo en FigJam.

Próximos pasos para la semana que viene: 1) repite el tutorial de login sin mirar las instrucciones; 2) instala tus tres plugins base y explora la guía completa de plugins; 3) elige una app que uses a diario y rediséñale una pantalla real; 4) si además trabajas identidad, branding o print, complementa tu stack con nuestro tutorial de Affinity Designer — Figma para UI y Affinity para impresión es un combo difícil de superar en 2026. Empieza hoy: en 45 minutos ya tienes una pantalla más que ayer.