Framer

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.

::callout{icon="heroicons-outline:rocket-launch"} Quick Start

1. Open a collection: In Framer, create or open a regular CMS collection, then open the Directus plugin from it
2. Connect: Enter your Directus URL and access token, then click Connect
3. Map and sync: Select a Directus collection, map your fields, click Configure Collection, then run Sync from Directus or Sync to Directus ::

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.

Field Mapping

The slug field

Every Framer CMS collection requires one field as the slug - a unique, URL-safe identifier for each item (for example, my-article-title). During field mapping, mark one Directus field as the slug. If none of your Directus fields work as a slug, the plugin can generate one automatically from the item ID.

The slug is used to match items between Framer and Directus on every subsequent sync. Changing the slug field after your first sync will cause items to be treated as new rather than updated.

Field types

When syncing from Directus to Framer, each Directus field is mapped to a Framer field type. The plugin infers a sensible default:

Directus type	Default Framer type
Text, string, UUID, JSON	String
Integer, float, decimal	Number
Boolean	Boolean
Date, datetime, timestamp	Date
Image / file relation	Image
Rich text (HTML)	Formatted text
Color	Color
Many-to-one relation	Collection reference (see below)

You can change any inferred type in the mapping screen before clicking Configure Collection.

Collection references

A collection reference field links an item in your current collection to an item in a different Framer collection (for example, an article linked to its author). These are created from Directus many-to-one (m2o) relation fields.

Collection reference rows appear unchecked by default. To enable one:

1. Check the row to include it.
2. Select the related Framer collection from the dropdown that appears.
3. Select the match field - the field in that related collection that holds the Directus UUID, used to look up the linked item.

Both fields must be set before you can click Configure Collection.

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 (default): 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.