CONCEPTO CLAVE: La implementación de componentes y navegación en Figma es el corazón de cualquier diseño de interfaz moderno. Un componente bien diseñado no es simplemente un elemento visual, sino un bloque reutilizable que mantiene la consistencia visual y funcional de toda tu aplicación. En esta lección aprenderás a crear un sistema de componentes robusto y a diseñar una navegación intuitiva que mejore la experiencia del usuario en tu aplicación móvil.

¿Qué son los componentes en Figma?

Los componentes en Figma son elementos reutilizables que puedes crear una sola vez y utilizar en múltiples lugares de tu diseño. Imagina que necesitas crear un botón en 20 pantallas diferentes de tu app. En lugar de diseñar ese botón 20 veces (y tener que cambiarlo 20 veces si decides modificar su apariencia), creas un solo componente y lo instancias en todas las pantallas necesarias.

Figma utiliza un sistema jerárquico de componentes que incluye:

Componentes principales (Master): Son el diseño original que sirve como fuente de verdad. Cualquier cambio en el componente principal se refleja automáticamente en todas sus instancias.
Instancias: Son copias del componente principal que mantienen un vínculo con el original. Puedes personalizar propiedades específicas sin afectar el master.
Variants (Variantes): Permiten crear múltiples versiones de un mismo componente, como diferentes estados (hover, pressed, disabled) o tamaños (small, medium, large).
Properties (Propiedades): Atributos editables de las instancias como texto, colores o iconos que pueden modificarse sin perder la conexión con el master.

📌 Nota importante: Figma organiza los componentes en una estructura de páginas y marcos. Los componentes se guardan típicamente en una página dedicada llamada "Components" o "Design System" para mantener tu espacio de trabajo organizado y facilitar el trabajo en equipo.

Creando tu biblioteca de componentes

Para empezar a implementar componentes en tu proyecto de aplicación móvil, necesitas establecer una biblioteca de componentes bien organizada. Esta biblioteca actuará como la fuente oficial de verdad para todos los elementos de tu interfaz.

Paso 1: Define tu sistema de diseño base

Antes de crear componentes específicos, es fundamental establecer los fundamentos de tu sistema de diseño. Esto incluye:

Paleta de colores: Define colores primarios, secundarios, de fondo, de texto y de estado (éxito, error, advertencia). Registra los códigos hexadecimales o utiliza variables de Figma.
Tipografía: Establece las fuentes, tamaños, pesos y espaciados para títulos, subtítulos, cuerpo de texto, captions y botones.
Espaciado: Define un sistema de rejilla y espaciado consistente. Los múltiplos de 4 u 8 píxeles son estándar en diseño móvil.
Sombras y bordes: Crea estilos de sombra predefinidos y radios de borde para mantener consistencia visual.
Iconografía: Selecciona un conjunto de iconos consistente o crea los tuyos propios con las mismas especificaciones.

💡 Tip práctico: Utiliza los Styles de Figma (estilos de color, texto y efectos) desde el principio. Esto te permitirá actualizar colores globales o tipografía una sola vez y ver los cambios reflejados en todo tu proyecto automáticamente.

Paso 2: Componentes atómicos vs. moleculares

Siguiendo el concepto de diseño atómico, puedes estructurar tus componentes en niveles de complejidad:

Nivel	Componentes	Ejemplos en app móvil
Atómico	Elementos básicos indivisibles	Botones, inputs, iconos, badges, avatares
Molecular	Grupos de átomos funcional	Barra de búsqueda, card de producto, input con label
Orgánico	Grupos complejos de moléculas	Header de navegación, lista de items, modal completo
Template	Estructuras de página completas	Pantalla de perfil, feed principal, carrito de compras

Componentes esenciales para aplicaciones móviles

Existen ciertos componentes que prácticamente toda aplicación móvil necesita. Vamos a profundizar en los más importantes:

1. Botones (Buttons)

Los botones son quizás el componente más utilizado y crítico en cualquier interfaz. Un buen sistema de botones incluye:

