figma-code-workflows

Par figma · mcp-server-guide

Importez ou téléversez des fichiers HTML locaux ou des fichiers de projet dans Figma, choisissez des frames Design modifiables, des Code Layers exécutables ou du Code autonome (également appelé Make), et réparez les aperçus importés. À utiliser uniquement lorsque l'utilisateur nomme explicitement des calques Design modifiables, un Code Layer exécutable, ou un fichier Code/Make autonome, ou fournit une clé/un lien de fichier Figma comme destination d'importation. Les demandes génériques de code ou de composants de code nécessitent une clarification de la sortie avant d'utiliser ce workflow.

npx skills add https://github.com/figma/mcp-server-guide --skill figma-code-workflows

Importer un projet dans Figma

Utilisez ce workflow uniquement pour une sortie Figma explicitement demandée (Code/Make autonome, Code Layer exécutable, ou calques Design éditables), ou une clé/un lien de fichier Figma donné comme destination. Les demandes génériques « créer un projet de code » ou « créer un composant de code », ainsi que les noms seuls de Figma Code/Make, ne spécifient pas cette sortie. Si l'intention de sortie n'est pas claire, demandez à l'utilisateur s'il souhaite un code local ou une sortie Figma, puis attendez avant de démarrer ce workflow.

Préservez le projet de l'utilisateur. Utilisez la description et le schéma actuels de chaque outil pour les prérequis et les paramètres.

Tenez l'utilisateur informé aux étapes principales : préparation et validation du projet, téléchargement de l'archive, et completion de l'import dans Figma. Signalez les imports en attente, les travaux de récupération et les blocages au fur et à mesure ; ne décrivez pas une étape non confirmée comme complétée.

1. Choisir la sortie et la destination

Identifiez la sortie prévue par l'utilisateur, puis chargez la skill appropriée selon le tableau ci-dessous. Si la sortie n'est pas claire, demandez à l'utilisateur avant de procéder.

Entrée Sortie demandée par l'utilisateur Action suivante
App en cours d'exécution ou HTML statique Non spécifiée — la placer/l'importer simplement dans Figma Demandez « Calques Design éditables ou Code Layer ? » et terminez votre tour. Attendez la réponse.
App en cours d'exécution Calques Design éditables Chargez figma-generate-design, puis appelez generate_figma_design dans un fichier Design.
HTML statique Calques Design éditables Appelez html_to_figma dans un fichier Design.
App en cours d'exécution Code Layer exécutable ou Code/Make autonome Continuez avec cette skill et appelez send_code_to_figma.
HTML statique Code Layer exécutable ou Code/Make autonome Continuez avec cette skill et appelez send_code_to_figma.

Un projet HTML avec des boutons fonctionnels reste ambigu si l'utilisateur n'a pas choisi la sortie. Un lien Design choisit uniquement la destination, non la sortie.

Avant de choisir une destination exécutable, appelez whoami. Ne choisissez ou n'importez un Code Layer Design que si whoami.code_layers_enabled est true ; sinon utilisez Code/Make autonome, ou expliquez la limitation et demandez avant de modifier une destination Design explicitement fournie.

Respectez une demande explicite de code-layer ou autonome avant d'appliquer l'heuristique du nombre d'écrans. Pour du code exécutable avec un lien Design, utilisez un Code Layer. Pour un lien autonome, utilisez autonome. Sans destination ou sans choix code-layer/autonome explicite, estimez les écrans : moins de 10 ou inconnu → Code Layer ; 10 ou plus → autonome. Ne demandez jamais Code Layer ou autonome et ne demandez pas à l'utilisateur de compter les écrans. Les destinations et liens explicites prennent priorité après le choix de sortie.

Utilisez l'URL de fichier fournie. Si un nouveau fichier est nécessaire, utilisez create_new_file avec le type de destination sélectionné et le plan choisi par l'utilisateur.

Créez un fichier Design pour un Code Layer demandé quand aucune destination n'est fournie.

Maintenez le choix de sortie confirmé fixe ; ne redemandez pas à l'utilisateur de choisir à nouveau après la création du fichier.

Pour les calques Design éditables, suivez les instructions de la skill sélectionnée : generate_figma_design capture la page rendue de l'app en cours d'exécution ; html_to_figma convertit un document HTML statique autonome. Inspectez les calques résultants et partagez le lien Design. Continuez ci-dessous uniquement pour une sortie de code exécutable.

2. Suivre la réponse d'import

Appelez send_code_to_figma avec la source locale sélectionnée et la destination en utilisant son schéma actuel. Suivez exactement les instructions de préparation et d'archive retournées ; préservez l'app et validez localement avant le téléchargement quand cela est demandé.

Suivez précisément les instructions de chaque réponse et l'argument retourné nextStep pour la préparation, la validation, le téléchargement, les imports en attente et la récupération de configuration. Complétez les prérequis retournés avant de progresser et passez les arguments de continuation complets inchangés. N'inventez pas une étape de récupération manquante. Quand aucun nextStep n'est présent, suivez les instructions de la réponse et la description actuelle de l'outil.

Terminez avec le lien de fichier/calque retourné et signalez uniquement les résultats d'import et d'aperçu établis par la réponse.

Skills similaires