# Guía Rápida de Instalación

## Paso 1: Obtener Token de Figma

1. Ve a https://www.figma.com/developers/api#access-tokens
2. Haz clic en "Get personal access token"
3. Copia el token generado

**Nota:** Los tokens personales de Figma tienen permisos de lectura y escritura por defecto, lo que te permite tanto leer como crear comentarios.

## Paso 2: Crear archivo .env

```bash
cp .env.example .env
```

Edita `.env` y pega tu token:
```
FIGMA_ACCESS_TOKEN=figd_tu_token_aqui
```

## Paso 3: Configurar Claude Desktop

### En macOS:
```bash
open ~/Library/Application\ Support/Claude/
```

### En Windows:
```bash
explorer %APPDATA%\Claude\
```

Edita el archivo `claude_desktop_config.json` (créalo si no existe) y añade:

```json
{
  "mcpServers": {
    "figma-comments": {
      "command": "node",
      "args": ["/Users/fran/Documents/IN/Labs/mcp-figma-comment-summary/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_tu_token_aqui"
      }
    }
  }
}
```

**Importante:**
- Reemplaza la ruta con la ruta absoluta a este proyecto en tu sistema
- Reemplaza `figd_tu_token_aqui` con tu token real de Figma

## Paso 4: Reiniciar Claude Desktop

1. Cierra completamente Claude Desktop (Cmd+Q en Mac, Alt+F4 en Windows)
2. Abre Claude Desktop nuevamente

## Paso 5: Verificar instalación

En Claude Desktop, deberías ver el ícono 🔧 indicando que hay herramientas disponibles.

## Probar

En Claude Desktop, escribe:

```
¿Qué herramientas tienes disponibles?
```

Deberías ver **5 herramientas** en la lista:
- `get_figma_comments` (Leer comentarios)
- `summarize_figma_comments` (Resumir comentarios)
- `get_comment_users` (Listar usuarios para menciones)
- `post_figma_comment` (Crear comentarios)
- `reply_to_figma_comment` (Responder a comentarios)

## Uso básico

### Leer comentarios

Para obtener comentarios de un archivo de Figma:

```
Obtén los comentarios del archivo de Figma: ABC123XYZ
```

Donde `ABC123XYZ` es el ID del archivo (sacado de la URL de Figma).

### Ver usuarios disponibles

Para ver quién ha comentado (útil para menciones):

```
¿Quién ha comentado en el archivo ABC123XYZ?
```

### Crear comentarios

Para crear un nuevo comentario:

```
Crea un comentario en el archivo ABC123XYZ diciendo "Esto se ve genial!"
```

**Con menciones:**
```
Crea un comentario mencionando a John: "@john_designer Por favor revisa este diseño"
```

### Responder a comentarios

Para responder a un comentario existente:

```
Responde al comentario 789 en el archivo ABC123XYZ: "Estoy de acuerdo"
```

**Con menciones:**
```
Responde al comentario 789: "@maria_ux Gracias por el feedback!"
```

## Usar @Menciones

Puedes mencionar usuarios en tus comentarios usando `@username`. Esto les enviará una notificación:

1. **Ver usuarios disponibles:** `¿Quién puede comentar en ABC123?`
2. **Mencionar al comentar:** Incluye `@username` en tu mensaje
3. **El usuario recibe notificación** en Figma automáticamente

**Ejemplo completo:**
```
"Muestra los usuarios de ABC123, luego crea un comentario mencionando a todos agradeciéndoles por el feedback"
```

## ¿Problemas?

Revisa el archivo `README.md` para solución de problemas detallada.