diff --git a/app/components/IntegrationsList.vue b/app/components/IntegrationsList.vue
index 763cca70..49ed88c9 100644
--- a/app/components/IntegrationsList.vue
+++ b/app/components/IntegrationsList.vue
@@ -30,6 +30,12 @@ const integrations = [
 		to: '/guides/integrations/netlify',
 		logo: '/docs/img/tutorials/netlify.png',
 	},
+	{
+		title: 'Framer',
+		description: 'Sync content between Directus collections and Framer\'s CMS in both directions.',
+		to: '/guides/integrations/framer',
+		logo: '/docs/img/framer.png',
+	},
 ];
 </script>
 
diff --git a/content/guides/11.integrations/6.framer/.navigation.yml b/content/guides/11.integrations/6.framer/.navigation.yml
new file mode 100644
index 00000000..9dac12af
--- /dev/null
+++ b/content/guides/11.integrations/6.framer/.navigation.yml
@@ -0,0 +1,2 @@
+title: Framer
+headline: Framer
diff --git a/content/guides/11.integrations/6.framer/0.index.md b/content/guides/11.integrations/6.framer/0.index.md
new file mode 100644
index 00000000..666c7d4f
--- /dev/null
+++ b/content/guides/11.integrations/6.framer/0.index.md
@@ -0,0 +1,73 @@
+---
+id: framer-integration
+title: Integration
+description: Connect your Directus collections to Framer's CMS to sync content in both directions using the Directus Framer plugin.
+technologies:
+  - 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.
+
+## 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.
diff --git a/public/img/framer.png b/public/img/framer.png
new file mode 100644
index 00000000..20856448
Binary files /dev/null and b/public/img/framer.png differ