El diseñador te pasa el Figma. Sacás un screenshot, copiás los hex a ojo, armás el componente y a la semana te avisa que el padding no era ese, que la tipografía tiene otro peso y que el botón tenía una variante que nunca viste. Todos pasamos por ahí.

En esta Masterclass vamos a cortar ese ciclo. Vas a aprender a conectar Figma directo a tu entorno de desarrollo con su MCP Server, para que el agente lea la estructura real del diseño (el árbol de nodos, las variantes, los constraints de layout y los design tokens) en lugar de adivinar mirando una imagen. Después vas a ver cómo Agentforce Vibes toma ese contexto y genera el componente contra la metadata real de tu org.

La demo, de punta a punta sobre una org real

Partimos de una pantalla diseñada en Figma: un panel de salud de cuenta que vive en un tab de la Opportunity. Conectamos el MCP y generamos el LWC completo, con colores, tipografías y espaciados que salen de las variables del diseño y no de valores hardcodeados. Después lo iteramos conversando: cambiamos el diseño en Figma, le pedimos al agente que actualice el componente y vemos qué conserva y qué rompe.

Qué te llevás según tu rol

Si sos developer, vas a entender la diferencia entre el remote server (mcp.figma.com/mcp, el que recomienda Figma) y el desktop server que corre local en 127.0.0.1:3845 con la app de escritorio en Dev Mode, qué seat necesitás en cada caso y cómo conectarlo desde el panel de MCP Servers de Agentforce Vibes sin pelearte con OAuth.

Si sos architect o tenés un design system propio, la clave es Code Connect: el mapeo entre los componentes de Figma y los componentes reales de tu repo. Sin ese mapeo, el agente genera markup nuevo cada vez en lugar de reutilizar lo que ya construiste. Vamos a mostrar cómo armarlo y cómo generar el archivo de reglas que le indica al agente cuál es tu stack.

Si ya trabajás con Agentforce Vibes, vas a ver cómo Vibe Codey analiza tu org antes de escribir una línea (objetos, campos, código existente, convenciones) y cómo combinar eso con el contexto de Figma para que el componente quede alineado al diseño y a tu modelo de datos al mismo tiempo.

Lo que no te cuentan en los videos de lanzamiento

No todo funciona de taquito, y vamos a ser honestos con eso. Si tu archivo de Figma está desprolijo, sin componentes ni variables, la ganancia frente a un screenshot es mínima. También vamos a ver dónde chocan los tokens de Figma con SLDS, cuándo conviene dejar que el agente genere y cuándo corregir a mano, y cómo controlar el consumo de tokens mientras iterás.

El camino inverso: del código al canvas

Para cerrar, vamos a tomar una interfaz que ya está funcionando y mandarla a Figma como capas editables. Así el diseñador trabaja sobre lo que realmente está en producción y el loop queda cerrado en los dos sentidos.

Te esperamos en vivo.