Tutorial de Figma para Principiantes: Guía Completa 2026

Si estás empezando en el mundo del diseño digital, es probable que el nombre Figma aparezca constantemente. Y con razón: es la herramienta que usan los equipos de diseño en empresas como Google, Airbnb, Microsoft y cientos de startups de todo el mundo. Este tutorial paso a paso te lleva desde crear tu cuenta hasta publicar tu primer prototipo interactivo.

Antes de entrar en los pasos, te recomendamos leer nuestra guía completa sobre qué es Figma y sus principales ventajas, que cubre el contexto y los casos de uso. Este tutorial es el complemento práctico de esa guía.

¿Qué necesitas saber antes de empezar con Figma?

Figma no requiere conocimientos previos de diseño para empezar, pero tener clara la siguiente base te ahorrará mucho tiempo:

• Diseño vectorial vs. raster: Figma trabaja principalmente con gráficos vectoriales, lo que significa que tus diseños se pueden escalar sin perder calidad. Si nunca has oído hablar de esto, lee primero nuestra guía sobre gráficos vectoriales.
• Nociones básicas de UI: Saber qué es un botón, una tarjeta, un formulario o una barra de navegación te ayudará a entender para qué se usan los frames.
• Una cuenta de Google o email: El registro en Figma es gratuito y solo necesitas un correo electrónico.
• Conexión a internet estable: Figma funciona en la nube. Aunque tiene modo offline limitado en la app de escritorio, lo mejor es trabajar conectado.

No necesitas instalar nada para empezar. Puedes abrir Figma ahora mismo en figma.com desde Chrome, Firefox o Edge.

Paso 1: Crear tu cuenta y entender la interfaz de Figma

Ve a figma.com y haz clic en «Registrarse». Puedes usar tu cuenta de Google o un email. Una vez dentro, llegas al panel de inicio (Home Dashboard), donde se muestran tus archivos recientes, los proyectos en los que colaboras y las plantillas de la comunidad.

Para crear tu primer diseño, haz clic en el botón «+» o en «Nuevo archivo de diseño». Esto abre el editor de Figma, que se divide en cuatro zonas principales:

• Barra de herramientas (toolbar): En la parte superior. Contiene las herramientas de selección, frame, formas, lápiz, texto e imagen.
• Panel izquierdo — Capas y activos: Muestra la jerarquía de todos los elementos del diseño (layers) y los componentes reutilizables (assets).
• Canvas (lienzo central): El área de trabajo infinita donde diseñas. Puedes hacer zoom con Ctrl+scroll o con los atajos + y -.
• Panel derecho — Propiedades: Muestra y permite editar las propiedades del elemento seleccionado: tamaño, posición, color de relleno, tipografía, efectos, etc.

Dedica los primeros 15 minutos a explorar la interfaz sin presión. Mueve el canvas, haz zoom, selecciona y deselecciona objetos. Familiarizarte con la navegación es el primer paso real.

Paso 2: Frames, capas y el panel de capas

En Figma, un frame es el equivalente a una «artboard» o página de diseño. Es el contenedor dentro del cual diseñas una pantalla, una tarjeta o cualquier componente. Para crear un frame, usa la tecla F y luego arrastra en el canvas, o elige un tamaño predefinido desde el panel derecho (iPhone 14, Desktop 1440px, etc.).

Dentro de cada frame puedes tener capas anidadas: formas, textos, imágenes y otros frames. El panel de capas (izquierda) muestra esta jerarquía. Puedes:

• Renombrar capas haciendo doble clic sobre el nombre (imprescindible para proyectos grandes).
• Agrupar capas con Ctrl+G.
• Bloquear una capa para que no se mueva accidentalmente (clic derecho → Bloquear).
• Ocultar capas temporalmente con el icono de ojo.

Trabajar con capas bien nombradas y organizadas no es un capricho estético: cuando un archivo tiene 50 o 100 pantallas, la organización es lo que separa un diseñador amateur de uno profesional.

Paso 3: Herramientas básicas de Figma (forma, lápiz, texto, imagen)

