Crear mi primera campaña
Menú de la documentación
API

Plugin de Figma y más

El plugin de Figma, la skill de Claude Code y la configuración de Cursor: qué hace cada uno y en qué estado está.

Además de la API, el repositorio trae integraciones listas para conectar BannerMotion con las herramientas donde ya trabajas. Esto es lo que hay hoy.

Plugin de Figma

Seleccionas uno o varios frames (cada frame es un tamaño: 300x250, 728x90…) y el plugin crea el banner animado con la API:

  1. Exporta las capas de cada frame: textos (contenido, familia, peso, tamaño, color, alineación), imágenes, logos, vectores y formas, con su caja relativa al frame.
  2. Sube las imágenes y los logos a la biblioteca del workspace (POST /api/v1/assets).
  3. Crea el banner (POST /api/v1/banners) con la composición en reference, los tamaños de todos los frames y un prompt que la resume.
  4. Sigue el trabajo y, al terminar, muestra el enlace al banner en el estudio (appUrl).

Necesita una clave bm_live_… con los permisos generate y read (o bm_test_… para probar sin créditos). Se guarda solo en tu equipo.

Atención. Está en desarrollo y todavía no se publica en la comunidad de Figma: hoy solo se instala como plugin de desarrollo. Si quieres probarlo, escríbenos a soporte@bannermotion.com. [PLACEHOLDER: fecha de publicación]
  • reference admite hasta 12 frames (uno por tamaño) y 60 capas por frame; si un frame tiene más, se quedan los textos, las imágenes y los vectores, el botón del CTA y las formas más grandes.
  • Los efectos (sombras, degradados, desenfoques), las máscaras complejas y el auto layout no se describen.
  • Las tipografías se nombran por familia y peso; no se suben los archivos de letra.

Skill de Claude Code

Una skill opcional que le enseña a Claude Code el flujo completo del servidor MCP: revisar el saldo, generar, mirar, iterar, agregar tamaños, exportar y qué hacer ante cada error. Se copia la carpeta de la skill (bannermotion) a ~/.claude/skills/ o a .claude/skills/ del proyecto. [PLACEHOLDER: canal de descarga de la skill]

Cursor

Un archivo mcp.json listo para el servidor MCP. Cópialo a ~/.cursor/mcp.json (global) o a .cursor/mcp.json (proyecto).

Nota. Los destinos de publicación directa (Campaign Manager 360, Display & Video 360, Google Ads, avisos a Slack) aparecen en la app como «Próximamente»: hoy no hay conexión directa a ningún ad server.
Servidor MCPConecta Claude, Cursor o ChatGPT a BannerMotion: 10 herramientas para generar, corregir, ver y exportar banners.Crear un bannerCrea un concepto en todos los tamaños e idiomas que pidas. Responde 202 con un trabajo; consulta su estado o espera el webhook.Biblioteca de archivosSube imágenes, logos y fuentes a la biblioteca del workspace, listalos y quítalos.
¿Te sirvió esta página?