> ## Documentation Index
> Fetch the complete documentation index at: https://vibewax.be/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://www.figma.com)
- Un plan Figma Organization o Enterprise si quieres variables publicadas o analítica completa de la biblioteca

## Conecta Figma a Vibewax

<Steps>
  <Step title="Abre Ajustes">
    Ve a **Ajustes → Integraciones** en tu espacio de trabajo de Vibewax.
  </Step>
  <Step title="Conecta Figma">
    Busca la tarjeta de Figma en la lista de aplicaciones y haz clic en el botón **Conectar**.
  </Step>
  <Step title="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.
  </Step>
</Steps>

## 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**.


This page is part of the [Vibewax documentation](https://vibewax.be/docs/es/welcome/overview).