# Prototipado Rapido Figma Logica Condicional Y Simulaciones De Al > El Prototipado Rápido en Figma es la capacidad de crear simulaciones interactivas de alta fidelidad que se comportan como productos reales. No es solo "enlazar pantallas"; es Ingeniería de la Validación Temprana. Úsala para tareas de Generación de Contenido: figma, prototyping, interaction-design, smart-animate, ux-validation, variables. - Skill: `jesusgarciafernandez/prototipado-rapido-figma-logica-condicional-y-simulaciones-d` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add jesusgarciafernandez/prototipado-rapido-figma-logica-condicional-y-simulaciones-d` - Raw SKILL.md: https://api.skillmd.com/api/skills/jesusgarciafernandez/prototipado-rapido-figma-logica-condicional-y-simulaciones-d/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - License: CC BY-NC-SA 4.0 - Author: jesusgarciafernandez (https://skillmd.com/u/jesusgarciafernandez) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jesusgarciafernandez/prototipado-rapido-figma-logica-condicional-y-simulaciones-d --- ## 0. Filosofía Human-Centric AI *Esta habilidad materializa ideas en experiencias tangibles antes de ser construidas, utilizando la tecnología para validar el propósito humano y reducir el desperdicio de esfuerzo creativo.* **El Rol del Humano:** El Prototipador Maestro debe ser un "Simulador de Realidades Digitales". La IA puede generar pantallas UI, automatizar el auto-layout y sugerir flujos de navegación, pero solo el humano puede imbuir al prototipo de la "fricción" o "fluidez" necesaria para un test de usabilidad honesto, decidir qué nivel de fidelidad es el adecuado para cada fase del proyecto y asegurar que la simulación refleje fielmente el modelo mental del usuario, permitiendo fallar rápido y barato para triunfar con propósito. **Empoderamiento:** Usamos la tecnología para automatizar la creación de componentes repetitivos y la lógica de variables complejas, permitiendo que el experto se centre en la orquestación de la experiencia y en la captura de insights críticos durante la validación. --- ## 1. Descripción Detallada El Prototipado Rápido en Figma es la capacidad de crear simulaciones interactivas de alta fidelidad que se comportan como productos reales. No es solo "enlazar pantallas"; es **Ingeniería de la Validación Temprana**. El enfoque v2.0 incorpora la **Prototipación Avanzada con Variables y Lógica Condicional**, donde se pueden simular carritos de compra reales, sistemas de login, estados dinámicos y animaciones quirúrgicas (Smart Animate), permitiendo ahorrar miles de euros en desarrollo al validar la UX completa antes de escribir una sola línea de código. ## 2. Escenarios de Aplicación - **Validación de Concepto con Stakeholders:** Presentación de ideas "que funcionan" para obtener aprobación de dirección o inversión. - **Sesiones de User Testing de Alta Fidelidad:** Observación del comportamiento real del usuario ante un sistema que parece final (Maze/Test de guerrilla). - **Traspaso Técnico (Handoff) Impecable:** Demostración exacta a los desarrolladores de cómo deben ser las transiciones, microinteracciones y lógica de errores. - **Iteración de Flujos Complejos (SaaS/Fintech):** Prueba de lógica condicional (Ej: "Si el usuario tiene > 100€, muestra X, si no Y") dentro de Figma. - **Demos de Venta y Preventa:** Creación de versiones personalizadas de la App para clientes específicos en cuestión de horas. ## 3. Requisitos de Implementación - **Maestría en Figma Pro:** Uso avanzado de Componentes, Variantes, Propiedades de instancia y Auto Layout (Resposividad nativa). - **Control de Prototipado Avanzado:** Dominio de Variables (Strings, Booleans, Numbers, Colors), Expresiones y Lógica Condicional (`if/else`). - **Uso Crítico de Smart Animate:** Capacidad de crear transiciones fluidas y naturales calculando jerarquías de nombres de capas. --- ## 4. Diferencial: Enlaces Básicos vs. Prototipado Sistémico v2.0 | Dimensión | Enfoque "Ir de A a B" | Prototipado de Alta Densidad (v2.0) | | :--- | :--- | :--- | | **Lógica** | Lineal y rígida. | Condicional y Dinámica (Variables). | | **Realismo** | Pantallas estáticas. | Datos reales cambiantes en tiempo real. | | **Animación** | Disolvencias genéricas. | Movimiento coreografiado (Smart Animate). | | **Componentes** | Piezas sueltas. | Variantes sistémicas e interactivas. | --- ## 5. Instrucciones y Pasos Detallados (Protocolo Maestro) ### Fase 1: Arquitectura de Componentes Interactivos y Variables **Objetivo:** Crear la "maquinaria" del prototipo para que sea fácil de escalar. 1. **Creación de Componentes Vivos:** Define componentes que ya tengan sus estados (Hover, Pressed, Selected) integrados para no repetir enlaces. 2. **Configuración de Variables de Estado:** Crea variables para el nombre del usuario, el saldo del carrito o el estado del login para una simulación real. **Prompt Maestro de Dirección de Prototipado:** ```text Actúa como Master Prototyping Specialist y Especialista en Figma Avanzado. Para el flujo de [FLUJO], realiza el siguiente plan de simulación: 1. Define los 'Puntos de Interacción' críticos: [Ej: Formulario de pago y confirmación de éxito]. 2. Diseña la 'Lógica Condicional': ¿Qué variables controlarán el flujo? (Ej: Una variable booleana 'is_logged_in' que redirige a home o login). 3. Especifica las 'Transiciones Maestras': Uso de Smart Animate con curva 'Ease-in-out' y duración de '300ms' para sensación premium. 4. Detalla el uso de 'Auto Layout': Asegura que el prototipo se puede testear en un iPhone 14 y en un monitor Desktop sin deformarse. 5. Protocolo de 'Validación': ¿Cómo recogeremos el feedback del usuario en Figma (comentarios) o vía herramienta externa (Maze)? ``` ### Fase 2: Montaje de Flujos, Refinamiento de Animación y Testeo ... (Expansión técnica sobre el uso de 'After Delay' para estados automáticos, la creación de overlays modales persistentes y la preparación del modo 'Preview' para dispositivos móviles mediante Figma Mirror) ... --- ## Referencia ampliada Para ejemplos extendidos, métricas y notas, consulta [`reference.md`](reference.md) (cárgalo solo cuando necesites ese detalle).