✨ Add Figma Trigger Node (#2521)

* ✨ Figma Trigger

* ⚡ Improvements

* ⚡ Small cleanup

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>

packages/nodes-base/credentials/FigmaApi.credentials.ts

@@ -0,0 +1,18 @@
+import {
+	ICredentialType,
+	INodeProperties,
+} from 'n8n-workflow';
+
+export class FigmaApi implements ICredentialType {
+	name = 'figmaApi';
+	displayName = 'Figma API';
+	documentationUrl = 'figma';
+	properties: INodeProperties[] = [
+		{
+			displayName: 'Access Token',
+			name: 'accessToken',
+			type: 'string',
+			default: '',
+		},
+	];
+}

packages/nodes-base/nodes/Figma/FigmaTrigger.node.ts

@@ -0,0 +1,183 @@
+import {
+	IHookFunctions,
+	IWebhookFunctions,
+} from 'n8n-core';
+
+import {
+	IDataObject,
+	INodeType,
+	INodeTypeDescription,
+	IWebhookResponseData,
+} from 'n8n-workflow';
+
+import {
+	figmaApiRequest,
+} from './GenericFunctions';
+
+import {
+	snakeCase,
+} from 'change-case';
+
+import {
+	randomBytes,
+} from 'crypto';
+
+export class FigmaTrigger implements INodeType {
+	description: INodeTypeDescription = {
+		displayName: 'Figma Trigger (Beta)',
+		name: 'figmaTrigger',
+		icon: 'file:figma.svg',
+		group: ['trigger'],
+		version: 1,
+		subtitle: '={{$parameter["triggerOn"]}}',
+		description: 'Starts the workflow when Figma events occur',
+		defaults: {
+			name: 'Figma Trigger (Beta)',
+			color: '#29b6f6',
+		},
+		inputs: [],
+		outputs: ['main'],
+		credentials: [
+			{
+				name: 'figmaApi',
+				required: true,
+			},
+		],
+		webhooks: [
+			{
+				name: 'default',
+				httpMethod: 'POST',
+				responseMode: 'onReceived',
+				path: 'webhook',
+			},
+		],
+		properties: [
+			{
+				displayName: 'Team ID',
+				name: 'teamId',
+				type: 'string',
+				required: true,
+				default: '',
+				description: 'Trigger will monitor this Figma Team for changes. Team ID can be found in the URL of a Figma Team page when viewed in a web browser: figma.com/files/team/{TEAM-ID}/',
+			},
+			{
+				displayName: 'Trigger On',
+				name: 'triggerOn',
+				type: 'options',
+				options: [
+					{
+						name: 'File Commented',
+						value: 'fileComment',
+						description: 'Triggers when someone comments on a file',
+					},
+					{
+						name: 'File Deleted',
+						value: 'fileDelete',
+						description: 'Triggers whenever a file has been deleted. Does not trigger on all files within a folder, if the folder is deleted',
+					},
+					{
+						name: 'File Updated',
+						value: 'fileUpdate',
+						description: 'Triggers whenever a file saves or is deleted. This occurs whenever a file is closed or within 30 seconds after changes have been made',
+					},
+					{
+						name: 'File Version Updated',
+						value: 'fileVersionUpdate',
+						description: 'Triggers whenever a named version is created in the version history of a file',
+					},
+					{
+						name: 'Library Publish',
+						value: 'libraryPublish',
+						description: 'Triggers whenever a library file is published',
+					},
+				],
+				default: '',
+				required: true,
+			},
+		],
+	};
+
+	// @ts-ignore (because of request)
+	webhookMethods = {
+		default: {
+			async checkExists(this: IHookFunctions): Promise<boolean> {
+				const webhookUrl = this.getNodeWebhookUrl('default');
+				const webhookData = this.getWorkflowStaticData('node');
+				const teamId = this.getNodeParameter('teamId') as string;
+				const triggerOn = this.getNodeParameter('triggerOn') as string;
+				// Check all the webhooks which exist already if it is identical to the
+				// one that is supposed to get created.
+				const { webhooks } = await figmaApiRequest.call(this, 'GET', `/v2/teams/${teamId}/webhooks`);
+				for (const webhook of webhooks) {
+					if (webhook.endpoint === webhookUrl
+						&& webhook.team_id === teamId
+						&& webhook.event_type === snakeCase(triggerOn).toUpperCase()
+						&& webhook.status === 'ACTIVE') {
+						webhookData.webhookId = webhook.id as string;
+						return true;
+					}
+				}
+				return false;
+			},
+			async create(this: IHookFunctions): Promise<boolean> {
+				const webhookData = this.getWorkflowStaticData('node');
+				const webhookUrl = this.getNodeWebhookUrl('default');
+				const triggerOn = this.getNodeParameter('triggerOn') as string;
+				const teamId = this.getNodeParameter('teamId') as string;
+				const endpoint = '/v2/webhooks';
+
+				const body: IDataObject = {
+					event_type: snakeCase(triggerOn).toUpperCase(),
+					team_id: teamId,
+					description: `n8n-webhook:${webhookUrl}`,
+					endpoint: webhookUrl,
+					passcode: randomBytes(10).toString('hex') as string,
+				};
+
+				const responseData = await figmaApiRequest.call(this, 'POST', endpoint, body);
+
+				if (responseData.id === undefined) {
+					// Required data is missing so was not successful
+					return false;
+				}
+
+				webhookData.webhookId = responseData.id as string;
+				return true;
+			},
+			async delete(this: IHookFunctions): Promise<boolean> {
+				const webhookData = this.getWorkflowStaticData('node');
+				if (webhookData.webhookId !== undefined) {
+
+					const endpoint = `/v2/webhooks/${webhookData.webhookId}`;
+					try {
+						await figmaApiRequest.call(this, 'DELETE', endpoint);
+					} catch (error) {
+						return false;
+					}
+					// Remove from the static workflow data so that it is clear
+					// that no webhooks are registred anymore
+					delete webhookData.webhookId;
+				}
+				return true;
+			},
+		},
+	};
+
+	async webhook(this: IWebhookFunctions): Promise<IWebhookResponseData> {
+		const bodyData = this.getBodyData();
+
+		if (bodyData.event_type === 'PING') {
+			const res = this.getResponseObject();
+			res.status(200).end();
+			return {
+				noWebhookResponse: true,
+			};
+		}
+
+		return {
+			workflowData: [
+				this.helpers.returnJsonArray(bodyData),
+			],
+		};
+	}
+}

packages/nodes-base/nodes/Figma/GenericFunctions.ts

@@ -0,0 +1,36 @@
+import {
+	OptionsWithUri,
+} from 'request';
+
+import {
+	IExecuteFunctions,
+	IExecuteSingleFunctions,
+	IHookFunctions,
+	ILoadOptionsFunctions,
+} from 'n8n-core';
+
+import {
+	IDataObject,
+	NodeApiError,
+} from 'n8n-workflow';
+
+export async function figmaApiRequest(this: IHookFunctions | IExecuteFunctions | IExecuteSingleFunctions | ILoadOptionsFunctions, method: string, resource: string, body: any = {}, qs: IDataObject = {}, uri?: string, option: IDataObject = {}): Promise<any> { // tslint:disable-line:no-any
+	const credentials = await this.getCredentials('figmaApi') as { accessToken: string };
+
+	let options: OptionsWithUri = {
+		headers: { 'X-FIGMA-TOKEN': credentials.accessToken },
+		method,
+		body,
+		uri: uri || `https://api.figma.com${resource}`,
+		json: true,
+	};
+	options = Object.assign({}, options, option);
+	if (Object.keys(options.body).length === 0) {
+		delete options.body;
+	}
+	try {
+		return await this.helpers.request!(options);
+	} catch (error) {
+		throw new NodeApiError(this.getNode(), error);
+	}
+}

packages/nodes-base/nodes/Figma/figma.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300" width="1667" height="2500"><style type="text/css">.st0{fill:#0acf83}.st1{fill:#a259ff}.st2{fill:#f24e1e}.st3{fill:#ff7262}.st4{fill:#1abcfe}</style><title>Figma.logo</title><desc>Created using Figma</desc><path id="path0_fill" class="st0" d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z"/><path id="path1_fill" class="st1" d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z"/><path id="path1_fill_1_" class="st2" d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z"/><path id="path2_fill" class="st3" d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z"/><path id="path3_fill" class="st4" d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z"/></svg>

packages/nodes-base/package.json

@@ -88,6 +88,7 @@
       "dist/credentials/EventbriteOAuth2Api.credentials.js",
       "dist/credentials/FacebookGraphApi.credentials.js",
       "dist/credentials/FacebookGraphAppApi.credentials.js",
+      "dist/credentials/FigmaApi.credentials.js",
       "dist/credentials/FileMaker.credentials.js",
       "dist/credentials/FlowApi.credentials.js",
       "dist/credentials/FormIoApi.credentials.js",
@@ -399,6 +400,7 @@
       "dist/nodes/ExecuteWorkflow/ExecuteWorkflow.node.js",
       "dist/nodes/Facebook/FacebookGraphApi.node.js",
       "dist/nodes/Facebook/FacebookTrigger.node.js",
+      "dist/nodes/Figma/FigmaTrigger.node.js",
       "dist/nodes/FileMaker/FileMaker.node.js",
       "dist/nodes/Flow/Flow.node.js",
       "dist/nodes/Flow/FlowTrigger.node.js",