Ressources · Intégration n8n

Intégration Figma n8nAutomatiser Figma avec n8n.

Un fichier bouge dans Figma, et le reste de la boîte l'apprend deux jours plus tard. L'intégration Figma n8n tient dans un seul nœud, un trigger : 5 événements répartis en 2 familles, livrés par webhook dès que le workflow est actif. Pour les équipes design qui veulent arrêter de relayer à la main.

Tester l'intégration Figma sur n8n

Avis vérifiés sur Trustpilot · Agence IA, automatisation & growth

Pourquoi automatiser

Que fait vraiment l'intégration Figma n8n ?

Le nœud Figma Trigger (Beta) démarre un workflow n8n quand quelque chose se passe dans une équipe Figma. Il écoute 5 événements regroupés en 2 familles, file et library, et il fonctionne en webhook, c'est-à-dire une URL que Figma appelle au moment où l'événement se produit. Le workflow part en quelques secondes, sans rien vérifier à intervalle régulier.

Premier usage, le journal de production. fileUpdate se déclenche dès qu'un fichier est enregistré ou supprimé, l'enregistrement étant compté quand quelqu'un ferme un fichier dans les 30 secondes qui suivent une modification. Une ligne par événement dans Google Sheets, et le suivi d'activité design existe enfin sans que personne ne le tienne.

Deuxième usage, les commentaires qui n'attendent plus. Sur fileComment, chaque commentaire laissé sur un fichier de l'équipe devient une exécution n8n, que tu pousses vers Telegram ou vers le canal de l'équipe. Les valeurs utiles se récupèrent dans l'item entrant avec une expression du type {{ $json.field }}, c'est-à-dire une formule qui lit un champ de la donnée reçue.

Troisième usage, l'archivage des jalons. fileVersionUpdate se déclenche quand une version nommée est créée dans l'historique d'un fichier. C'est le repère le plus proche d'une mise en production côté design : le workflow peut déposer une trace datée dans Google Drive à chaque jalon, sans demander à personne d'y penser.

Ici, le trigger est tout le nœud. Ce qui sort du catalogue d'événements passe par HTTP Request, le nœud générique qui appelle n'importe quel endpoint de l'API Figma en réutilisant le même credential grâce à l'authentification prédéfinie. Le montage habituel tient en deux nœuds : Figma Trigger pour partir, HTTP Request pour aller chercher le reste.

Deux points cadrent le périmètre. Le trigger surveille une équipe, désignée par Team ID, donc une boîte qui travaille sur plusieurs équipes Figma multiplie les workflows. Et fileDelete se compte fichier par fichier : supprimer un dossier entier ne remonte pas un événement pour chacun des fichiers qu'il contenait. Si tu hésites entre les deux plateformes avant de câbler tout ça, l'avis n8n détaille les critères, et la formation n8n reprend ce filtrage sur un workflow réel.

Connexion

Comment brancher Figma sur n8n ?

  1. 01

    Récupère le Team ID avant tout

    C'est le seul paramètre obligatoire du nœud, et il ne s'affiche nulle part dans Figma sous forme de champ. Ouvre la page de l'équipe Figma dans un navigateur et lis l'identifiant dans l'adresse : figma.com/files/team/{TEAM-ID}/. Garde ce qui se trouve entre les barres obliques. Le trigger surveille cette équipe et elle seule.

  2. 02

    Crée le credential access token

    Dans le menu Credentials de n8n, choisis la méthode Access token et colle un Personal Access Token généré depuis ton compte Figma. Il faut un compte de niveau admin ou owner, sinon la connexion ne passe pas. Un credential, c'est un jeu d'identifiants enregistré une fois dans n8n : le nœud le propose ensuite dans sa liste déroulante, sur tous tes workflows.

  3. 03

    Bascule sur OAuth2 si tu auto-héberges

    Sur une instance auto-hébergée, ouvre la page developer apps de Figma, clique Create a new app, nomme-la par exemple n8n integration, copie l'OAuth Redirect URL de n8n dans Add a callback, puis reporte le Client ID et le Client Secret dans le credential n8n. Les scopes par défaut sont webhooks:read et webhooks:write.

Déclencheurs

