Figma MCP Server: genera capas de diseño desde VS Code con GitHub Copilot

El fin de la brecha diseño-desarrollo

Existe una fricción histórica entre diseñadores y desarrolladores: los primeros crean en Figma, los segundos implementan en código, y la sincronización entre ambos mundos siempre ha requerido esfuerzo manual, interpretación subjetiva y decenas de idas y vueltas. El Figma MCP Server lleva meses apuntando hacia la solución de este problema, pero con el anuncio del 6 de marzo de 2026 da un salto cualitativo decisivo: ahora es capaz de generar capas de diseño en Figma directamente desde Visual Studio Code usando GitHub Copilot como intermediario inteligente.

El flujo ya no es solo unidireccional (Figma → código), sino completamente bidireccional: los desarrolladores pueden describir un componente UI en lenguaje natural y conseguir que las capas correspondientes aparezcan en el archivo Figma, listas para ser refinadas por el equipo de diseño.

En este artículo exploraremos la arquitectura completa de esta integración, cómo configurarla paso a paso y qué patrones de trabajo habilita en equipos modernos de producto.

¿Qué es el Model Context Protocol?

El Model Context Protocol (MCP) es un estándar abierto, inicialmente propuesto por Anthropic y adoptado rápidamente por la industria, que define cómo los modelos de lenguaje pueden interactuar de forma segura y estructurada con herramientas externas y fuentes de datos. Funciona mediante un servidor local (o remoto) que expone un conjunto de tools y resources a través de un protocolo JSON-RPC sobre stdio o HTTP/SSE.

┌─────────────────────────────────────────────────────┐
│                   VS Code / Copilot Chat             │
│                                                      │
│   Usuario: "Crea un botón primario con el design     │
│             system de la empresa"                    │
│                           │                          │
│              ┌────────────▼──────────────┐           │
│              │   GitHub Copilot (LLM)    │           │
│              │   + Tool calling / MCP    │           │
│              └────────────┬──────────────┘           │
└───────────────────────────│──────────────────────────┘
                            │ MCP (JSON-RPC / stdio)
              ┌─────────────▼──────────────┐
              │     Figma MCP Server       │
              │   (proceso local, Node.js) │
              └─────────────┬──────────────┘
                            │ Figma REST API (HTTPS)
              ┌─────────────▼──────────────┐
              │      Figma Cloud           │
              │  (archivo .fig activo)     │
              └────────────────────────────┘

El MCP Server de Figma actúa como puente: traduce las instrucciones del LLM en llamadas a la API REST de Figma y devuelve resultados estructurados que Copilot puede razonar y presentar al desarrollador.

Note: MCP no es exclusivo de Figma. La misma arquitectura está detrás de la integración de Azure MCP Server en Visual Studio 2026 que analizamos en detalle en Azure MCP Server integrado en Visual Studio 2026.

Arquitectura del Figma MCP Server

El Figma MCP Server es un paquete Node.js de código abierto mantenido por el equipo de Figma. Se ejecuta como proceso local en la máquina del desarrollador y se comunica con VS Code a través del protocolo stdio estándar. Sus herramientas (tools) se dividen en dos categorías:

Herramientas de lectura (disponibles desde el inicio)

Tool	Descripción
`get_figma_data`	Obtiene la estructura completa de un archivo o nodo Figma
`get_node_details`	Devuelve propiedades detalladas de un nodo: estilos, restricciones, autolayout
`read_variable_collections`	Lee colecciones de variables (design tokens) del archivo
`get_component_set`	Obtiene variantes de un componente (ej. Button/Primary, Button/Secondary)
`get_styles`	Lista estilos de texto, colores, efectos y grids del archivo

Herramientas de escritura (nueva capacidad, marzo 2026)

Tool	Descripción
`create_frame`	Crea un frame en el canvas con dimensiones y autolayout configurables
`create_component`	Instancia un componente de la librería en la posición indicada
`create_text`	Crea una capa de texto con estilo tipográfico específico
`create_rectangle`	Crea formas básicas con fill, stroke y border radius
`update_node`	Modifica propiedades de un nodo existente (posición, tamaño, color…)
`group_nodes`	Agrupa nodos seleccionados con nombre descriptivo
`set_variable_value`	Aplica valores de variables (design tokens) a nodos

Warning: Las herramientas de escritura requieren que el token de acceso personal (PAT) tenga alcance file_content:write. Un token de solo lectura habilitará únicamente las herramientas de lectura.

Configuración en VS Code

Prerrequisitos

