Integraciones

Figma

Conecta Figma a tu cuenta de Vibewax

Figma es una herramienta de diseño colaborativo para interfaces, prototipos y sistemas de diseño. Conecta tu cuenta una sola vez y el agente convertirá directamente tus diseños, componentes y estilos en partes funcionales de tu proyecto.

Por qué conectar Figma

  • Convierte tus diseños en páginas reales. Indícale al agente un archivo de Figma y él transforma el diseño, los componentes y los espaciados en una página responsive, así no tienes que recrear el diseño a mano.
  • Mantén tu proyecto alineado con la marca automáticamente. El agente extrae tus componentes, estilos y variables, incluida una configuración de Tailwind lista para usar, así tu proyecto respeta tu sistema de diseño sin recrearlo manualmente.
  • Entrega diseños sin salir del chat. Exporta cualquier frame como imagen, extrae recursos para desarrollo y detalles del archivo, y evita el ir y venir constante entre Figma y tu proyecto.

Qué necesitas

  • Una cuenta de Figma. Crea una gratis en figma.com
  • Un plan Figma Organization o Enterprise si quieres variables publicadas o analítica completa de la biblioteca

Conecta Figma a Vibewax

1. Abre Ajustes

Ve a Ajustes → Integraciones en tu espacio de trabajo de Vibewax.

2. Conecta Figma

Busca la tarjeta de Figma en la lista de aplicaciones y haz clic en el botón Conectar.

3. Autoriza tu cuenta

Se abre una ventana nueva donde te pedirá iniciar sesión en Figma. Una vez que apruebes el acceso, volverás a Vibewax.

Usa Figma desde el chat

Una vez conectada la cuenta, describe lo que quieres y el agente se encarga del resto.

Convierte un diseño en una página:

Aquí tienes mi diseño de Figma para la página de precios [enlace].
Conviértelo en una página real, respeta el layout, los componentes
y los espaciados, y hazla responsive.

Lleva tu sistema de diseño al proyecto:

Extrae los estilos y las variables de color de este archivo de
Figma y conviértelos en una configuración de Tailwind para mi
proyecto.

Exporta recursos mientras trabajas:

Exporta el frame "Hero" de mi archivo de Figma como SVG y
añádelo a la página de inicio.

O crea algo basado en tu biblioteca de diseño:

Estoy creando un sitio de documentación para el sistema de diseño.
Extrae los componentes y estilos de nuestra biblioteca de Figma y
enuméralos con vistas previas.

Qué puede hacer el agente en Figma

Convertir la estructura, los componentes y los estilos de un archivo en páginas responsive, extraer design tokens y una configuración de Tailwind, exportar frames como imágenes, y extraer detalles del archivo, comentarios e historial de versiones para una entrega limpia. Las variables publicadas y la analítica de la biblioteca requieren Figma Organization o Enterprise.

Bueno saberlo

  • Conectas la cuenta una sola vez. Cada proyecto de tu espacio de trabajo reutiliza la misma conexión con Figma.
  • Algunas funcionalidades de la biblioteca requieren un plan de Figma de pago. Las variables publicadas y parte de la analítica de la biblioteca requieren un plan Figma Organization o Enterprise.
  • Tu cuenta, tu control. El agente solo actúa cuando se lo pides. Puedes desconectar Figma en cualquier momento desde Ajustes → Integraciones.