Help Center

Menu

Frontify

The Frontify component enables integration with your Frontify account. It allows interaction with brand assets, guidelines, and projects stored in Frontify through the GraphQL API.

Credentials

To build an integration flow, the initial step involves creating an app by following these steps:

  1. Sign into your Frontify account.

    For example, https://.frontify.com.

  2. Navigate to Account Settings  Developer  Applications.

  3. Click Add Application and provide:

    Name

    A descriptive name for your app.

    Redirect URI

    The callback URL as https://TENANT_ADDRESS/callback/oauth2, where TENANT_ADDRESS is the domain of the integration platform.

    Confidential

    Enable this option.

    Scopes

    Select the scopes that your integration requires.

    At minimum, select basic:read.

  4. After saving, Frontify generates a Client ID and a Client Secret.

With the app created, proceed to generate new credentials for the component:

  1. Select Type  OAuth2.

  2. From the Choose Auth Client menu, select from previously created clients or select Add New Auth Client:

    Name

    A required string.

    Assign a name for the client.

    Client ID

    A required string.

    Enter the Client ID from your Frontify app.

    Client Secret

    A required string.

    Enter the Client Secret from your Frontify app.

    Authorization Endpoint

    A required string.

    Use Frontify’s OAuth2 authorization endpoint https://.frontify.com/api/oauth/authorize.

    Token Endpoint

    A required string.

    Use Frontify’s refresh token endpoint https://.frontify.com/api/oauth/accesstoken.

  3. In Name Your Credential, enter a name for the credential.

  4. In Scopes (Comma-separated list), specify the scopes to access your Frontify objects.

    For example, basic:read, basic:write.

    Enter the same scopes you selected when creating your Frontify application.

    For more information about scopes, read the Frontify API scope documentation.

    To successfully verify credentials, a minimum of basic:read is required.

  5. Leave the Additional parameters (Comma-separated list) field blank.

  6. In Base URL, enter your Frontify domain (for example, https://mycompany.frontify.com).

  7. From the Version list, select either v1 (default) or v2(beta).

Actions

Execute mutation

Execute any mutation available in the Frontify GraphQL API. This action can be used to create, update, or delete objects, as well as perform any other operation that modifies Frontify data.

Configuration fields

Mutation type

A required drop-down.

The mutation type to execute.

For example, Create Asset.

Select basic fields for resulting object

An optional drop-down.

A predefined set of common fields that can be included in the resulting object.

Reducing the number of fields can lower the query cost.

You can provide additional fields here

An optional string.

You can manually specify extra fields to include in the resulting object.

Be aware that adding many fields may increase query cost.

Example for Update Asset:

asset { id description }
Special notes for Upload File mutation

Required fields:

File URL

A required string.

The URL of the file to upload.

Can be either an external public URL or an internal Maester storage URL.

Size

A required string.

File size in bytes.

Filename

A required string.

Name of the file.

The action automatically splits the file into chunks and uploads each part to Frontify by using presigned URLs returned by the mutation.

Input metadata

Dynamically generated fields according to the chosen Mutation type.

Output metadata

Result object from executed mutation.

Lookup objects (plural)

Lookup a set of objects based on defined criteria. The results can be emitted either as a page or as individual objects.

Configuration fields

Object Type

A required drop-down.

The type of object to look up.

For example, Brands.

Select basic fields for resulting object

An optional drop-down.

A predefined set of common fields that can be included in the resulting object.

Reducing the number of fields can lower the query cost.

You can provide additional fields here

An optional string.

You can manually specify extra fields to include in the resulting object.

Be aware that adding many fields may increase query cost.

Example for Brands:

rgbaColor { red alpha }
Emit Behavior

A required drop-down. Defines how the result objects will be emitted:

  • Emit page: All results are returned together in one array under the key results.

  • Emit individually: Each object is returned in its own message.

Input metadata

Dynamically generated fields according to the chosen Object type.

Output metadata

For Emit Page mode

An object with key results that has an array as its value.

For Emit Individually mode

Each object that fills the entire message.

Lookup object by ID

Lookup a single object by its ID.

Configuration fields

Object Type

A required drop-down.

The type of object to look up.

Select basic fields for resulting object

An optional drop-down.

A predefined set of common fields that can be included in the resulting object.

Reducing the number of fields can lower the query cost.

You can provide additional fields here

An optional string.

You can manually specify extra fields to include in the resulting object.

Be aware that adding many fields may increase query cost.

Example for Brand:

libraries { total }

Input metadata

ID Value

A required string.

The ID of the object to look up.

Output metadata

Dynamically generated fields according to the chosen Object type and selected fields.

Make raw request

Executes custom requests by using the Frontify GraphQL API.

Configuration fields

None.

Input metadata

Request Body

An optional object.

Provide the request body.

Example request body:

"query": "{ currentUser { ... on AccountUser { id email avatar name } } }"

For more information, read the Frontify API reference.

Output metadata

Status Code

A required number.

The HTTP status code of the response.

HTTP headers

A required object.

The response’s HTTP headers.

Response Body

An optional object.

The body of the HTTP response.

Triggers

Webhook

Creates a subscription to selected events.

Required scopes: basic:write, webhooks:read, webhooks:write.

For more information, read the Frontify Webhooks documentation.

Configuration fields

Project ID

A required string.

Specify the project ID.

Name

A required string.

Specify the name for the subscription.

Events

A required drop-down.

Select the events that trigger this webhook.

  • For v1, only subscription to all events is possible.

  • For v2(beta), specific event types can be chosen.

Input metadata

None.

Output metadata

An object with the key event that describes changes.

Known limitations

  • The Webhook trigger can only work in a real-time flow.

  • Frontify does not guarantee the order in which you receive a webhook for a specific event.

  • Occasionally, you might receive the same event multiple times.

  • Clicking Retrieve a new sample for the webhook does not work because the webhook requires a valid event signature.

    Only events sent by Frontify contain a valid signature.