102.3K+Télécharger
Aller au guide d’utilisation
Figma Code Connect Componentspar OpenAI

Figma Code Connect Components Skill.

Rendez explicite le lien entre un composant de design et son implémentation.

  • Figma
  • Design systems
  • Passation aux développeurs
Télécharger OpenDesignVoir le guide d’utilisation
Analyse de la source · Figma Code Connect ComponentsSKILL.md
Tâche Figma Produit • Une liste proposée de correspondances entre nœuds Figma et composants de code • Des mappages Code Connect approuvés, avec chemins sources et libellés de framework • Un récapitulatif distinguant les mappages connectés, ignorés et en échec Avant de commencer Figma MCP connecté, accès aux composants publiés et à la base de code, ainsi qu’un droit Code Connect actuel et des autorisations de modification.
Synthèse éditoriale · source examinée le 2026-10-07 · exemple non généré

01 Fonctionnement

Associer les composants Figma publiés à leur code

Un workflow Figma MCP pour découvrir, examiner et écrire des mappages Code Connect approuvés.

Workflow fondé sur la sourcePas un test d’exécution

La méthode de travail

Figma Code Connect Components est un workflow de mappage, pas un générateur d’écrans. Il repère les composants publiés non mappés dans une sélection Figma, explore la base de code locale et compare la structure et les propriétés des composants. Un nom identique n’est qu’un point de départ : les options de variantes, les valeurs par défaut et l’usage doivent aussi correspondre.

La source exige que les correspondances proposées soient présentées à l’utilisateur avant toute création de mappage. L’approbation partielle est possible, et les composants ambigus ou introuvables sont signalés plutôt que devinés. Le résultat est un lien design-code repérable ; il ne réécrit pas automatiquement l’un ou l’autre côté et ne prouve pas que leur rendu visuel est identique.

Livrables attendus

  • Une liste proposée de correspondances entre nœuds Figma et composants de code
  • Des mappages Code Connect approuvés, avec chemins sources et libellés de framework
  • Un récapitulatif distinguant les mappages connectés, ignorés et en échec
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Identifier les composants publiés

    Utilisez un lien Figma propre à un nœud ou une sélection de bureau prise en charge, puis repérez les composants encore non mappés.

  2. 02
    Comparer les implémentations

    Explorez le dépôt et examinez les exports, propriétés et valeurs par défaut réels. Présentez des alternatives si plusieurs composants peuvent convenir.

  3. 03
    Connecter l’ensemble approuvé

    Ne soumettez que les mappages approuvés par l’utilisateur, puis signalez séparément les réussites et les échecs.

02 Cas d’usage

Quand l’utiliser

Figma MCP connecté, accès aux composants publiés et à la base de code, ainsi qu’un droit Code Connect actuel et des autorisations de modification.

Cas adaptés

  • Passation de bibliothèqueUtile lorsque designers et développeurs maintiennent déjà des bibliothèques de composants correspondantes, mais que les liens entre elles manquent de clarté.
  • Nettoyage progressif des mappagesConvient à une sélection contenant à la fois des composants déjà mappés et quelques nouveaux éléments.

Limites à vérifier

  • Composants publiés requisLe workflow examiné concerne les composants ou ensembles de composants publiés, pas des rectangles quelconques ni des composants brouillons non partagés.
  • Accès distinctVérifiez que votre offre Figma prend en charge Code Connect, que vous disposez du droit de modification et d’une connexion fonctionnelle avant de créer des mappages.

Éléments à fournir

  • Sélection FigmaFournissez un lien de fichier contenant l’ID du nœud cible, ou un nœud sélectionné via une connexion de bureau prise en charge.
  • Dépôt de codeRendez les fichiers d’implémentation accessibles afin que les exports et les props puissent être examinés.
  • Approbation des mappagesChoisissez toutes, certaines ou aucune des correspondances suggérées avant leur écriture.

03 Décisions importantes

Décisions importantes

  1. Correspondance au niveau des propriétés

    Comparer les interfaces de variantes et de tailles réduit les liens trompeurs entre des composants qui partagent seulement un nom.

  2. Succès partiel explicite

    Un composant en échec ou ignoré reste visible dans la passation, au lieu de disparaître derrière un message de réussite global.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Installez le skill sélectionné via le mécanisme pris en charge par votre environnement d’agent et connectez Figma séparément. Ces documents bêta sont régis par les conditions développeur de Figma, et non par MIT. L’installation n’accorde pas l’accès à Code Connect.

Fichier source amont
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-code-connect-components/SKILL.md

Figma MCP connecté, accès aux composants publiés et à la base de code, ainsi qu’un droit Code Connect actuel et des autorisations de modification.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilise figma-code-connect-components pour examiner les composants publiés de ce cadre Figma et trouver leurs implémentations dans notre dépôt. Compare les props de variantes et les valeurs par défaut, montre les chemins sources proposés et attends mon approbation avant de créer les mappages. Si un composant a deux correspondances plausibles, explique la différence au lieu de choisir silencieusement.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque chemin source proposé pointe vers l’export réel du composant.
  • Seuls les mappages explicitement acceptés sont créés.
  • Les éléments non publiés, déjà mappés ou bloqués par les autorisations sont signalés avec exactitude.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
OpenAI
Dépôt
openai/skills
Fichier du skill
skills/.curated/figma-code-connect-components/SKILL.md
Licence
Conditions Figma
Version examinée
2026-10-07 · 49f948faa925
Synthèse éditoriale de la source
Un workflow Figma MCP pour découvrir, examiner et écrire des mappages Code Connect approuvés.

Synthèse originale de OpenDesign, fondée sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Génère-t-il du code d’application ?

Non. Il associe des composants de design à des implémentations existantes. Créer du code à partir d’un cadre Figma relève d’un autre workflow.

Peut-il connecter des composants non publiés ?

La source examinée indique que les composants doivent être publiés dans une bibliothèque d’équipe avant que Code Connect puisse les mapper.

Puis-je n’approuver qu’une seule correspondance ?

Oui. Le workflow permet explicitement d’accepter toutes, certaines ou aucune des correspondances proposées.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-code-connect-components/SKILL.md