Integration

The Directus Framer plugin connects a Framer CMS collection to a Directus collection, letting you pull content into Framer or push edits back to Directus without leaving your project.

Before You Start

You will need:

• A Framer account with a project open
• A Directus instance (cloud or self-hosted)
• A Directus API access token with permissions to read and write the collections you want to sync

To generate an API token in Directus, open Settings, go to Users, select or create a user, scroll to Token, click Generate Token, and save.

How It Works

The plugin runs inside Framer as a panel. You install it once per project and use it for each collection you want to connect to Directus.

Each Framer CMS collection has its own saved Directus connection and field mapping. To connect a second collection, open that collection in Framer, open the plugin again, and configure it separately. The plugin stores each collection's config independently.

Only regular (user-created) CMS collections are supported.

Getting Started

First-time setup

1. In Framer, create or open a regular CMS collection. Go to Add data and select Collection, or open an existing one.
2. Open the Directus plugin from within that collection.
3. Enter your Directus URL and access token, then click Connect.
4. Choose which Directus collection to sync. Select an existing collection from the list, or choose Create new to create a new Directus collection based on your Framer fields.
5. Map your fields: set which field is the slug, which is the ID, and adjust any field types as needed. Click Configure Collection. The plugin adds the mapped fields to your Framer collection.
6. Click Sync from Directus to pull items in, or Sync to Directus to push your Framer items out.

Syncing again later

1. Open the same Framer collection.
2. Open the Directus plugin. It restores the saved configuration automatically.
3. Run Sync from Directus or Sync to Directus as needed.

To change the field mapping after your first sync, click Reconfigure on the sync screen. The Back button is only available before you have run a sync.

Syncing Data

Sync from Directus

The plugin fetches items from the Directus collection, converts them to Framer items, and adds or updates them in your Framer collection. Existing items with a matching ID are updated; new items are added. The sync does not wipe the collection - it only adds or updates.

Framer enforces one item per slug. If Directus has duplicate slugs, the plugin keeps the first item and skips the rest. The plugin reports how many items were skipped. Use unique slugs in Directus to avoid this, or sync into a new empty Framer collection for a clean start.

Sync to Directus

The plugin reads your Framer items, maps them to Directus fields, and creates or updates items in Directus by slug. You can edit item content in Framer and then run Sync to Directus to push those changes.

Conflict Resolution

A conflict occurs when the same item has been updated in both Framer and Directus since the last sync. The plugin detects conflicts in both sync directions.

• Always overwrite (skip conflict screen) checked: The plugin uses the source side's version for every item and skips the conflict screen.
• Always overwrite (skip conflict screen) unchecked: Items with changes on both sides are listed individually. For each one, click Use Framer to keep the Framer version or Use Directus to accept the Directus version.