List Comments with Figma API on Updated Page in Database from Notion API

Pipedream makes it easy to connect APIs for Figma, Notion and 2,000+ other apps remarkably fast.

Trigger workflow on

Updated Page in Database from the Notion API

Next, do this

List Comments with the Figma API

No credit card required

▶

Watch us build a workflow

4 min

Watch now ➜

Trusted by 800,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

Getting Started#

This integration creates a workflow with a Notion trigger and Figma action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the Updated Page in Database trigger
1. Connect your Notion account
2. Configure timer
3. Select a Database ID
4. Optional- Select one or more Property Types
5. Configure Include New Pages
Configure the List Comments action
1. Connect your Figma account
2. Select a Project Id
3. Select a File Id
Deploy the workflow
Send a test event to validate your setup
Turn on the trigger

Details#

This integration uses pre-built, source-available components from Pipedream's GitHub repo. These components are developed by Pipedream and the community, and verified and maintained by Pipedream.

To contribute an update to an existing component or create a new component, create a PR on GitHub. If you're new to Pipedream component development, you can start with quickstarts for trigger span and action development, and then review the component API reference.

Trigger#

Updated Page in Database on Notion

Description:Emit new event when a page in a database is updated. To select a specific page, use `Updated Page ID` instead

Version:0.0.15

Key:notion-updated-page

View on GitHub

Notion Overview#

Notion's API allows for the creation, reading, updating, and deleting of pages, databases, and their contents within Notion. Leveraging Pipedream's platform, you can build workflows that connect Notion with a myriad of other services to automate tasks such as content management, task tracking, and data synchronization. With Pipedream's serverless execution, you can trigger these workflows on a schedule, or by external events from other services, without managing any infrastructure.

Trigger Code#

import notion from "../../notion.app.mjs";
import sampleEmit from "./test-event.mjs";
import base from "../common/base.mjs";
import constants from "../common/constants.mjs";

export default {
  ...base,
  key: "notion-updated-page",
  name: "Updated Page in Database", /* eslint-disable-line pipedream/source-name */
  description: "Emit new event when a page in a database is updated. To select a specific page, use `Updated Page ID` instead",
  version: "0.0.15",
  type: "source",
  dedupe: "unique",
  props: {
    ...base.props,
    databaseId: {
      propDefinition: [
        notion,
        "databaseId",
      ],
    },
    properties: {
      propDefinition: [
        notion,
        "propertyTypes",
        (c) => ({
          parentId: c.databaseId,
          parentType: "database",
        }),
      ],
      description: "Only emit events when one or more of the selected properties have changed",
      optional: true,
    },
    includeNewPages: {
      type: "boolean",
      label: "Include New Pages",
      description: "Emit events when pages are created or updated. Set to `true` to include newly created pages. Set to `false` to only emit updated pages. Defaults to `false`.",
      default: false,
    },
  },
  hooks: {
    async deploy() {
      if (!this.properties?.length) {
        return;
      }
      const propertyValues = {};
      const pagesStream = this.notion.getPages(this.databaseId);
      for await (const page of pagesStream) {
        propertyValues[page.id] = {};
        for (const property of this.properties) {
          propertyValues[page.id][property] = JSON.stringify(page.properties[property]);
        }
      }
      this._setPropertyValues(propertyValues);
    },
  },
  methods: {
    ...base.methods,
    _getPropertyValues() {
      return this.db.get("propertyValues");
    },
    _setPropertyValues(propertyValues) {
      this.db.set("propertyValues", propertyValues);
    },
  },
  async run() {
    const lastCheckedTimestamp = this.getLastUpdatedTimestamp();
    const lastCheckedTimestampDate = new Date(lastCheckedTimestamp);
    const lastCheckedTimestampISO = lastCheckedTimestampDate.toISOString();
    const propertyValues = this._getPropertyValues();

    // Add a filter so that we only receive pages that have been updated since the last call.
    const params = {
      ...this.lastUpdatedSortParam(),
      filter: {
        timestamp: "last_edited_time",
        last_edited_time: {
          after: lastCheckedTimestampISO,
        },
      },
    };
    let newLastUpdatedTimestamp = lastCheckedTimestamp;

    const pagesStream = this.notion.getPages(this.databaseId, params);

    for await (const page of pagesStream) {
      if (!this.isResultNew(page.last_edited_time, lastCheckedTimestamp)) {
        // The call to getPages() includes a descending sort by last_edited_time.
        // As soon as one page !isResultNew(), all of the following ones will also.
        // NOTE: the last_edited_filter means this will never be called,
        // but it's worth keeping as future-proofing.
        break;
      }

      newLastUpdatedTimestamp = Math.max(
        newLastUpdatedTimestamp,
        Date.parse(page?.last_edited_time),
      );

      if (this.properties?.length) {
        let propertyChangeFound = false;
        for (const property of this.properties) {
          const currentProperty = JSON.stringify(page.properties[property]);
          if (!propertyValues[page.id] || currentProperty !== propertyValues[page.id][property]) {
            propertyChangeFound = true;
            propertyValues[page.id] = {
              ...propertyValues[page.id],
              [property]: currentProperty,
            };
          }
        }
        if (!propertyChangeFound) {
          continue;
        }
      }

      if (!this.includeNewPages && page?.last_edited_time === page?.created_time) {
        continue;
      }

      const meta = this.generateMeta(
        page,
        constants.types.PAGE,
        constants.timestamps.LAST_EDITED_TIME,
        constants.summaries.PAGE_UPDATED,
        true,
      );

      this.$emit(page, meta);
    }

    this.setLastUpdatedTimestamp(newLastUpdatedTimestamp);
    this._setPropertyValues(propertyValues);
  },
  sampleEmit,
};

