Se connecter Agent concepteur à un serveur Figma MCP

  • Rversion finale: Australia
  • Mis à jour 17 juin 2026
  • 7 minutes de lecture

    • Connectez le serveur Figma Console de serveur Model Context Protocol () au Agent concepteur pour accélérer la conversion des conceptions Figma en applications d’entreprise sur le ServiceNow AI PlatformMCP.

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    La connexion du serveur Figma MCP au Agent concepteur permet d’accéder Agent concepteur aux données de conception des fichiers Figma. La connexion aide l’utilisateur Agent concepteur à comprendre la conception et son intention, ce qui lui permet de créer des applications qui correspondent à la conception.

    Visitez le portail des développeurs Figma pour connecter le serveur MCP Figma au Agent concepteur. Créez une application OAuth pour obtenir votre ID client et votre secret client. Ensuite, configurez l’pour gérer le processus OAuth à l’aide des informations d’identification ServiceNow IDE .

    Procédure

    1. Configurer une application OAuth dans Figma
    2. Configurer le fournisseur OAuth dans ServiceNow IDE
    3. Connecter le serveur MCP Figma à Agent concepteur
      Figure 1. Workflow de génération d’applications à l’aide de Figma et Agent concepteur
      Organigramme montrant le processus d’agent de version de Figma à la génération d’application. Pour connaître les étapes détaillées du processus, reportez-vous au texte ci-contre.

    Configurer une application OAuth dans Figma

    Créez une application OAuth dans Figma pour permettre au serveur MCP Figma d’authentifier les utilisateurs via OAuth et d’accorder l’accès Agent concepteur aux conceptions Figma.

    Avant de commencer

    Vous devez avoir un siège Dev ou Full sur un plan Figma Pro, Org ou Enterprise.

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Le serveur Figma MCP (Model Context Protocol) utilise OAuth pour l’authentification Agent concepteur et rend les données de conception Figma accessibles aux installés. Pour connecter le serveur MCP Figma au Agent concepteur, vous devez créer une application OAuth dans Figma. Ce processus génère un ID client et un secret client. ServiceNow utilise ces informations d’identification pour lancer le processus OAuth et authentifier les utilisateurs avec leurs comptes Figma.

    Procédure

    Étape 1 : Créez une application OAuth dans Figma pour obtenir l’ID client et le secret client.
    1. Accédez à la page des développeurs Figma.
    2. Sélectionnez Create a new app (Créer une application).
    3. Saisissez les informations suivantes dans le formulaire.
      ChampDescription
      Nom Nom de votre application ; par exemple, ServiceNow Integration.
      Choisissez un propriétaire pour votre application

      Équipe ou organisation propriétaire de l’application.

      Important :
      La valeur que vous saisissez ne peut pas être modifiée.
    4. Sélectionnez Créer une application.
      Un ID client et un secret client sont générés.
    5. Stockez l’ID client et le secret client en toute sécurité, car vous en aurez besoin pour la configuration OAuth dans le ServiceNow IDE.
      Important :

      Vous ne pourrez plus voir le secret client après avoir fermé cette fenêtre.

    6. Sélectionnez Terminé.
    Étape 2 : Configurez et publiez l’application OAuth dans Figma.
    1. Ouvrez l’application que vous avez créée.
    2. Facultatif : Dans l’onglet Général , chargez un logo pour votre application et fournissez une brève description.
    3. Dans l’onglet Informations d’identification OAuth , dans le champ URL de redirection , ajoutez l’URL suivante : https://<nom d’instance>.service-now.com/oauth_redirect.do. puis remplacez <nom de l’instance> par le nom réel ServiceNow de l’instance.
      Le flux OAuth fonctionne uniquement dans ServiceNow les instances qui sont incluses dans la liste des URL de redirection. Veillez à ajouter à cette liste toutes les instances dans lesquelles vous souhaitez que le flux OAuth fonctionne.

      Vous pouvez ajouter une URL de redirection à tout moment.

    4. Dans l’onglet Champs d’application OAuth, dans la section MCP, cochez la case MCP :connect .
      Important :
      Si la section MCP n’est pas visible, contactez votre chargé de clientèle ou ServiceNow l’assistance ServiceNow (contactez l’assistance ServiceNow) pour activer le périmètre de connexion MCP. Assurez-vous de partager votre ID client avec eux afin qu’ils puissent activer la fonctionnalité MCP.
    5. Dans l’onglet Publier , assurez-vous que la case Private (Privé ) est cochée, puis sélectionnez Publish (Publier).

    Configurer le fournisseur OAuth dans ServiceNow IDE

    Configurez un registre d’application ServiceNow IDE OAuth et des informations d’identification pour vous connecter à votre Figma.

    Avant de commencer

    Rôle requis : admin

    Procédure

    Étape 1 : Créez un enregistrement de registre d’application.
    1. Dans votre instance ServiceNow, accédez à OAuth système > Registre d'application.
    2. Sélectionnez Nouveau.
    3. Sur la page de l’intercepteur, sélectionnez Se connecter à un fournisseur OAuth tiers.
    4. Remplissez le formulaire avec les détails suivants.
      ChampDescription
      Nom Un nom unique ; par exemple, le fournisseur OAuth Figma.
      ID client ID client que vous avez obtenu à partir de l’application Figma.
      Secret client Secret client que vous avez obtenu à partir de l’application Figma.
      Type d'accord par défaut Sélectionnez Code d’autorisation dans la liste déroulante.
      URL d'autorisation https://www.figma.com/oauth.
      URL de jeton https://api.figma.com/v1/oauth/token.
      URL de redirection L’URL de redirection que vous avez ajoutée dans l’application Figma.
      Envoyer les informations d'identification Sélectionnez En tant qu’en-tête d’autorisation de base.
    5. Sélectionnez Soumettre.
    Étape 2 : définissez le périmètre OAuth.
    1. Dans l’enregistrement du registre d’application que vous avez enregistré, faites défiler vers le bas jusqu’aux listes connexes.
    2. Sélectionnez l’onglet Périmètres des entités OAuth .
    3. Double-cliquez (ou utilisez le raccourci clavier) Insérez une nouvelle ligne pour ajouter une ligne.
    4. Dans la nouvelle ligne, entrez les valeurs suivantes.
      ChampDescription
      Nom Un nom ; par exemple, Figma MCP Connect.
      Périmètre OAuth Nom exact du périmètre que vous avez défini dans Figma (mcp :connect).
    5. Sélectionnez Mettre à jour.

      L’onglet Configuration des périmètres d’entité OAuth affiche les champs « Nom » et « Périmètre OAuth », un exemple « Figma MCP Connect : mcp :connect » et des options pour ajouter, mettre à jour ou supprimer des périmètres.
    Étape 3 : configurez le profil de l’entité OAuth.
    1. Sur le même enregistrement de registre d’application, sélectionnez l’onglet Profils des entités OAuth .

      Dans l’onglet Profils des entités OAuth, des profils existants tels que « Fournisseur Figma OAuth » avec le type d’accord de code d’autorisation sont affichés, ainsi que des options pour mettre à jour, supprimer ou ajouter des profils.
      Vous voyez un profil par défaut créé automatiquement.
    2. Sélectionnez le nom du profil pour ouvrir l’enregistrement.
    3. Renommez le profil par défaut en figma_profile.
    4. Dans l’enregistrement Profil de l’entité OAuth, dans la liste connexe Périmètres du profil de l’entité OAuth , double-cliquez (ou utilisez le raccourci clavier) Insérer une nouvelle ligne.
    5. Recherchez Figma MCP Connect et sélectionnez-le.

      Sur la page de configuration du profil de fournisseur OAuth Figma, le périmètre de l’entité OAuth « Figma » se connecte au « default_profile fournisseur OAuth Figma » via le type d’accord de code d’autorisation.
    6. Sélectionnez Enregistrer.
      Vous êtes redirigé vers l’enregistrement du profil.
    7. Sélectionnez Mettre à jour pour enregistrer le profil.
      Le profil par défaut est connecté au périmètre MCP.

    Connecter le serveur MCP Figma à Agent concepteur

    Connectez le serveur Figma MCP (Model Context Protocol) au serveur pour rendre les conceptions Figma accessibles pour la création d’applications Agent concepteur .

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Une fois la connexion OAuth établie entre votre ServiceNow instance et Figma, vous pouvez maintenant vous lier Agent concepteur à votre compte Figma pour commencer à utiliser le serveur MCP Figma. permet Agent concepteur de créer et de mettre à jour ServiceNow automatiquement des ServiceNow IDE applications.

    Procédure

    1. Assurez-vous que l’application OAuth est configurée sur Figma et que vous avez créé le registre d’application.
      Conseil :
      ServiceNow IDE Le , accédez à Tous > OAuth système > Registre d'application pour vérifier si l’application OAuth est créée et configurée sur Figma.

      Pour connaître les étapes de configuration, reportez-vous aux sections Configurer une application OAuth dans Figma et Configurer le fournisseur OAuth dans ServiceNow IDE.

    2. Activez le serveur MCP Figma sur ServiceNow IDE:
      1. Sur ServiceNow IDE, sélectionnez l’icône Engrenage dans le coin inférieur gauche, puis sélectionnez Paramètres.
      2. Recherchez Agent concepteur.
        Agent concepteur Tous les paramètres sont répertoriés.
      3. Activez le serveur MCP Figma en sélectionnant la case à cocher Build-agent : Activer les serveurs MCP .
    3. Ouvrez le panneau de Agent concepteur messagerie instantanée.
    4. Localisez l’icône MCP icône MCP en haut à droite du panneau de messagerie instantanée et sélectionnez-la pour ouvrir la page du serveur MCP.
    5. Sélectionnez Se connecter pour déclencher le flux d’authentification OAuth que vous avez configuré.
      Vous êtes invité à vous connecter à Figma et à autoriser votre ServiceNow application.
    6. Une fois que vous avez approuvé la demande de ServiceNow connexion, revenez au panneau de Agent concepteur messagerie instantanée.
      L’état du serveur MCP Figma est vert, indiquant qu’il est connecté à Figma, et tous les outils disponibles sont répertoriés. Le jeton généré est enregistré dans la table des informations d’identification Git Ide sur le ServiceNow IDE.

    Résultats

    Vous pouvez désormais interagir avec le serveur Figma MCP en langage naturel via le Agent concepteur fichier .

    Par exemple, vous pouvez utiliser des invites telles que : « Créer une page d’interface utilisateur et créer <lien figma > ». Le récupère Agent concepteur le contexte de conception à partir de Figma et crée une application qui correspond à la conception.

    Important :
    La mesure dans laquelle l’application s’aligne sur la conception originale est largement influencée par la complexité et la structure globale de la conception. Lorsque la conception est simple et simple, l’application a tendance à refléter fidèlement la conception prévue. À l’inverse, si le dessin est complexe ou multiforme, l’application peut s’écarter de manière plus importante du dessin original.

    Pour mieux organiser vos fichiers Figma, reportez-vous à Structurer votre fichier Figma pour un meilleur codage et Écrivez des invites efficaces pour guider l’IA.

    Tableau 1. Dépannage : Agent concepteur problèmes
    Problème Description Solution
    Erreur d’accès non autorisé Le serveur MCP peut parfois être inactif et vous pouvez rencontrer une erreur d’accès non autorisé. Le problème se produit lorsque Figma rejette le jeton créé après avoir terminé le flux OAuth.
    Pour résoudre le problème, procédez comme suit :
    1. Accédez à la table Informations d’identification Git Ide dans le ServiceNow IDE et recherchez le jeton approprié. Dans la colonne Actif, basculez la valeur de true à false pour ce jeton.
    2. Revenez au panneau de Agent concepteur messagerie instantanée.
    3. Localisez l’icône MCP icône MCP en haut à droite du panneau de messagerie instantanée et sélectionnez-la pour ouvrir la page du serveur MCP.
    4. Sélectionnez Se connecter pour déclencher le flux d’authentification OAuth.