Imported from jeremylongshore/tons-of-skills-marketplace (skills/.curated/framer-install-auth/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-install-auth. Copyright stays with the author (MIT).

Framer Install & Auth

Examples

Use a scoped staging credential to confirm a read-only project check, record only the scope and redacted outcome, then revoke the test credential and verify access is denied.

Overview

Set up the Framer Plugin SDK for building editor plugins, or the framer-api package for Server API access. Framer has two developer surfaces: Plugins (run inside the Framer editor UI) and Server API (run from any Node.js server via WebSocket).

Prerequisites

• Node.js 18+
• Framer account (free or paid)
• For Server API: API key from site settings

Instructions

Step 1: Choose Your Integration Type

Step 2: Set Up a Framer Plugin

# Scaffold a new plugin project
npx create-framer-plugin@latest my-plugin
cd my-plugin
npm install
npm run dev

This creates a Vite + React project with the framer-plugin package pre-configured. The plugin runs inside Framer's editor iframe.

Step 3: Set Up the Server API (Headless Access)

npm install framer-api

// server.ts — Server API connection
import { framer } from 'framer-api';

const client = await framer.connect({
  apiKey: process.env.FRAMER_API_KEY!, // From site settings
  siteId: process.env.FRAMER_SITE_ID!,
});

// List all CMS collections
const collections = await client.getCollections();
console.log('Collections:', collections.map(c => c.name));

Step 4: Configure Environment Variables

# .env (NEVER commit)
FRAMER_API_KEY=framer_sk_abc123...
FRAMER_SITE_ID=abc123def456

# .gitignore
.env
.env.local

Step 5: Verify Plugin Connection

Open Framer, go to your project, click Plugins > Development > select your local plugin. The dev server hot-reloads into the editor.

// Plugin verification — runs inside Framer editor
import { framer } from 'framer-plugin';

export function App() {
  const handleTest = async () => {
    const selection = await framer.getSelection();
    console.log('Selected layers:', selection.length);
    framer.notify(`Found ${selection.length} selected layers`);
  };

  return <button onClick={handleTest}>Test Connection</button>;
}

Output

• Plugin project scaffolded with Vite + React
• Server API client connected via WebSocket
• Environment variables configured
• Verified connection to Framer editor or API

Error Handling

Resources

• Framer Plugin Introduction
• Server API Quick Start
• Framer API Reference

Next Steps

After setup, proceed to framer-hello-world for your first plugin or component.