Skip to main content
AI/MLjeremylongshore

framer-upgrade-migration

'Analyze, plan, and execute Framer SDK upgrades with breaking change

Stars
2,267
Source
jeremylongshore/claude-code-plugins-plus-skills
Updated
2026-05-31
Slug
jeremylongshore--claude-code-plugins-plus-skills--framer-upgrade-migration
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/jeremylongshore/claude-code-plugins-plus-skills/HEAD/plugins/saas-packs/framer-pack/skills/framer-upgrade-migration/SKILL.md -o .claude/skills/framer-upgrade-migration.md

Drops the SKILL.md into .claude/skills/framer-upgrade-migration.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Framer Upgrade & Migration

Overview

Guide for upgrading Framer plugin SDK, Server API, and migrating between Framer platform versions. Check the Framer Developer Changelog for breaking changes before upgrading.

Instructions

Step 1: Check Current Versions

npm list framer-plugin framer-api framer
npm view framer-plugin version
npm view framer-api version

Step 2: Review Changelog

Visit https://www.framer.com/developers/changelog for breaking changes.

Key migrations:

  • Plugin API 3.x: Introduced Managed Collections, Code File APIs
  • Server API beta: WebSocket-based programmatic access
  • Code Components v2: Updated property control types

Step 3: Upgrade Plugin SDK

git checkout -b upgrade/framer-plugin
npm install framer-plugin@latest
npm run build  # Check for type errors
npm test       # Run tests

Step 4: Common Migration Patterns

// Plugin API 2.x → 3.x: Collection APIs changed
// BEFORE: framer.createCollection(...)
// AFTER: framer.createManagedCollection(...)

// Code components: ControlType changes
// BEFORE: ControlType.FusedNumber
// AFTER: ControlType.Number (with min/max/step)

// Overrides: import path
// BEFORE: import { Override } from 'framer'
// AFTER: import { Override } from 'framer' (unchanged, but check type shape)

Step 5: Rollback

# Pin to previous version
npm install framer-plugin@3.x.x --save-exact

Resources

Next Steps

For CI integration, see framer-ci-integration.