Skills de Figma y MCP: Automatiza tu diseño con IA

Llevo días diseñando en el canvas con las skills de Figma, usándolas con Claude y, en menor medida con Cursor.

Si eres UX designer o Product designer, ya lo sabes: hoy en día apenas se concibe nuestro trabajo sin herramientas como Claude Code o Cursor, así que lo que te voy a contar te interesa.

En este post te voy a hablar de las skills (o habilidades) que estoy usando en mis proyectos de empresa y personales, y cómo puedes implementarlas tú para dejar de hacer el trabajo mecánico que debería hacer un robot.

Qué son estas skills y por qué te importan

Para que nos entendamos… las skills de Figma son archivos Markdown que guían a la IA sobre cómo trabajar con los conceptos de Figma. No son solo «prompts», son instrucciones que definen acciones y contextos específicos, como crear componentes, generar layouts o sincronizar variables entre tu código y tu diseño.

Gracias al servidor MCP de Figma, estas skills permiten una transición mucho más rápida entre lo que picas en el editor y lo que ves en el canvas (o lienzo). Facilitan la reutilización de sistemas que ya tienes montados y, sobre todo, automatizan esas tareas repetitivas que nos quitan tiempo para pensar. Cada habilidad está vinculada a su fuente original; esto significa que son abiertas para que puedas entender su lógica interna y personalizarlas, consiguiendo que la IA trabaje exactamente con tus propias reglas y sistema de diseño.

Usando las skills simplemente pides lo que necesitas desde el prompt… y la IA ya sabe qué tiene que hacer.

Asumo que tienes instalado el servidor MCP de Figma y lo tienes conectado a Claude o Cursor. Si esto te suena a chino, dímelo y escribo un post específico sobre cómo configurar este «puente» técnico en macOS o Windows.

Ahora sigamos con las skills del MCP server de Figma…

figma-use: Modificar el lienzo y gestionar variables

Para conseguir que la IA «toque» cosas dentro de tu archivo, la skill fundamental es figma-use. Esta habilidad es el requisito obligatorio que debe cargar tu asistente antes de realizar cualquier acción de escritura en el archivo. Es la que le da permiso para ejecutar código JavaScript a través de la API de plugins de Figma.

Para qué se usa?

Básicamente para todo lo que implique crear o editar: desde montar frames hasta configurar colecciones de variables, tokens, modificar un Auto Layout o limpiar la estructura de un archivo que es un desastre.

Cómo se usa?

No tienes que escribir código, solo tienes que pedirle a la IA lo que quieres hacer mencionando el archivo o el frame que tienes seleccionado en el canvas. El asistente se encarga de invocar la skill por debajo, cargar las librerías necesarias y ejecutar los cambios.

Prompts de ejemplo

Usando este archivo de Figma: <URL>, convierte los valores de color planos de este frame en variables de mi colección 'Brand'.

Usando esta selección: <URL>, añade un estado vacío (empty state) que encaje con el sistema de diseño existente.

Casos de uso para inspirarte

Limpieza de estilos a gran escala: si tienes un archivo lleno de colores «sueltos» que no usan tokens. Le pides a la máquina que identifique todos los valores HEX y los sustituya por las variables correspondientes de tu sistema de diseño.

Creación de estados complejos: tienes un componente de tabla y necesitas crear el «smpty state». Le pides que cree una nueva variante que incluya un icono de tu librería, un texto de apoyo y un botón, todo respetando el Auto Layout.

figma-generate-design: Construir pantallas usando tu Design System real

Si lo que necesitas es montar una interfaz completa sin dibujar rectángulos a mano, esta es la skill que necesitas.

Para qué se usa?

Se usa para crear o actualizar pantallas enteras reutilizando lo que ya tienes publicado: componentes, variables y estilos de texto. La idea es que la IA no se invente nada… sino que busque en tus librerías y monte la pantalla como lo harías tú.

Cómo se usa?

Esta skill trabaja en equipo con la anterior (figma-use). El asistente primero escanea tu archivo para mapear qué activos tienes disponibles. Una vez que sabe qué piezas tiene, construye la pantalla sección por sección utilizando instancias de tus componentes.

Prompts de ejemplo

Usando este archivo de Figma: <URL>, crea una página nueva y monta una pantalla de ajustes utilizando nuestros componentes existentes.

Analiza el código fuente de esta página y actualiza la pantalla de Figma <URL> para que coincida con el nuevo layout usando nuestra librería del sistema de diseño.

Casos de uso

Prototipado ultra-rápido desde código: tienes una página que ya funciona en desarrollo pero no está en Figma. La IA leerá el código, buscará los componentes equivalentes y montará la pantalla vinculada al sistema de diseño en segundos.

Exploración de layouts: pídele: «Crea una pantalla de ajustes con secciones para Perfil y Seguridad usando mis componentes de la librería pro». Con ello tendrás una propuesta lista que ya usa tus tokens oficiales.

De verdad, figma-generate-design es la skill de mis sueños…

