Figma se ha convertido en el estándar de la industria para diseño de interfaces, prototipos y colaboración en equipo. Es gratuito para empezar y funciona directamente en el navegador, sin instalaciones. Esta guía te lleva de cero a diseñar tu primera interfaz paso a paso.
¿Qué es Figma y para qué se usa?
Figma es una herramienta de diseño vectorial basada en la nube, especializada en diseño de interfaces de usuario (UI), experiencia de usuario (UX) y prototipado. Lo que lo diferencia de herramientas como Photoshop o Illustrator es que fue creado específicamente para diseñar webs y aplicaciones, con colaboración en tiempo real integrada desde el inicio.
Casos de uso principales:
- Diseño de interfaces web y móvil
- Wireframing y prototipado interactivo
- Sistemas de diseño y bibliotecas de componentes
- Presentaciones y materiales visuales
- Colaboración en tiempo real entre diseñadores, desarrolladores y stakeholders
Plan gratuito de Figma: ¿qué incluye?
El plan gratuito de Figma es muy generoso para empezar:
- 3 proyectos activos (suficiente para empezar)
- Colaboradores ilimitados (con acceso de vista)
- Acceso a Figma Community (miles de plantillas gratis)
- Historial de versiones de 30 días
- FigJam incluido (pizarra colaborativa)
La interfaz de Figma explicada
Panel izquierdo — Capas y Assets
El panel izquierdo tiene dos pestañas:
- Layers (Capas): árbol de todos los elementos del diseño, organizados en frames, grupos y capas individuales
- Assets: componentes, estilos y bibliotecas que tienes disponibles en el proyecto
Área de trabajo central — Canvas
El canvas es el lienzo infinito donde diseñas. Puedes hacer zoom con Ctrl+scroll (o Cmd+scroll en Mac) y navegar con Space+arrastrar.
Panel derecho — Propiedades
Aquí controlas todas las propiedades del elemento seleccionado: posición, tamaño, color de relleno, borde, sombra, tipografía y efectos.
Conceptos fundamentales de Figma
Frames (Marcos)
Los frames son los contenedores principales. Equivalen a "pantallas" o "páginas" de tu diseño. Para crear un frame, pulsa F y elige un tamaño predefinido (iPhone 14, Desktop 1440px, etc.) o personalizado.
Componentes
Los componentes son elementos reutilizables. Cuando editas el componente principal (master), todos sus instancias en el diseño se actualizan automáticamente. Son fundamentales para mantener coherencia en diseños grandes.
Para crear un componente: selecciona el elemento → Ctrl+Alt+K.
Auto Layout
Auto Layout es la función más potente de Figma. Permite crear contenedores que se adaptan automáticamente al tamaño de su contenido, como un flexbox de CSS. Esencial para diseñar componentes responsivos.
Para activarlo: selecciona un frame → en el panel derecho → botón "+" en "Auto layout".
Estilos de color y tipografía
Los estilos te permiten definir una paleta de colores y tipografías reutilizables en todo el proyecto. Si cambias el color primario en el estilo, se actualiza en todos los elementos que lo usan.
Publicidad
Tutorial: Crea tu primer diseño paso a paso
Paso 1 — Nuevo proyecto y frame
- Crea una cuenta gratis en figma.com
- Crea un nuevo proyecto: "Design File"
- Pulsa F → selecciona "Desktop" (1440 x 900) en el panel derecho
Paso 2 — Fondo y estructura
- Selecciona el frame → cambia el color de fondo en "Fill" del panel derecho
- Pulsa R para dibujar un rectángulo (por ejemplo, un header) de 1440 x 80px
- Posiciónalo en X:0, Y:0
Paso 3 — Texto y tipografía
- Pulsa T para herramienta texto → click en el canvas → escribe tu texto
- En el panel derecho cambia la fuente, tamaño y color
- Para crear un estilo de texto: click en los 4 puntos junto a "Text" → "+"
Paso 4 — Prototipo interactivo
- Cambia a la pestaña "Prototype" en el panel derecho
- Selecciona un botón → arrastra la flecha que aparece hacia otro frame
- Configura la interacción: "On Click" → "Navigate to" → selecciona el frame destino
- Pulsa el botón "Play" (▶) para previsualizar el prototipo
Atajos de teclado esenciales
| Atajo | Acción |
|---|---|
| V | Herramienta selección |
| F | Crear frame |
| R | Rectángulo |
| T | Texto |
| Ctrl+G | Agrupar selección |
| Ctrl+Alt+K | Crear componente |
| Ctrl+D | Duplicar |
| Ctrl+Z | Deshacer |
🏆 Figma es la herramienta correcta si...
Eres diseñador web, desarrollador que quiere prototipar interfaces, o emprendedor que quiere diseñar su propia web/app. El plan gratuito es suficiente para proyectos personales y freelance pequeños. Para equipos con más de 2 diseñadores activos que necesiten proyectos ilimitados, el plan Professional a €12/mes por editor es muy razonable.
Preguntas frecuentes
Figma tiene una aplicación de escritorio que permite trabajar sin conexión en archivos locales. Sin embargo, la colaboración en tiempo real y la sincronización en la nube requieren conexión. Para la mayoría de usos, necesitas Internet.
Puedes, pero Figma está optimizado para interfaces digitales, no para diseño gráfico general. Para posts de redes sociales, Canva o Adobe Express serán más rápidos y tienen más plantillas listas para usar. Figma brilla cuando diseñas interfaces de aplicaciones o webs.
Figma tiene una curva de aprendizaje moderada. En 2-3 horas puedes manejar lo básico. Para dominar componentes, auto layout y sistemas de diseño necesitas 20-40 horas de práctica. Figma Community tiene miles de tutoriales gratuitos y la documentación oficial es excelente.