Variantes de tipo: Primary (lleno), Secondary (outline), Tertiary (texto), Ghost (minimalista)
Estados: Default, Hover, Pressed, Disabled, Loading
Tamaños: Small (32px altura), Medium (44px), Large (52px)

Estructura de componente botón:
├── Button (Componente principal)
│   ├── variants: [primary, secondary, tertiary, ghost]
│   ├── size: [small, medium, large]
│   ├── state: [default, hover, pressed, disabled, loading]
│   └── properties:
│       ├── label (texto del botón)
│       ├── leftIcon (opcional)
│       └── rightIcon (opcional)

⚠️ Error común: Muchos diseñadores crean un componente de botón separado para cada variante en lugar de usar properties y variants. Esto dificulta el mantenimiento. Utiliza el sistema de variantes de Figma para mantener todos los estados y tipos en un solo componente maestro.

2. Navegación inferior (Bottom Navigation)

La navegación inferior es estándar en aplicaciones móviles modernas. Debe incluir:

4-5 elementos máximo para evitar sobrecarga visual
Iconos representativos con labels claros
Indicador visual del item activo (típicamente un iconofilled y color primario)
Badge o indicador para notificaciones

3. Cards y listas

Las cards son fundamentales para mostrar contenido estructurado. Una card de producto típica incluye:

Estructura de Card de Producto:
├── Container (fondo, sombra, border-radius)
│   ├── Image (imagen del producto)
│   ├── Content Wrapper
│   │   ├── Title (nombre del producto)
│   │   ├── Subtitle (descripción breve)
│   │   ├── Price (precio actual)
│   │   ├── Original Price (tachado si hay descuento)
│   │   └── Rating (estrellas + número de reseñas)
│   └── Action (botón agregar, icono favorito)

4. Formularios y campos de entrada

Los inputs de formulario deben manejar múltiples estados:

Default: Estado normal sin interacción
Focused: Borde con color de énfasis, label flotante
Filled: Con contenido del usuario
Error: Borde rojo, mensaje de error visible, icono de alerta
Disabled: Gris, sin interacción posible
Success: Borde verde con icono de check (para validación correcta)

💡 Tip práctico: Para los campos de formulario, utiliza la funcionalidad de Auto Layout de Figma. Esto permite que el campo se expanda automáticamente si el texto es más largo de lo esperado, manteniendo siempre el espaciado correcto.

Sistema de navegación en Figma

Diseñar una navegación efectiva es crucial para el éxito de tu aplicación. Figma ofrece varias herramientas para prototipar y documentar la navegación.

Prototipado de navegación

La pestaña de Prototype en Figma te permite crear conexiones entre pantallas que simulan la navegación real de la app:

Tap: Para botones, cards clickeables, elementos de lista
Drag: Para gestos de swipe, scrolls, sliders
Open/Close: Para modales, menús desplegables, overlays
Navigate: Entre frames usando transiciones animadas

📌 Transiciones recomendadas: Para navegación entre pantallas principales, usa "Move In" o "Slide". Para modales o overlays, "Overlay" con fade o scale. Evita transiciones muy elaboradas que puedan confuse al usuario en un prototipo funcional.

Organizando las pantallas

Una estructura de frames organizada facilita la navegación del prototipo:

Estructura de páginas recomendada:
├── 00_Assets (componentes, íconos, imágenes)
├── 01_Styles (estilos de color, texto, efectos)
├── 02_Screens (todas las pantallas de la app)
│   ├── Onboarding (pantallas de bienvenida)
│   ├── Auth (login, registro, recuperación)
│   ├── Home (pantalla principal)
│   ├── Search (búsqueda y resultados)
│   ├── Profile (perfil de usuario)
│   └── Settings (configuración)
├── 03_Flows (rutas de usuario completas)
│   ├── Flow_Registro
│   ├── Flow_Compra
│   └── Flow_Búsqueda
└── 04_Prototype (vista de prototipado)