Trigger Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI and CLI.

Label	Prop	Type	Description
Notion	`notion`	`app`	This component uses the Notion app.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
	`timer`	`$.interface.timer`
Database ID	`databaseId`	`string`	Select a value from the drop down menu.
Property Types	`properties`	`string[]`	Select a value from the drop down menu.
Include New Pages	`includeNewPages`	`boolean`	Emit events when pages are created or updated. Set to `true` to include newly created pages. Set to `false` to only emit updated pages. Defaults to `false`.

Trigger Authentication#

Notion uses OAuth authentication. When you connect your Notion account, Pipedream will open a popup window where you can sign into Notion and grant Pipedream permission to connect to your account. Pipedream securely stores and automatically refreshes the OAuth tokens so you can easily authenticate any Notion API.

Pipedream requests the following authorization scopes when you connect your account:

About Notion#

Notion is a new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.

Action#

List Comments on Figma

Description:Lists all comments left on a file. [See the docs here](https://www.figma.com/developers/api#get-comments-endpoint)

Version:0.0.3

Key:figma-list-comments

View on GitHub

Figma Overview#

The Figma API unlocks the power to automate and integrate design workflows, enabling both designers and developers to extract assets, update designs, and manage files programmatically. By leveraging the Figma API on Pipedream, you can create automated processes that sync design updates with other tools, notify team members of changes, or feed design information into other parts of your digital ecosystem.

Action Code#

import common from "../../common/common.mjs";
const { figmaApp } = common.props;

export default {
  ...common,
  name: "List Comments",
  description: "Lists all comments left on a file. [See the docs here](https://www.figma.com/developers/api#get-comments-endpoint)",
  key: "figma-list-comments",
  version: "0.0.3",
  type: "action",
  props: {
    ...common.props,
    projectId: {
      propDefinition: [
        figmaApp,
        "projectId",
        ({ teamId }) => ({
          teamId,
        }),
      ],
    },
    fileId: {
      propDefinition: [
        figmaApp,
        "fileId",
        ({ projectId }) => ({
          projectId,
        }),
      ],
    },
  },
  async run({ $ }) {
    const { fileId } = this;

    const comments = await this.figmaApp.listFileComments(fileId, $);

    if (comments.length > 0) {
      $.export("$summary", `Successfully fetched ${comments.length} comment(s)`);
    } else {
      $.export("$summary", "No comments fetched");
    }
    return comments;
  },
};

Action Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI.

Label	Prop	Type	Description
Figma	`figmaApp`	`app`	This component uses the Figma app.
Project Id	`projectId`	`string`	Select a value from the drop down menu.
File Id	`fileId`	`string`	Select a value from the drop down menu.

Action Authentication#

Figma uses OAuth authentication. When you connect your Figma account, Pipedream will open a popup window where you can sign into Figma and grant Pipedream permission to connect to your account. Pipedream securely stores and automatically refreshes the OAuth tokens so you can easily authenticate any Figma API.

Pipedream requests the following authorization scopes when you connect your account:

file_read

About Figma#

Figma is the leading collaborative design tool for building meaningful products.

More Ways to Connect Figma + Notion#

Other Popular Integrations#

Retrieve Block with Notion API on New Comment (Instant) from Figma API

Figma + Notion

List Comments with Figma API on Updated Page in Database from Notion API

Pipedream makes it easy to connect APIs for Figma, Notion and 2,000+ other apps remarkably fast.

Trusted by 800,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

1-24of2,000+apps by most popular

1
-
24
of
2,000+
apps by most popular