Qu'est-ce que le Figma Trigger sait écouter ?

Figma Trigger (Beta) est le nœud qui démarre un workflow quand quelque chose se passe dans Figma. Il écoute 5 événements, listés ci-dessous par famille. Tu en choisis un ou plusieurs, tu actives le workflow : n8n enregistre le webhook (l'URL que Figma appelle) sur ton compte.

Ce que tu vois dans n8n

Tous les événements, par famille

Une ligne par objet, une puce par action. L'événement à cocher dans le nœud s'écrit objet.action ; survole une puce pour lire quand il se déclenche.

file.*4
    library.*1

      Notes de configuration

      01Set Up The Figma TriggerCe nœud ouvre le workflow et reste le seul nœud Figma du montage. À l'activation, n8n enregistre un webhook auprès de Figma, autrement dit une URL que Figma appelle à chaque événement retenu. D'où la réception en quelques secondes, et l'absence totale d'intervalle de vérification à régler.

      Ce nœud ouvre le workflow et reste le seul nœud Figma du montage. À l'activation, n8n enregistre un webhook auprès de Figma, autrement dit une URL que Figma appelle à chaque événement retenu. D'où la réception en quelques secondes, et l'absence totale d'intervalle de vérification à régler.

      Paramètres clés

      • Team ID : l'équipe Figma surveillée, champ requis. Un champ requis vide bloque l'exécution du nœud. La valeur se lit dans l'URL de la page d'équipe, figma.com/files/team/{TEAM-ID}/.
      • Trigger On : l'événement écouté. La liste compte 5 entrées réparties en 2 familles, file et library.
      Cas d'usage
      un responsable design ops qui veut que l'activité Figma arrive dans les outils déjà ouverts par le reste de l'entreprise, sans demander aux designers de recopier quoi que ce soit.
      Quand l'utiliser
      dès que le point de départ du workflow est Figma, et non une heure de la journée.
      02File Commented, Updated, Version Updated, DeletedQuatre des 5 événements appartiennent à la famille file, et chacun répond à une question différente. fileComment part quand quelqu'un commente un fichier. fileUpdate part quand un fichier est enregistré ou supprimé, l'enregistrement étant compté à la fermeture du fichier dans les 30 secondes qui suivent une modification. fileVersionUpdate part à la création d'une version nommée dans l'historique. fileDelete part à la suppression d'un fichier, fichier par fichier, la suppression d'un dossier ne rejouant pas l'événement pour chaque fichier qu'il contenait.

      Quatre des 5 événements appartiennent à la famille file, et chacun répond à une question différente. fileComment part quand quelqu'un commente un fichier. fileUpdate part quand un fichier est enregistré ou supprimé, l'enregistrement étant compté à la fermeture du fichier dans les 30 secondes qui suivent une modification. fileVersionUpdate part à la création d'une version nommée dans l'historique. fileDelete part à la suppression d'un fichier, fichier par fichier, la suppression d'un dossier ne rejouant pas l'événement pour chaque fichier qu'il contenait.

      Paramètres clés

      • Trigger On : un seul de ces quatre événements par nœud. Il en faut deux ? Deux nœuds Figma Trigger dans le même workflow.
      • Team ID : cadre les quatre événements sur une équipe unique.
      Cas d'usage
      router les commentaires vers le designer d'astreinte, et tracer les versions nommées au fil de l'eau avec {{ $json.field }}.
      03Library PublishlibraryPublish forme à lui seul la famille library, et il se déclenche à la publication d'un fichier de bibliothèque. Cette publication, c'est l'instant où un composant ou un style devient disponible pour tous ceux qui consomment la bibliothèque. Aucun autre événement de la liste ne porte ce sens précis.

      libraryPublish forme à lui seul la famille library, et il se déclenche à la publication d'un fichier de bibliothèque. Cette publication, c'est l'instant où un composant ou un style devient disponible pour tous ceux qui consomment la bibliothèque. Aucun autre événement de la liste ne porte ce sens précis.

      Paramètres clés

      • Trigger On : réglé sur Library Publish pour un workflow qui ne réagit qu'aux sorties du design system et ignore l'activité quotidienne sur les fichiers.
      • Team ID : la bibliothèque publiée doit appartenir à l'équipe surveillée, sinon rien n'arrive.
      Cas d'usage
      prévenir les développeurs à chaque sortie du design system, ou créer une tâche de revue quand la bibliothèque part.
      Quand l'utiliser
      quand l'unité qui compte est la livraison, pas le fichier.
      Besoin d'aide

      Besoin d'aide pour automatiser Figma avec n8n ?

      L'équipe te répond directement.

      Chaque message est lu par une personne.

      FAQ

      Figma et n8n, les questions qui viennent après

      01L'intégration Figma n8n est-elle gratuite ?
      Oui, côté n8n. Le nœud Figma Trigger (Beta) est livré avec n8n : rien à installer, aucun coût supplémentaire pour le nœud lui-même, que le workflow tourne sur n8n Cloud, l'offre hébergée par n8n, ou sur une instance que tu héberges toi-même en Community Edition sous licence Sustainable Use. Un workflow construit d'un côté fonctionne à l'identique de l'autre, donc rien n'empêche de prototyper sur Cloud puis de déménager sur ton serveur sans retoucher le trigger. Ce que coûte Figma de son côté dépend de ta propre configuration et ne se joue pas dans n8n.
      02Quels credentials faut-il pour le Figma Trigger ?
      Deux méthodes fonctionnent : Access token et OAuth2. Dans les deux cas, il faut un compte Figma de niveau admin ou owner, et c'est le point qui coince le plus souvent au premier essai. La voie access token consiste à générer un Personal Access Token dans Figma puis à le coller dans le credential n8n. La voie OAuth2 demande, sur une instance auto-hébergée, d'enregistrer une application depuis la page developer apps de Figma, puis de reporter le Client ID et le Client Secret dans n8n. Les credentials OAuth2 utilisent par défaut les scopes webhooks:read et webhooks:write, modifiables via le curseur Custom Scopes et la liste Enabled Scopes.
      03Quelles limites avec le nœud Figma dans n8n ?
      Ça dépend de ce que tu cherches à faire. Le catalogue tient en 5 événements, 2 familles, et un Team ID obligatoire : le workflow part donc toujours de l'activité d'une équipe. Ce qui sort de ce catalogue passe par HTTP Request, le nœud générique qui appelle n'importe quel endpoint de l'API Figma en réutilisant le même credential via l'authentification prédéfinie. Un détail de périmètre compte en pratique : File Deleted se compte fichier par fichier, donc la suppression d'un dossier entier ne produit pas un événement pour chaque fichier qui s'y trouvait. À prévoir si le workflow sert de journal de suppression. Côté Figma, les webhooks demandent le plan payant Professional : le plan gratuit Starter ne les supporte pas, donc l'équipe doit d'abord être sur le bon plan pour que le trigger reçoive quoi que ce soit.
      04Le trigger Figma réagit-il en temps réel ?
      Oui. Le Figma Trigger fonctionne en webhook : une URL que n8n enregistre auprès de Figma à l'activation du workflow, et que Figma appelle dès qu'un événement se produit. Chaque événement arrive en quelques secondes et il n'y a aucun intervalle de vérification à régler, donc rien ne tourne en boucle pour aller voir si quelque chose a changé. Une conséquence à anticiper : l'enregistrement se fait à l'activation, donc un workflow laissé inactif ne reçoit rien, et les événements survenus pendant ce temps ne se rattrapent pas. On active d'abord, on teste ensuite.
      05n8n ou Make pour automatiser Figma ?
      Ça dépend de trois critères, pas d'un classement. L'hébergement d'abord : n8n s'installe sur ton propre serveur via Docker ou npm, ou s'utilise sur n8n Cloud, alors que Make est uniquement hébergé par son éditeur. Une équipe dont les fichiers design relèvent d'une politique interne tranche souvent là. Le modèle de coût ensuite : Make se facture à l'opération, ce qui pèse avec un événement File Updated qui part à chaque enregistrement. La logique visuelle enfin : les deux dessinent le workflow sur un canevas, et le choix se fait sur l'éditeur que ton équipe relit le plus vite après un mois d'absence.
      Même plateforme

      Autres docs utiles sur ce stack.

      Voir toutes les intégrations