⚠️ Cuidado: No subestimes la importancia de nombrar tus frames descriptivamente. Un proyecto con 50+ pantallas necesita nombres como "Home_Feed_Empty" o "Product_Detail_Scrolled" en lugar de simplemente "Frame 1" o "Screen 23".

Componentes interactivos avanzados

Para crear prototipos más realistas, puedes implementar componentes con estados interactivos:

Expandir: Cómo crear un toggle switch interactivo

Un toggle switch es un componente que cambia entre estados encendido/apagado. Para crearlo:

Crea un rectángulo redondeado para el track (pista)
Añade un círculo para el thumb (botón deslizable)
Convierte todo en un componente
En el prototipo, conecta el estado "off" al estado "on" con un evento Tap
Configura la animación con Smart Animate para que el thumb se deslice suavemente
Conecta el estado "on" de vuelta al "off" para crear la interacción bidireccional

También puedes usar variantes: una variante "off" y otra "on", conectadas por tap con transición smart animate.

Expandir: Implementando un bottom sheet desplegable

Los bottom sheets son paneles que se deslizan desde abajo. Pasos para implementarlos:

Crea el frame del bottom sheet cerrado (solo el handle visible)
Crea el frame del bottom sheet abierto (con todo el contenido)
Posiciona ambos frames en el mismo lugar
En el prototipo, conecta el cerrado al abierto con Drag (dirección arriba)
Usa Smart Animate con easing para una animación fluida
Conecta el abierto al cerrado con drag hacia abajo o tap en el overlay oscuro

Variables y propiedades personalizadas

Figma ha introducido Variables que permiten crear diseños más dinámicos y similares a código real. Las variables pueden almacenar:

Colores para temas (claro/oscuro)
Valores de espaciado
Tamaños de fuente
Radios de borde
Valores numéricos reutilizables

Ejemplo de uso de variables:
Variable Collections:
├── Color Semantics
│   ├── text-primary: #1A1A1A
│   ├── text-secondary: #6B7280
│   ├── background-primary: #FFFFFF
│   ├── background-secondary: #F3F4F6
│   └── accent-primary: #3B82F6
├── Spacing
│   ├── spacing-xs: 4
│   ├── spacing-sm: 8
│   ├── spacing-md: 16
│   ├── spacing-lg: 24
│   └── spacing-xl: 32
└── Border Radius
    ├── radius-sm: 4
    ├── radius-md: 8
    ├── radius-lg: 16
    └── radius-full: 9999

💡 Tip profesional: Crea una colección de variables para cada modo de tu app (light, dark, high contrast). Esto te permitirá cambiar todo el tema de tu diseño instantáneamente, exactamente como lo haría un desarrollador con CSS variables.

Componentes compartidos con el equipo

Figma permite publicar bibliotecas de componentes que todo tu equipo puede utilizar:

Crea una biblioteca: En el archivo con tus componentes, ve a Assets > Publish Library
Documenta: Añade descripciones y guidelines de uso a cada componente
Publica: Nombra tu biblioteca con un nombre descriptivo y profesional
Activa: Los teammates van a Assets > Libraries y activan tu biblioteca
Actualiza: Cuando modifiques componentes, vuelve a publicar y el equipo recibirá las actualizaciones

📌 Best practice: Mantén tu biblioteca principal en un archivo separado del proyecto principal. Esto facilita el versionado independiente y evita corromper diseños existentes al actualizar componentes.

Errores comunes y cómo evitarlos

Error común	Consecuencia	Solución
No usar Auto Layout	Componentes rígidos que no escalan bien	Aplica Auto Layout a todos los componentes
Componentes muy específicos	Dificultad para reutilizar, proliferación de variants	Haz componentes genéricos y configurables
Ignorar los estilos de Figma	Cambios globales son tediosos y propensos a errores	Define y usa estilos desde el inicio
No documentar componentes	El equipo no sabe cómo usarlos correctamente	Añade descripciones y ejemplos en cada componente
Prototipo sin flujo definido	Dificulta la validación con usuarios	Documenta los flows principales antes de prototipar
Nombres poco descriptivos	Componentes difíciles de encontrar y mantener	Usa convenciones de nomenclatura consistentes

