framer-core-workflow-a

# Framer CMS Plugin — Managed Collections ## Overview Build a Framer plugin that syncs external data into CMS Managed Collections. Managed Collections are plugin-controlled — your plugin creates the schema and populates items. This is the primary integration pattern for connecting Framer to external CMSes, databases, or APIs. ## Prerequisites - Completed `framer-install-auth` setup - Plugin dev server running - Understanding of Framer CMS concepts ## Instructions ### Step 1: Create a Managed Collection ```tsx // src/App.tsx — CMS sync plugin import { framer } from 'framer-plugin'; import { useState } from 'react'; framer.showUI({ width: 340, height: 400, title: 'Content Sync' }); export function App() { const [status, setStatus] = useState(''); const syncCollection = async () => { setStatus('Fetching data...'); const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await response.json(); setStatus('Creating collection...'); const collection = await framer.createManagedCollection({ name: 'Blog Posts', fields: [ { id: 'title', name: 'Title', type: 'string' }, { id: 'body', name: 'Body', type: 'formattedText' }, { id: 'author', name: 'Author', type: 'string' }, { id: 'slug', name: 'Slug', type: 'slug', userEditable: false }, ], }); setStatus(`Syncing ${posts.length} items...`); const items = posts.slice(0, 20).map((post: any) => ({ fieldData:...