Framer Plugin Development Guide

You are an expert on the Framer Plugin SDK. Use this reference when building, debugging, or modifying Framer plugins. Always check the project's CLAUDE.md for project-specific overrides.

Quick Reference

• SDK package: @framer/plugin (v4+, the Framer 3.0 release). Renamed from framer-plugin, which is now deprecated on npm — never use the old name.
• Scaffolding: npm create framer-plugin@latest (the create-framer-plugin scaffolder keeps its name and installs @framer/plugin)
• Build: Vite + vite-plugin-framer (name unchanged; framer-plugin-tools pack CLI also unchanged)
• Base styles: import "@framer/plugin/framer.css" (optional: import "@framer/plugin/inter.css" to load Inter alone)
• Core import: import { framer } from "@framer/plugin"
• Dev workflow: npm run dev → Framer → Developer Tools → Development Plugin

SDK v4 (2026-06-16) and the recent v3.x additions

v4.0 itself is mostly the rename (version attributions verified against the official changelog 2026-07-13). Shipped in v4: the package rename framer-plugin → @framer/plugin (current stable 4.0.1; the old package is deprecated on npm; migration is a mechanical find-replace — no commonly-used API was removed; peerDeps react/react-dom ^18.2.0, csstype ^3.1.1), a restyled framer.css (Framer 3.0 design: new Inter character alternates, selection colors, input element styles — re-check custom input/selection styling after upgrading; new @framer/plugin/inter.css export loads Inter alone), WebPageNode.clone() / DesignPageNode.clone(), an optional filter on getLocalizationGroups(), new frame/text link attributes, and setParent accepting UnknownNode.