Guía de lectura localizada
figma-code-connect-componentsFinalidad, uso y origen
Conecta los componentes de diseño de Figma con los componentes de código mediante las herramientas de mapeo de Code Connect. Úselo cuando el usuario diga "code connect", "conectar este componente al código", "mapear este componente", "vincular componente al código", "crear mapeo de Code Connect" o quiera establecer mapeos entre diseños de Figma e implementaciones de código. Para escribir en el lienzo a través deuse_figma, usarfigma-use.
Fuente recuperada:
- Repositorio de origen
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Estrellas del repositorio
- 28,420
- Actualización del repositorio
- 2026-10-29
- Clasificación de habilidades
- Diseño
- Última recopilación
Licencia: No especificado
Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.
Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.
Lo que hace esta habilidad
Conecta los componentes de diseño de Figma con los componentes de código mediante las herramientas de mapeo de Code Connect. Úselo cuando el usuario diga "code connect", "conectar este componente al código", "mapear este componente", "vincular componente al código", "crear mapeo de Code Connect" o quiera establecer mapeos entre diseños de Figma e implementaciones de código. Para escribir en el lienzo a través deuse_figma, usarfigma-use.
Cómo funciona el flujo de trabajo ascendente
Flujo de trabajo requerido
Sigue estos pasos en orden. No te saltes ningún paso.
Paso río arriba · L29 ↗Descripción general
Esta habilidad te ayuda a conectar los componentes de diseño de Figma con sus implementaciones de código correspondientes mediante la función Code Connect de Figma. Analiza la estructura de diseño de Figma, busca componentes coincidentes en tu código fuente y establece asignaciones que mantienen la coherencia entre el diseño y el código.
Paso río arriba · L8 ↗Paso1: Obtener sugerencias de Code Connect
Llamarget_code_connect_suggestionsPara identificar todos los componentes no mapeados en una sola operación. Esta herramienta automáticamente: Obtiene información de los componentes del grafo de escena de Figma. Identifica los componentes publicados en la selección. Comprueba los mapeos de Code Connect existentes y filtra los componentes ya conectados.
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Requisitos y configuración
Requisitos previos
El servidor Figma MCP debe estar conectado y accesible. El usuario debe proporcionar una URL de Figma con el ID del nodo:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Límites y controles de calidad
No se seleccionó ningún pasaje con límites específicos en este archivo. Esto no significa que la habilidad sea segura para cualquier entrada o entorno. Revise el código fuente completo y valide su propio resultado.
Comience con una prueba segura.
- Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
- Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
- Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
- Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.
Lea más en la fuente
- Descripción general
- Límites de habilidad
- Requisitos previos
- Flujo de trabajo requerido
- Paso1: Obtener sugerencias de Code Connect
- Opción A: Utilizando
figma-desktopMCP (no se proporcionó ninguna URL) - Opción B: Cuando se proporciona una URL de Figma
- Paso2: Escanear el código fuente en busca de componentes coincidentes
- Paso3: Presentar coincidencias al usuario
- Paso4: Crear asignaciones de conexión de código
- Ejemplo1: Conectando un componente de botón
- Ejemplo2: Múltiples componentes con selección parcial
- Ejemplo3: El componente necesita ser creado
- Descubrimiento proactivo de componentes
- Coincidencia precisa de la estructura
- Comunicación clara
- Manejar la ambigüedad
- Degradación elegante
- Problema: "No se encontraron componentes publicados en esta selección".
- Problema: "Code Connect solo está disponible en los planes Organization y Enterprise".
- Problema: No se encontró ningún componente coincidente en el código base.
- Problema: "Componente publicado no encontrado" (CODE_CONNECT_ASSET_NOT_FOUND)
- Problema: "El componente ya está asignado al código" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Problema: "Permisos insuficientes para crear la asignación" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Problema: El mapeo de Code Connect falla con errores de URL.
- Problema: Se encontraron varios componentes similares.
- Comprender Code Connect
- Recursos adicionales
Habilidades relacionadas
Traducción y alcance
Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.
Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.
- Fuente fijada
- Lee el original ↗
- Fuente recuperada
- Confirmación de origen
49f948faa9258a0c61caceaf225e179651397431- Fuente SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d