⚠️ Advertencia importante: Nunca destruyas la instancia de un componente principal sin antes verificar que no hay designs activos dependiendo de él. Esto puede causar errores difíciles de rastrear en todo tu proyecto.

Optimizando el rendimiento de tu archivo

Los archivos de Figma pueden volverse lentos con muchos componentes. Para optimizar:

Detach instances solo cuando sea necesario y temporal
Evita rasterizar vectores innecesariamente
Usa componentes en lugar de duplicar elementos
Organiza en páginas y cierra las que no uses
Reduce images antes de importarlas a Figma
Limita los estilos duplicados

💡 Tip de eficiencia: Usa el plugin Iconify para insertar miles de iconos vectoriales directamente sin saturar tu biblioteca. Los iconos se cargan on-demand, manteniendo tu archivo ligero.

Handoff para desarrolladores

Figma facilita la colaboración con desarrolladores a través de:

Inspect panel: Muestra CSS, propiedades y especificaciones de cualquier elemento
Exportar assets: En múltiples formatos (SVG, PNG, JPG, PDF)
Comments: Para comunicación directa y resolve de dudas
Developer handoff: Especificaciones exactas de spacing, colores y tipografía

Expandir: Checklist de handoff para desarrolladores

Antes de entregar tu diseño, verifica:

✓ Todos los componentes tienen variantes completas (estados, tamaños)
✓ Los colores usan variables o estilos de Figma
✓ Las tipografías usan estilos de texto
✓ Cada pantalla tiene annotations de interacción
✓ Los flows están documentados
✓ Los assets están exportados y nomeclados correctamente
✓ Existe documentación de uso de componentes
✓ Los spacing y sizing siguen un sistema consistente

La diferencia entre un buen diseño y uno excelente está en la atención al detalle. Cada componente, cada estado, cada interacción debe sentirse intencional y coherente con el resto de la experiencia.

Resumen y próximos pasos

En esta lección hemos cubierto:

La importancia de los componentes como bloques fundamentales del diseño
Cómo estructurar una biblioteca de componentes organizada
Los componentes esenciales para aplicaciones móviles
Técnicas de prototipado de navegación en Figma
Uso de variables para temas dinámicos
Colaboración y publicación de componentes
Optimización y handoff para desarrolladores

🧠 Quiz rápido

Pregunta 1: ¿Cuál es la principal ventaja de usar el sistema de variantes (Variants) en Figma en lugar de crear componentes separados para cada estado?

a) Los variantes ocupan menos espacio en el panel de assets
b) Permiten mantener todos los estados y tipos de un componente en un solo lugar, facilitando el mantenimiento y la organización
c) Los variantes se sincronizan automáticamente con otros archivos
d) Los variantes permiten exportar a más formatos

✅ Respuesta correcta: B. El sistema de variantes permite gestionar múltiples versiones de un componente (estados, tamaños, tipos) en un solo componente maestro, lo que facilita enormemente el mantenimiento. Cuando necesitas cambiar el diseño base, solo lo haces una vez y todas las variantes se actualizan.

Pregunta 2: ¿Por qué es importante usar Auto Layout en los componentes de formulario como inputs y campos de texto?

a) Solo sirve para hacer el diseño más bonito visualmente
b) No es importante, solo es una opción estética
c) Permite que los componentes se adapten dinámicamente al contenido, expandiéndose o contrayéndose según sea necesario y manteniendo espaciado consistente
d) Solo funciona en Figma, no tiene relación con el desarrollo

✅ Respuesta correcta: C. Auto Layout permite que los componentes sean responsivos dentro de Figma, igual que lo serían en código con CSS flexbox. Un input con Auto Layout puede expandirse si el texto es largo, o mantener proporciones perfectas si es corto, sin necesidad de crear múltiples variantes.