Figma Make es el nombre que agrupa a las nuevas funciones de Inteligencia Artificial generativa integradas en Figma. Fue anunciado en el evento Config 2024 como una forma de que la IA no solo ayude a escribir textos, sino a construir interfaces desde cero. El propósito principal es eliminar el miedo al «lienzo en blanco» y acelerar drásticamente el flujo de trabajo de los diseñadores de producto.
La clave de todo. Prepara Figma Make para que no tenga muchas alucinaciones
Antes de lanzar el primer prompt, la IA de Figma necesita contexto. No sirve de nada que genere diseños genéricos. Lo ideal es crear algunas reglas estrictas para que no se las salte y genere más de la cuenta.
- Conectar Design System o sistema de diseño: Hay que asegurarse de que las bibliotecas de estilos y componentes estén publicadas. Figma IA ahora puede «leer» las variables y tokens para que lo que genere no parezca un diseño de stock, sino casi el diseño real.
- Define el «Mood»: Se pueden subir capturas de pantalla de referencias o moodboards previos para que la IA entienda la dirección visual. Al igual que, también, se pueden copiar y pegar frames de Figma o urls de archivos completos.
- Elegir el modelo de IA con el que trabajar: Figma Make permite elegir entre el modelo por defecto, que es el que viene preseleccionado, pero también puedes elegir: Gemini 3 pro, Gemini 3 Flash, Claude Opus 4.6.
El archivo Guidelines.md. La constitución de tu IA Generativa
La IA por defecto tiende a lo genérico. Sin un archivo de guías, Figma Make podría generar botones con bordes redondeados cuando el sistema de diseño es estrictamente de bordes cuadrados.
Sirve para definir la personalidad visual (ej: «minimalista, corporativo, alta densidad de datos») y los valores de diseño que la IA debe priorizar. Figma Make es mucho más potente cuando usa los propios componentes del sistema de diseño. Figma AI también genera texto. El guidelines.md le dice qué palabras evitar y cuál es el tono de voz. El archivo guidelanes.md le explica cómo usarlos.
- Ejemplo: Especificación del uso de un componente. «Usa siempre el componente ‘Button/Primary’ para acciones principales y nunca uses más de dos botones primarios por pantalla».
- Uso de Tokens: Le indica a la IA qué variables de color o espaciado aplicar según el estado de la interfaz.
- Accesibilidad: Añade reglas para que siempre tenga en cuenta la accesibilidad y las interfaces estén diseñadas para todo tipo de personas.
- Regla: «No uses jerga técnica, habla siempre en segunda persona del plural y evita el lenguaje
pasivo».
Con la llegada del Model Context Protocol (MCP), este archivo ya no solo lo lee Figma. Si el equipo de desarrollo usa herramientas de IA como Cursor, Windsurf, Copilot en VS Studio, ellos pueden «leer» guidelines.md directamente desde el repositorio para asegurarse de que el código que generan coincide al 100% con las reglas de diseño que se definieron en Figma.
Mi metodología avanzada de diseño de producto generativo en Figma Make
Esta metodología está basada en mi experiencia de integración e implantación en el ámbito profesional y personal. Es muy parecida a la establecida en distintos equipos que he liderado y como trabajo, también, como contribuidor individual.
1. Alineación estratégica y definición de flujos (PM + PD)
Antes de iniciar cualquier generación en Figma Make, es imperativo establecer el objetivo de negocio y el User Flow. La colaboración entre el Product Manager (PM) y el Product Designer (PD) garantiza que el diseño resuelva un problema real y no sea solo estético.
- Modularización del problema: No intentes generar un flujo completo (ej. un checkout entero) en un solo paso. Disecciona el flujo en micro-interacciones o pantallas individuales.
- Reducción de alucinaciones: Al trabajar por partes, minimizas el riesgo de que la IA genere elementos fuera de lógica, permitiéndote mantener un control granular sobre cada paso del embudo de conversión. Particularmente recomiendo tener muy en cuenta para las iteraciones, tras el Prompt maestro, los Elementos de la Experiencia de Usuario, Jesse James Garrett.
2. Configuración y parametrización del entorno
La eficacia de Figma Make depende directamente del contexto que se le proporcione al inicializar el proyecto.
- Vinculación de librerías: Es crítico asociar la Library de componentes (DS) del proyecto desde el inicio. Esto asegura que la IA no invente nuevos átomos de diseño, sino que reutilice los componentes existentes.
- Selección del modelo: Dependiendo de la complejidad, elige el modelo de IA más adecuado dentro de Figma, priorizando aquellos con mayor capacidad de razonamiento espacial para layouts complejos.
3. Ingeniería de Prompts (Framework estructurado)
El resultado es tan bueno como el input. Evita las instrucciones ambiguas y utiliza un framework de prompting profesional:
- [Rol]: Define quién es la IA (ej. «Actúa como un Senior Product Designer experto en SaaS»).
- [Contexto/Tarea]: Describe el escenario (ej. «Diseña el panel de analíticas para un gestor de suscripciones B2B»).
- [Requerimientos]: Lista los elementos obligatorios (ej. «Incluye un line-chart de MRR, un filtro de fecha y una tabla de transacciones recientes»).
- [Estilo/Salida]: Define el formato (ej. «Usa un layout de tres columnas, densidad de información alta y respeta los tokens de color de la marca»).
4. Auditoría de diseño y refinamiento de alta fidelidad
La IA es un excelente generador de «puntos de partida», pero carece de criterio para la arquitectura de información compleja.
- Variabilidad y comparación: Es recomendable generar al menos 3 variantes del mismo prompt. Esto permite realizar un análisis comparativo de jerarquías y layouts antes de decidir el camino a seguir.
- Datos reales: Hay que sustituir inmediatamente los datos ficticios por datos reales. Un diseño testado con nombres reales y métricas verosímiles evita sesgos durante las sesiones de User Testing.
- Cumplimiento del Design System: Consiste en utilizar las funciones de reemplazo masivo para asegurar que cada frame generado utilice las instancias correctas de tu sistema de diseño, eliminando capas inconsistencias o estilos huérfanos.
5. Optimización continua y gobernanza (Guidelines.md)
La fase final no es el cierre, sino la creación de un sistema de mejora iterativa.
- Refinamiento semántico: Si el resultado visual no es óptimo mediante prompts, es necesario utilizar el archivo guidelines.md para establecer reglas persistentes en lenguaje natural (instrucciones de accesibilidad, reglas de espaciado o tono de voz del microcopy).
- Control vía CSS/Tokens: En flujos avanzados, ajustar los parámetros de estilo directamente en las hojas de estilo vinculadas para asegurar una paridad total entre el diseño de Figma y la implementación final en código.
En conclusión, Figma Make y su ecosistema de IA representan el paso definitivo del diseñador como «ejecutor de píxeles» al diseñador como estratega. En definitiva, es una apuesta por la velocidad sin sacrificar la calidad, permitiéndote fallar rápido en la ideación y ser quirúrgico en la entrega final.