figma-generate-library: Crear un Design System profesional

Cuando tu reto no es hacer una pantalla, sino construir los cimientos de todo el producto, esta es la herramienta definitiva.

Para qué se usa?

Se usa para generar colecciones de variables (tokens), configurar temas (Light/Dark mode) y construir librerías de componentes desde una base de código. Gestiona flujos de trabajo largos que suelen llevar docenas de interacciones.

Cómo se usa?

Funciona por fases:

• Primero analiza el código o el archivo (fase 0)
• Crea los fundamentos como colores y tipografía (fase 1)
• Después la estructura de páginas (fase 2)
• Y finalmente los componentes uno a uno (fase 3)

Prompts de ejemplo

Analiza nuestra librería de componentes en React y empieza a construir un sistema de diseño equivalente en Figma en este archivo: <URL>.

Crea una colección de variables con múltiples modos para los colores de nuestra marca basándote en estos tokens de CSS.

Casos de uso

Sincronización total Diseño > Desarrollo: la IA puede leer los archivos de estilo del repositorio y recrear la misma jerarquía de tokens en Figma, incluyendo la típica sintaxis de código (var(--color-...)), eliminando la brecha entre diseño y los DEVs.

Migración masiva: pasa un sistema de diseño tradicional a uno basado en variables. La skill creará las colecciones, alias semánticos y vinculará los nuevos tokens a tus componentes existentes, magia de la buena!

figma-create-new-file: Crear archivos nuevos sobre la marcha

A veces no quieres ensuciar tu archivo principal o necesitas un espacio en blanco para un experimento rápido.

Para qué se usa?

Crea un archivo nuevo de Figma Design o FigJam directamente en tu carpeta de borradores Drafts.

Cómo se usa?

La IA te preguntará en qué equipo crearlo y le asignará un nombre. Una vez listo, te devolverá el enlace directo para que lo abras.

Prompts de ejemplo

Crea un nuevo archivo de diseño en Figma llamado: Exploración de dashboard.

Crea un nuevo archivo de FigJam para una sesión de brainstorming sobre nuestro próximo sprint.

Casos de uso

Sandboxing de ideas: haz una exploración visual rápida sin tocar el archivo oficial del equipo. «Crea un archivo nuevo y monta ahí la estructura básica de lo que estamos hablando».

Preparación de sesiones: se lo pides así: «Crea un FigJam llamado Retrospectiva y añade 4 secciones con notas adhesivas de colores».

figma-implement-design: De Figma al código con precisión de píxel

La última pieza del puzzle… pasar de los píxeles al repositorio manteniendo una equivalencia visual 1:1 ;)

Para qué se usa?

Traduce tus diseños a código listo para producción: React, Tailwind, etc… la IA analiza el contexto, extrae los tokens y genera el código respetando las convenciones de tu proyecto real.

Cómo se usa?

Le pasas la URL de un un frame y el asistente ejecuta un flujo estructurado: extrae propiedades, hace una captura de pantalla como «fuente de verdad» visual y descarga los assets necesarios para luego traducirlo todo al framework que estés usando.

Prompts de ejemplo

Implementa este componente Button de Figma en nuestra librería de React: <URL>.

Desarrolla el front-end para este layout de dashboard respetando exactamente el diseño de Figma: <URL>.

Casos de uso

Eliminar las conjeturas o suposiciones, los que se tocan con los «palabros» le dicen el Guesswork: básicamente, el developer se asegura de que el código use los tokens exactos. La IA compara el resultado con la captura del diseño original para garantizar que la paridad es perfecta.

Aceleración de componentes UI: en lugar de inspeccionar cada propiedad manual, la skill lee el contexto completo y genera el CSS o las clases de Tailwind correspondientes en un segundo…

Referencias y enlaces de interés

Si quieres profundizar en cómo funcionan estas habilidades por dentro o quieres ver el código fuente, aquí tienes los enlaces oficiales:

• Figma MCP Server (GitHub): el repositorio oficial del servidor que permite conectar Claude/Cursor con Figma.
• Figma Skills Repository: aquí es donde viven los archivos Markdown originales de cada habilidad mencionada en este post.
• Documentación de Model Context Protocol (MCP): para entender el estándar abierto que está permitiendo que estas integraciones existan.

Como ves, estas skills no vienen a sustituirnos, sino a quitarnos el trabajo más pesado para que nos centremos en la experiencia y la estrategia.

Tener el control de estas herramientas en tu flujo con Claude o Cursor te pone en una posición privilegiada hoy en día.

Recuerda… la IA es un copiloto increíble, pero tu criterio como diseñador sigue siendo el jefe: ella propone el layout, pero tú validas que la jerarquía y el ritmo visual sean los correctos.

Y otra cosa, esto es solo el principio… el ecosistema de las skills de Figma está creciendo y puede cambiar, publicaré más posts profundizando en otras skills.

Si te animas a probar alguna, o si te quedas atascado instalando el servidor MCP, escríbeme y lo vemos.