Saltar al contenido

Empezar aquí

Requisitos

Qué plan, asiento o herramienta pide cada función que usa la guía, según la documentación oficial de Figma, Claude y Storybook en octubre de 2026.

Última revisión:

Muchas de las funciones de esta guía dependen del plan de Figma, del tipo de asiento o de la cuenta de Claude. Revisa esta página antes de empezar para saber qué puedes aplicar con lo que tienes.

En esta página

Figma

FunciónPlanAsiento o permisoFuente
Modos de variablesProfessional, Education, Organization o EnterpriseEdición del archivoFigma: Modes for variables
Descripciones de componentes, estilos y variablesLa ayuda no indica límite de planEdición de la libreríaFigma: Add descriptions
AnotacionesDe pagoFull para añadirlas; Full o Dev para verlasFigma: Add measurements and annotate designs
Dev resourcesDe pagoFull o DevFigma: Dev resources
Guidelines de librería (beta abierta)Professional, Organization o EnterpriseEdición del archivo; consume créditos de IAFigma: About guidelines
Code ConnectProfessional, Organization, Government o EnterpriseFull o DevFigma: Code Connect
Servidor MCP de FigmaStarter, Professional, Education, Organization, Government o EnterpriseEl servidor de escritorio pide Dev o Full; los límites de uso dependen del plan y del asientoFigma: Figma MCP server
Analíticas de libreríaOrganization o EnterpriseVer o editar la libreríaFigma: Library analytics

Aviso

En Professional, Code Connect permite una sola librería y un solo framework activos, y el servidor MCP solo devuelve las conexiones de esa librería y ese framework (Figma: Code Connect integration).

Nota

Las analíticas de librería solo existen en Organization y Enterprise. En otros planes, la auditoría se hace a mano, recorriendo la librería.

Claude

HerramientaRequisitoFuente
Claude CodeLa mayoría de sus superficies piden una suscripción de Claude o una cuenta de Anthropic ConsoleClaude Code: Overview
Claude DesignFree, Pro, Max, Team y EnterpriseClaude Help: Get started with Claude Design
Sistemas de diseño en Claude (beta)Pro, Max, Team y Enterprise; en Enterprise, un propietario los activaClaude Help: Set up your design system
ProjectsTodos los planes; compartirlos con el equipo, solo Team y EnterpriseClaude Help: Create and manage projects

Código

Los capítulos 5 a 7 suponen que el sistema tiene una librería de componentes en un repositorio. Para seguirlos necesitas:

  • Un repositorio Git con la librería de componentes.
  • Node.js y un gestor de paquetes, para Code Connect por línea de comandos y Storybook.
  • Si usas Storybook con agentes: un proyecto con React (cualquier framework de React), angular-vite o vue3-vite. Con otros frameworks, el servidor MCP de Storybook funciona, pero sin el manifiesto de componentes (Storybook: MCP server).

Conocimientos previos

  • Imprescindible: manejo de componentes, propiedades de componente, auto layout y variables en Figma.
  • Útil: haber escrito documentación en Markdown.
  • Para los capítulos 5 a 7: terminal y Git básicos.
  • Para los tokens: si nunca has trabajado con tokens de diseño, empieza por DesignToken101.

En resumen

  • Las guidelines y Code Connect piden Figma Professional o superior; las analíticas, Organization o Enterprise.
  • Claude Design está en todos los planes de Claude; los sistemas de diseño publicados, en Pro o superior.
  • Los capítulos 5 a 7 dan su mejor resultado con una librería de componentes en un repositorio.

Fuentes