Automatisation Figma avec n8n : mise à jour de Jira en temps réel
- Ce workflow n8n a pour objectif d'automatiser la gestion des versions dans Figma tout en synchronisant les mises à jour dans Jira. Dans un environnement de développement agile, il est essentiel de garder une trace des modifications apportées aux designs et de les relier aux tickets Jira correspondants. Ce processus permet aux équipes de design et de développement de travailler plus efficacement, en réduisant les risques de confusion et en garantissant que les commentaires et les mises à jour sont toujours à jour.
- Le workflow débute avec un déclencheur Figma qui s'active lorsqu'un événement spécifique se produit dans un projet de design. Ensuite, le nœud 'Find Jira Issue' recherche le ticket Jira correspondant en utilisant la clé d'incident fournie. Une fois le ticket identifié, le nœud 'Add Comment in Issue' permet d'ajouter un commentaire pertinent au ticket, informant ainsi l'équipe de développement des modifications effectuées dans Figma. Ce flux d'automatisation n8n garantit que toutes les parties prenantes sont informées en temps réel, ce qui améliore la collaboration et la transparence entre les équipes.
- En intégrant cette automatisation, les entreprises peuvent réduire le temps consacré à la mise à jour manuelle des tickets, minimiser les erreurs de communication et améliorer la productivité globale. Grâce à cette solution, les équipes peuvent se concentrer davantage sur leur travail créatif et technique, tout en ayant l'assurance que les informations sont toujours à jour.
Workflow n8n Jira, Figma : vue d'ensemble
Schéma des nœuds et connexions de ce workflow n8n, généré à partir du JSON n8n.
Workflow n8n Jira, Figma : détail des nœuds
Inscris-toi pour voir l'intégralité du workflow
Inscription gratuite
S'inscrire gratuitementBesoin d'aide ?{
"id": "5kYHogzDGeo21MxE",
"meta": {
"instanceId": "e7bcfb7f83803b3561455f2e97f622835eda64ae4467d4f2b8a5cf915b534600",
"templateCredsSetupCompleted": true
},
"name": "Automate Figma Versioning and Jira Updates with n8n Webhook Integration",
"tags": [],
"nodes": [
{
"id": "a3853962-36ce-4a2f-b9d6-c2807652d7ff",
"name": "Sticky Note",
"type": "n8n-nodes-base.stickyNote",
"position": [
-20,
-260
],
"parameters": {
"width": 700,
"height": 200,
"content": "## Note\nTo use this automation, you will need the Figma Commit Plugin installed and configured. The plugin sends the design version details via a webhook to trigger this n8n workflow.\n\nYou can find the Figma Commit Plugin on GitHub here:\n🔗 [Figma Commit Plugin on GitHub](https://github.com/omid-d3v/Figma-Commit-plugin-with-webhook/)\n\nMake sure to follow the setup instructions in the plugin’s documentation to get started."
},
"typeVersion": 1
},
{
"id": "843f1e0b-4c8b-4744-a9b7-8ce5725768bc",
"name": "Find Jira Issue",
"type": "n8n-nodes-base.jira",
"position": [
220,
0
],
"parameters": {
"issueKey": "={{ $json.issueLink }}",
"operation": "get",
"additionalFields": {}
},
"credentials": {
"jiraSoftwareCloudApi": {
"id": "CBgXAIn2agwnaJ1Y",
"name": "Jira SW Cloud account"
}
},
"typeVersion": 1
},
{
"id": "59101813-9625-4d1f-b2b6-7ff442c1fe0f",
"name": "Add Comment in Issue",
"type": "n8n-nodes-base.jira",
"position": [
440,
0
],
"parameters": {
"comment": "={{ $('Figma Trigger').item.json.pageName }}{{ '\\n' }}{{ $('Figma Trigger').item.json.versionName }}{{ '\\n' }}{{ $('Figma Trigger').item.json.designLink }}{{ '\\n' }} {{ $now }}",
"options": {},
"issueKey": "={{ $json.key }}",
"resource": "issueComment"
},
"credentials": {
"jiraSoftwareCloudApi": {
"id": "CBgXAIn2agwnaJ1Y",
"name": "Jira SW Cloud account"
}
},
"typeVersion": 1
},
{
"id": "378150c5-b640-477a-861f-216e8b15c0e4",
"name": "Figma Trigger",
"type": "n8n-nodes-base.figmaTrigger",
"position": [
0,
0
],
"webhookId": "b9fcde90-3e53-4958-b352-933891f95220",
"parameters": {
"teamId": "940915773877350235",
"triggerOn": "fileVersionUpdate"
},
"credentials": {
"figmaApi": {
"id": "DjRDveAKp5VxZRE8",
"name": "Figma account"
}
},
"typeVersion": 1
}
],
"active": true,
"pinData": {
"Figma Trigger": [
{
"json": {
"status": "IN PROGRESS",
"pageName": "page: Favorait",
"issueLink": "JAJ-368",
"designLink": "test url ",
"versionName": "Changes: \n -nothing"
}
}
]
},
"settings": {
"executionOrder": "v1"
},
"versionId": "9525049e-7fca-4f83-bf6a-069d477f669e",
"connections": {
"Figma Trigger": {
"main": [
[
{
"node": "Find Jira Issue",
"type": "main",
"index": 0
}
]
]
},
"Find Jira Issue": {
"main": [
[
{
"node": "Add Comment in Issue",
"type": "main",
"index": 0
}
]
]
},
"Add Comment in Issue": {
"main": [
[]
]
}
}
}Workflow n8n Jira, Figma : pour qui est ce workflow ?
Ce workflow s'adresse aux équipes de design et de développement travaillant dans des environnements agiles, notamment les entreprises de taille moyenne à grande. Il est idéal pour les organisations qui utilisent Figma pour le design et Jira pour la gestion de projet, et qui cherchent à améliorer leur efficacité opérationnelle. Un niveau technique intermédiaire est recommandé pour la mise en place de cette automatisation n8n.
Workflow n8n Jira, Figma : problème résolu
Ce workflow résout le problème de la synchronisation des mises à jour entre Figma et Jira, qui est souvent un point de friction dans les équipes de design et de développement. En automatisant ce processus, il élimine les frustrations liées à la mise à jour manuelle des tickets Jira, réduit les risques d'erreurs de communication et assure que toutes les modifications de design sont correctement documentées. Les utilisateurs bénéficient ainsi d'une visibilité accrue sur les projets et d'une collaboration améliorée entre les équipes.
Workflow n8n Jira, Figma : étapes du workflow
Étape 1 : Le workflow est déclenché par un événement dans Figma via le nœud 'Figma Trigger'.
- Étape 1 : Le nœud 'Find Jira Issue' recherche le ticket Jira correspondant à l'événement déclencheur.
- Étape 2 : Une fois le ticket identifié, le nœud 'Add Comment in Issue' ajoute un commentaire au ticket, informant l'équipe de développement des modifications apportées dans Figma. Ce flux assure une communication fluide entre les équipes et une mise à jour en temps réel des informations.
Workflow n8n Jira, Figma : guide de personnalisation
Pour personnaliser ce workflow, commencez par ajuster le nœud 'Figma Trigger' en spécifiant l'ID de l'équipe et les événements sur lesquels vous souhaitez déclencher l'automatisation. Ensuite, modifiez le nœud 'Find Jira Issue' en fournissant la clé d'incident appropriée et en configurant les champs supplémentaires nécessaires. Enfin, dans le nœud 'Add Comment in Issue', personnalisez le contenu du commentaire pour qu'il reflète les informations pertinentes que vous souhaitez communiquer. Vous pouvez également intégrer d'autres outils ou services selon vos besoins, tout en veillant à sécuriser et monitorer le flux pour garantir son bon fonctionnement.