Visual Studio Code ≥ 1.96 (soporte MCP nativo mediante la extensión GitHub Copilot)
Node.js ≥ 18 instalado en la máquina local
Cuenta Figma con un archivo de diseño activo
Personal Access Token de Figma con permisos file_content:read y file_content:write

Obtener el Personal Access Token de Figma

Accede a la configuración de tu cuenta en Figma: Account Settings → Security → Personal access tokens
Crea un nuevo token con los siguientes scopes:
- File content → Read and write
- Variables → Read and write
Copia el token generado (solo se muestra una vez)

Configurar el MCP Server en VS Code

Crea o edita el fichero .vscode/mcp.json en la raíz de tu proyecto:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-token",
      "description": "Figma Personal Access Token",
      "password": true
    }
  ],
  "servers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp-server@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${input:figma-token}"
      }
    }
  }
}

Note: El uso de "password": true en el input hace que VS Code oculte el valor del token en la interfaz y lo gestione a través del gestor de credenciales del sistema operativo. Nunca incluyas el token directamente en el JSON ni lo comiteas al repositorio.

Alternativamente, puedes configurarlo en los settings globales de VS Code (settings.json) para que esté disponible en todos tus proyectos:

{
  "github.copilot.chat.mcp.enabled": true,
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "@figma/mcp-server@latest"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "tu-token-aqui"
        }
      }
    }
  }
}

Warning: Si usas la configuración global en settings.json, asegúrate de que este fichero no está versionado con el token en texto plano. Utiliza variables de entorno del sistema operativo o el gestor de secretos de VS Code.

Verificar la conexión

Una vez configurado, abre Copilot Chat en VS Code (Ctrl+Shift+I) y verifica que el servidor MCP aparece como herramienta disponible:

# En Copilot Chat, escribe:
/tools

# Deberías ver algo como:
Herramientas MCP disponibles:
  figma: get_figma_data, get_node_details, read_variable_collections,
         create_frame, create_component, create_text, update_node ...

Flujo 1: De diseño a código

El flujo clásico, ahora más potente. Dado un archivo Figma con una URL de nodo, Copilot puede inspeccionar la estructura completa y generar código React/Vue/Angular fiel al diseño.

Ejemplo: generar un componente React desde un diseño Figma

Copia la URL del nodo desde Figma (clic derecho sobre el frame → Copy link to selection) y úsala en Copilot Chat:

@figma Analiza el componente Card en https://www.figma.com/file/ABC123/Design-System?node-id=1234%3A5678
y genera un componente React con TypeScript que respete exactamente los estilos, espaciados y variantes.
Usa Tailwind CSS para los estilos.

Copilot invocará get_node_details y get_component_set para obtener todas las variantes del componente y generará algo como:

// components/Card/Card.tsx
import React from 'react';
import { clsx } from 'clsx';

type CardVariant = 'default' | 'featured' | 'compact';

interface CardProps {
  variant?: CardVariant;
  title: string;
  description?: string;
  imageUrl?: string;
  className?: string;
  children?: React.ReactNode;
}

const variantStyles: Record<CardVariant, string> = {
  default: 'bg-white border border-gray-200 rounded-lg shadow-sm',
  featured: 'bg-blue-50 border border-blue-200 rounded-xl shadow-md',
  compact: 'bg-white border border-gray-100 rounded-md shadow-none',
};

export const Card: React.FC<CardProps> = ({
  variant = 'default',
  title,
  description,
  imageUrl,
  className,
  children,
}) => {
  return (
    <article className={clsx('flex flex-col overflow-hidden', variantStyles[variant], className)}>
      {imageUrl && (
        <div className="aspect-video overflow-hidden">
          <img
            src={imageUrl}
            alt={title}
            className="h-full w-full object-cover"
          />
        </div>
      )}
      <div className="flex flex-col gap-2 p-4">
        <h3 className="text-base font-semibold leading-tight text-gray-900">
          {title}
        </h3>
        {description && (
          <p className="text-sm leading-relaxed text-gray-600">{description}</p>
        )}
        {children}
      </div>
    </article>
  );
};

Extraer design tokens

También puedes extraer las variables del sistema de diseño para usarlas como tokens en tu proyecto:

@figma Lee las colecciones de variables del archivo https://www.figma.com/file/ABC123/Design-System
y genera un fichero de design tokens en formato CSS custom properties y un segundo fichero
en formato JSON compatible con Style Dictionary.

Copilot invocará read_variable_collections y producirá:

/* tokens/variables.css */
:root {
  /* Color / Brand */
  --color-brand-primary: #0070f3;
  --color-brand-primary-hover: #0061d5;
  --color-brand-secondary: #7928ca;

  /* Color / Neutral */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f4f4f5;
  --color-neutral-900: #18181b;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

Flujo 2: De código a diseño (nueva capacidad)

Esta es la novedad del anuncio del 6 de marzo de 2026. Ahora Copilot puede crear capas en Figma a partir de descripciones en lenguaje natural o incluso a partir de componentes de código existentes.

Ejemplo 1: crear un frame de UI desde lenguaje natural

@figma En el archivo https://www.figma.com/file/ABC123/Design-System, crea un frame
llamado "Notification Banner" con las siguientes especificaciones:
- Ancho: fill-container, Alto: hug-contents
- Padding: 12px vertical, 16px horizontal
- Fondo: variable 'color/feedback/warning/background'
- Icono de advertencia a la izquierda (24x24px)
- Texto de 14px, color 'color/feedback/warning/text', peso semibold
- Botón de cierre (icono X) alineado a la derecha
- Autolayout horizontal, gap: 8px, alineación: center

Copilot orquestará múltiples llamadas MCP en secuencia:

[MCP] → create_frame(name="Notification Banner", layoutMode="HORIZONTAL", ...)
[MCP] → create_rectangle(name="icon-warning", width=24, height=24, ...)
[MCP] → create_text(name="message-text", fontSize=14, fontWeight=600, ...)
[MCP] → create_rectangle(name="btn-close", width=24, height=24, ...)
[MCP] → set_variable_value(nodeId="...", variableAlias="color/feedback/warning/background")
[MCP] → group_nodes(ids=[...], name="Notification Banner")

El resultado es un frame funcional en Figma, con autolayout correcto, variables aplicadas y estructura de capas semántica, listo para que el diseñador lo refine.

Ejemplo 2: generar diseño desde un componente React existente

Un caso de uso muy potente: tienes componentes ya implementados en código pero el diseño en Figma está desactualizado o directamente no existe. Puedes usar Copilot para hacer el proceso inverso:

@figma Analiza el siguiente componente React y crea las capas correspondientes
en https://www.figma.com/file/ABC123 usando los tokens del design system del archivo.

El componente es:

(Y pegas el código del componente)

// components/StatusBadge/StatusBadge.tsx
import React from 'react';

type Status = 'active' | 'inactive' | 'pending' | 'error';

const statusConfig: Record<Status, { label: string; bg: string; text: string }> = {
  active:   { label: 'Activo',    bg: '#dcfce7', text: '#166534' },
  inactive: { label: 'Inactivo', bg: '#f3f4f6', text: '#374151' },
  pending:  { label: 'Pendiente', bg: '#fef9c3', text: '#854d0e' },
  error:    { label: 'Error',     bg: '#fee2e2', text: '#991b1b' },
};

interface StatusBadgeProps {
  status: Status;
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
  const { label, bg, text } = statusConfig[status];
  return (
    <span
      className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
      style=
    >
      {label}
    </span>
  );
};

Copilot inferirá las 4 variantes del badge (active, inactive, pending, error), creará un Component Set en Figma con las propiedades correctas y aplicará los colores como fills directos o como variables del design system si encuentra coincidencias.

Ejemplo 3: scaffold de pantalla completa desde especificaciones

@figma Crea el wireframe de una pantalla de "Dashboard de métricas" en
https://www.figma.com/file/ABC123 con:
- Topbar con logo (izquierda), búsqueda (centro) y avatar de usuario (derecha)
- Sidebar de 240px con navegación de 5 items y sección de ajustes al fondo
- Área principal con:
  - Fila de 4 KPI cards (igual ancho, con número grande y delta +/-)
  - Gráfico de línea a ancho completo (placeholder: rectángulo gris 100%x300px)
  - Tabla con 5 columnas y 6 filas de datos de ejemplo
- Responsive: breakpoints mobile (375px) y tablet (768px) como variantes del frame

Este tipo de scaffold puede ahorrar varias horas de trabajo inicial al diseñador, quien recibe una estructura base con la jerarquía correcta de capas, el autolayout configurado y los componentes del design system ya instanciados.

Integración con flujos de trabajo de equipo

Sincronización diseño-código en CI/CD

Una aplicación avanzada es usar el Figma MCP Server en pipelines de validación. Por ejemplo, en un GitHub Actions workflow, un script puede comparar los tokens exportados de Figma con los valores hardcodeados en el CSS del proyecto:

# scripts/validate_design_tokens.py
"""
Valida que los design tokens del código coinciden con los de Figma.
Se ejecuta en CI como paso de calidad antes del merge.
"""

import json
import os
import sys
import requests

FIGMA_TOKEN = os.environ["FIGMA_ACCESS_TOKEN"]
FIGMA_FILE_ID = os.environ["FIGMA_FILE_ID"]  # ej. "ABC123xyz"

def get_figma_variables(file_id: str) -> dict:
    """Obtiene las colecciones de variables de un archivo Figma via REST API."""
    url = f"https://api.figma.com/v1/files/{file_id}/variables/local"
    headers = {"X-Figma-Token": FIGMA_TOKEN}
    resp = requests.get(url, headers=headers, timeout=30)
    resp.raise_for_status()
    return resp.json()

def load_local_tokens(tokens_path: str) -> dict:
    """Carga los tokens locales del proyecto."""
    with open(tokens_path, encoding="utf-8") as f:
        return json.load(f)

def validate_token_parity(figma_vars: dict, local_tokens: dict) -> list[str]:
    """
    Compara tokens de Figma con los locales.
    Devuelve lista de discrepancias encontradas.
    """
    discrepancies = []
    figma_colors = {}

    # Iterar por colecciones y modos del archivo Figma
    for collection in figma_vars.get("meta", {}).get("variableCollections", {}).values():
        default_mode = collection.get("defaultModeId")
        for var_id in collection.get("variableIds", []):
            var_data = figma_vars["meta"]["variables"].get(var_id, {})
            if var_data.get("resolvedType") != "COLOR":
                continue
            name = var_data["name"].replace("/", ".").lower()
            value = var_data.get("valuesByMode", {}).get(default_mode)
            if value and isinstance(value, dict):
                r, g, b, a = value.get("r", 0), value.get("g", 0), value.get("b", 0), value.get("a", 1)
                figma_colors[name] = f"rgba({int(r*255)},{int(g*255)},{int(b*255)},{a:.2f})"

    # Comparar con tokens locales
    for token_name, token_value in local_tokens.get("color", {}).items():
        figma_key = f"color.{token_name}".lower()
        if figma_key not in figma_colors:
            discrepancies.append(f"  ⚠️  Token '{token_name}' existe localmente pero no en Figma")
        elif figma_colors[figma_key] != token_value:
            discrepancies.append(
                f"  ❌ Token '{token_name}' no coincide: "
                f"local='{token_value}' | figma='{figma_colors[figma_key]}'"
            )

    return discrepancies

def main() -> int:
    print("🎨 Validando design tokens Figma ↔ código...")
    try:
        figma_vars = get_figma_variables(FIGMA_FILE_ID)
        local_tokens = load_local_tokens("tokens/tokens.json")
        issues = validate_token_parity(figma_vars, local_tokens)

        if issues:
            print(f"\n⚠️  Se encontraron {len(issues)} discrepancias:\n")
            for issue in issues:
                print(issue)
            return 1

        print("✅ Todos los design tokens están sincronizados")
        return 0

    except Exception as exc:
        print(f"❌ Error inesperado: {exc}")
        return 1

if __name__ == "__main__":
    sys.exit(main())

Y el workflow de GitHub Actions correspondiente:

# .github/workflows/validate-design-tokens.yml
name: Validate Design Tokens

on:
  pull_request:
    paths:
      - 'tokens/**'
      - 'src/**/*.css'
      - 'src/**/*.scss'

jobs:
  validate-tokens:
    name: Figma ↔ Code token parity
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Python
        uses: actions/setup-python@v5
        with:
          python-version: '3.12'

      - name: Install dependencies
        run: pip install requests

      - name: Validate design tokens
        env:
          FIGMA_ACCESS_TOKEN: $
          FIGMA_FILE_ID: $
        run: python scripts/validate_design_tokens.py

Casos de uso reales en equipos producto

1. Handoff diseño-desarrollo sin Zeplin ni Figma Dev Mode de pago

Con el Figma MCP Server configurado en VS Code, los desarrolladores pueden inspeccionar directamente los diseños sin necesidad de pagar por Figma Dev Mode. Copilot traduce automáticamente los valores del inspector en código listo para usar.

2. Generación de storybook desde design system de Figma

@figma Exporta todos los componentes atómicos del archivo de design system
https://www.figma.com/file/ABC123 y genera las stories de Storybook para cada uno,
incluyendo todas sus variantes y estados (hover, focus, disabled, etc.)

3. Revisión de accesibilidad en tiempo de diseño

@figma Analiza el frame https://www.figma.com/file/ABC123?node-id=987%3A654
y verifica si los contrastes de color cumplen WCAG 2.1 nivel AA.
Genera un informe con los problemas encontrados y sugiere correcciones usando
las variables del design system.

4. Prototipado rápido para demos y pitches

Antes de invertir tiempo en una implementación completa, los equipos pueden usar el flujo code-to-design para generar rápidamente el aspecto visual de una nueva funcionalidad, obteniendo feedback del equipo de producto antes de empezar a codificar.

Limitaciones y consideraciones importantes

Warning: Las herramientas de escritura del Figma MCP Server están en versión beta (marzo 2026). No se recomienda su uso en archivos de design system de producción sin un proceso de revisión previo. Trabaja siempre en archivos de borrador o con backups activados.

Limitaciones actuales

No hay soporte para plugins de Figma desde el MCP Server. Las operaciones se limitan a las capacidades de la API REST de Figma.
Las capas generadas no incluyen prototipado interactivo (transiciones, overlays, scroll behavior). Esto debe añadirse manualmente en Figma.
El texto multilínea tiene limitaciones: el servidor puede crear capas de texto, pero el ajuste fino del kerning, leading y ajuste óptico sigue siendo manual.
Las fuentes personalizadas deben estar instaladas localmente en la máquina donde corre el MCP Server para que se apliquen correctamente.
Rate limiting de la API de Figma: la API REST tiene límites de 60 peticiones por minuto en planes free y Professional. Proyectos grandes con muchos componentes pueden alcanzar estos límites durante generaciones complejas.

Seguridad

El token de acceso de Figma tiene acceso a todos los archivos de tu cuenta si no se especifica un scope de archivo concreto. Considera crear tokens específicos por proyecto.
Revisa siempre el código generado antes de hacer commit. El LLM puede inferir lógica incorrecta a partir de la estructura visual.
Nunca pases el token como argumento en línea de comandos (puede quedar en el historial de shell). Usa variables de entorno o el sistema de inputs de VS Code.

Comparativa: antes y después del Figma MCP Server

Tarea	Sin Figma MCP	Con Figma MCP
Inspeccionar espaciados de un componente	Abrir Figma, seleccionar nodo, copiar valores manualmente	`@figma dame los padding/gap del componente Card en [url]`
Generar componente React desde diseño	30-90 min de implementación manual	2-5 min con Copilot + revisión
Extraer design tokens	Exportar plugin + post-proceso	Consulta directa, formato configurable
Crear wireframe para una nueva feature	Diseñador: 1-2h en Figma	Dev describe spec → Figma genera estructura base → Diseñador refina
Validar tokens en CI	Proceso ad-hoc manual	Script Python + GitHub Actions (ejemplo arriba)
Sincronizar storybook con design system	Trabajo manual recurrente	Generación automatizable con MCP + Copilot

Cómo encaja con el ecosistema MCP de Microsoft

El Figma MCP Server no existe en un vacío. Junto con el Azure MCP Server integrado en Visual Studio 2026 y el soporte mejorado de Python en Azure MCP Server, forma parte de un ecosistema creciente donde los desarrolladores pueden orquestar múltiples herramientas desde el mismo chat de Copilot.

Imagina un flujo de trabajo completo en un único contexto:

# Flujo combinado Figma MCP + Azure MCP en Copilot Chat

"@figma Analiza el diseño de la pantalla de bienvenida en [url-figma]
y genera el componente React correspondiente.
Después, despliégalo como Static Web App en @azure usando Bicep."

Copilot puede combinar herramientas de ambos servidores MCP para completar tareas end-to-end que antes requerían múltiples herramientas y contextos separados. Esta es la visión a largo plazo de los flujos agentic en el desarrollo de software moderno.

Conclusión

La capacidad de generar capas de diseño en Figma desde VS Code cierra un círculo que llevaba años siendo el eslabón perdido del flujo diseño-desarrollo. El Figma MCP Server, respaldado por GitHub Copilot como cerebro orquestador, convierte una conversación en lenguaje natural en capas reales de Figma, con autolayout, variables del design system y estructura semántica.

El impacto es directo: los equipos pueden iterar más rápido, reducir la dependencia de herramientas de handoff de pago, validar consistencia de tokens en CI/CD y mantener la documentación visual sincronizada con el código con un esfuerzo mínimo.

Empieza con el flujo de lectura (diseño → código) para ganar confianza con la herramienta, y progresa hacia los flujos de escritura en entornos de prueba antes de llevarlo a producción. La calidad de los resultados depende en gran medida de la precisión de tus prompts y de la riqueza de la nomenclatura en tu design system.

Note: Si quieres profundizar en cómo diseñar flujos agentic más complejos con múltiples herramientas MCP, te recomendamos nuestro artículo Cómo diseñar un squad de agentes autónomos.