Desde la barra de herramientas superior puedes acceder a las herramientas fundamentales:

• Herramienta de selección (V): Para seleccionar, mover y redimensionar objetos. Es tu herramienta predeterminada.
• Frame (F): Para crear frames o artboards.
• Formas (R para rectángulo, O para elipse): Dibuja formas básicas. Mantén Shift mientras arrastras para crear cuadrados o círculos perfectos.
• Lápiz / Pen (P): Para crear trazados vectoriales personalizados con nodos y curvas Bézier. Funciona igual que la pluma de Illustrator o Photoshop.
• Texto (T): Crea cuadros de texto. En el panel derecho puedes cambiar fuente, tamaño, interlineado, alineación y color. Figma incluye todas las Google Fonts por defecto.
• Imagen: Arrastra una imagen desde tu escritorio al canvas, o usa el menú Insertar → Imagen.

Practica creando un botón simple: un rectángulo con bordes redondeados (corner radius en el panel derecho) y un texto encima centrado. Luego agrupa ambos elementos (Ctrl+G) o conviértelos en un frame. Ya tienes tu primer componente UI.

Paso 4: Componentes y Auto Layout

Los componentes son el superpoder de Figma. Un componente es un elemento reutilizable: lo creas una vez y lo usas en cientos de pantallas. Si cambias el componente original (llamado «componente maestro» o «main component»), todos los usos del componente en tu diseño se actualizan automáticamente.

Para crear un componente, selecciona un frame o grupo y usa el atajo Ctrl+Alt+K (o clic derecho → «Crear componente»). El icono cambia a un rombo morado. Las copias del componente se llaman instancias.

Auto Layout es igualmente poderoso: permite que un frame se redimensione automáticamente según su contenido, como un flex container en CSS. Para activarlo, selecciona un frame y presiona Shift+A. Puedes configurar dirección (horizontal/vertical), espaciado entre elementos y padding interno desde el panel derecho.

Combinar componentes con Auto Layout te permite crear sistemas de diseño escalables donde un botón se adapta automáticamente al largo del texto, o una lista de tarjetas se reordena sola cuando añades un elemento.

Paso 5: Prototipos interactivos en Figma

Una vez que tienes varias pantallas diseñadas, puedes conectarlas para simular la navegación real de una app o sitio web. Esto se hace desde la pestaña «Prototype» (panel derecho, junto a «Design» e «Inspect»).

Para crear una conexión entre pantallas:

1. Selecciona el elemento que actuará como trigger (un botón, un enlace, etc.).
2. En el panel Prototype, haz clic en «+» o arrastra la flecha que aparece al pasar el cursor por el borde derecho del elemento.
3. Conecta esa flecha al frame de destino.
4. Elige la interacción: On Click, On Hover, On Drag, etc.
5. Elige la animación: Instant, Dissolve, Smart Animate, Slide In, etc.

Para previsualizar el prototipo, haz clic en el botón ▶ (Play) en la esquina superior derecha. Se abre una nueva ventana donde puedes navegar por las pantallas como si fuera la app real. También puedes compartir el enlace del prototipo con clientes o stakeholders sin que necesiten cuenta de Figma.

Paso 6: Colaboración en tiempo real y comentarios

Una de las mayores ventajas de Figma sobre herramientas como Sketch es la colaboración en tiempo real. Múltiples personas pueden trabajar en el mismo archivo simultáneamente. Verás los cursores de tus compañeros moverse en tiempo real, identificados con su nombre.

Para invitar a alguien a un archivo, usa el botón «Share» en la esquina superior derecha. Puedes dar acceso de «Can view» (solo ver), «Can comment» o «Can edit». Los comentarios se añaden con la herramienta de comentarios (C) y permiten dejar feedback específico directamente sobre el diseño, con la opción de resolver los hilos cuando se implementan los cambios.

FigJam es la herramienta de pizarra colaborativa de Figma, ideal para sesiones de brainstorming, mapas de usuario y wireframes rápidos. Está integrada en el mismo ecosistema y es gratuita para uso básico.

Figma gratis vs Figma de pago: ¿qué plan necesitas?

