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

# Figma

> Conecta Figma a tu cuenta de Macaly

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.

<Callout icon="user">
  Disponible en todos los planes
</Callout>

## 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 Macaly

<Steps>
  <Step title="Abre Ajustes">
    Ve a **Ajustes → Integraciones** en tu espacio de trabajo de Macaly.
  </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 Macaly.
  </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 documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.