Figma ofrece planes para distintos perfiles. Esta es la comparativa actualizada 2026:

Plan Figma	Precio	Límites principales	Para quién
Starter (Free)	Gratis	3 archivos Figma activos, 3 proyectos, 1 FigJam activo	Estudiantes y proyectos personales
Professional	$15/editor/mes	Archivos y proyectos ilimitados, historial de versiones, bibliotecas de equipo	Freelancers y profesionales independientes
Organization	$45/editor/mes	Organización multi-equipo, SSO, controles de permisos avanzados	Empresas medianas y grandes equipos de diseño
Enterprise	Precio personalizado	Todo de Organization + soporte dedicado, SLA, auditoría avanzada	Grandes corporaciones y uso crítico

Para aprender y hacer proyectos propios, el plan Starter gratuito es más que suficiente. El límite de 3 archivos activos es la única restricción real, pero puedes archivar proyectos para liberar espacio.

Proyectos para practicar Figma desde cero

La mejor forma de aprender Figma es haciendo. Aquí tienes una progresión de proyectos ordenados por dificultad:

1. Tarjeta de perfil de usuario: Avatar, nombre, bio y botón de seguir. Practica rectángulos, texto, imágenes y alineación.
2. Pantalla de login: Campo de email, contraseña y botón. Practica frames, Auto Layout y estados de componentes.
3. Pantalla de inicio de una app de recetas: Header con búsqueda, categorías horizontales y grid de tarjetas. Practica componentes y repetición.
4. Flujo completo de onboarding: 4-5 pantallas conectadas con prototipo. Practica animaciones y navegación.
5. Rediseño de una app real: Elige tu app favorita y rediseña una pantalla mejorando la jerarquía visual. Practica criterio de diseño y Auto Layout avanzado.

Cuando completes estos proyectos, tendrás una base sólida para explorar herramientas complementarias como Adobe Illustrator para ilustración vectorial o las herramientas de diseño gráfico del ecosistema profesional.

Preguntas Frecuentes sobre Figma para Principiantes

¿Figma es completamente gratis?

Sí, el plan Starter de Figma es gratuito y sin límite de tiempo. Incluye hasta 3 archivos de diseño activos y 3 proyectos, lo que es suficiente para aprender y hacer proyectos personales. Los planes de pago (desde $15/mes) son necesarios cuando necesitas archivos ilimitados, bibliotecas de equipo compartidas o funciones avanzadas de organización.

¿Figma funciona sin internet?

Figma requiere conexión a internet para la mayoría de sus funciones, ya que guarda los archivos en la nube en tiempo real. La aplicación de escritorio tiene un modo offline limitado que permite continuar trabajando en archivos ya abiertos, pero no puedes abrir nuevos archivos ni sincronizar cambios hasta reconectarte.

¿Cuánto tiempo lleva aprender Figma desde cero?

Con dedicación consistente de 1-2 horas al día, puedes dominar los fundamentos de Figma en 4-6 semanas. La curva de aprendizaje inicial es suave comparada con Adobe Illustrator o Photoshop. Lo que más tiempo lleva no es la herramienta en sí, sino desarrollar el criterio de diseño UI/UX para tomar buenas decisiones visuales.

¿Figma reemplaza a Adobe XD?

En la práctica, sí. Adobe anunció el fin del desarrollo activo de Adobe XD en 2023, redirigiendo a los usuarios hacia su ecosistema de Creative Cloud. Figma es hoy el estándar de facto para diseño UI/UX. Cabe recordar que Adobe intentó adquirir Figma por 20.000 millones de dólares en 2022, pero la operación fue bloqueada por reguladores de la UE en 2023 por preocupaciones de competencia.

¿Puedo usar Figma para diseño gráfico general, no solo apps?

Figma está optimizado para diseño de interfaces digitales (webs, apps, sistemas de diseño), pero también se puede usar para presentaciones, posts de redes sociales, banners y otros materiales de diseño gráfico. Para ilustración vectorial avanzada o trabajo con fotografía, Adobe Illustrator y Adobe Photoshop siguen siendo las herramientas de referencia.