Creating a Framer Plugin can be a powerful way to customize, extend, and enhance the Framer design environment. This guide will help you get started with plugin development, from installation to publishing, so that you can create and share useful tools with the Framer community.

What Are Framer Plugins?

Framer Plugins are custom tools that developers can add to the Framer design environment to expand functionality or streamline workflows. They can range from utilities that enhance design capabilities to complex tools that manage integrations or even UI extensions.

Getting Started with Framer Plugin Development

Creating a Framer Plugin is straightforward. To begin, you’ll set up a development environment using the command line, allowing you to create a new plugin and begin coding right away.

Installation

Start by installing the necessary package with a single command. This command will guide you through an initial setup, creating a new plugin folder with a ready-to-go plugin template.

// npm (recommended)
npm create framer-plugin@latest

// or with alternative package managers
pnpm create framer-plugin
yarn create framer-plugin

Manual Installation

If you’re adding the plugin to an existing project, you can directly install the framer-plugin package. Although this is not yet officially supported, it’s possible to integrate the plugin API in this way.

Running Your Plugin

After setting up, navigate into your plugin folder by typing cd your-plugin, and then run the development server with npm run dev. Keep this command running as you develop your plugin. This will allow Framer to detect your plugin, updating it automatically as you make changes.

Note: Framer Plugins require a modern version of Node.js. If you receive errors, consider updating Node.js or use a version manager like npm.

Opening Your Plugin in Framer

With your plugin running locally, you’ll want to see it in action within Framer. To do this, enable Developer Tools in Framer by navigating to the Plugin section in the main menu. Once enabled, you can launch your plugin within Framer and begin testing.

Building Functionality: Key APIs

Framer Plugins can access a broad set of functions to interact with the Framer environment. Here are some key areas:

Plugin UI

The Plugin UI can be customized using commands like showUI and hideUI. You can set the size and position for added flexibility.

framer.showUI({
  position: "center",
  height: 300,
  width: 220
})

Project Information

Retrieve data about the current project using getProjectInfo. This provides a way to access project names and IDs.

Selection Control

You can control what’s selected on the canvas by using getSelection or setSelection, and respond to user selection changes with subscribeToSelection.

Asset Management

Work with assets like images and SVGs using uploadImage or addSvg. You can drag and drop these assets directly into the Framer workspace.

Using Custom Code with Plugins

Framer Plugins also support custom code, allowing developers to insert HTML snippets into a user’s website. This can be particularly useful for third-party integrations.

framer.setCustomCode({
  html: '<script src="https://example.com/script.js"></script>',
  location: "bodyEnd"
})

Publishing Your Plugin

Once your plugin is ready, you’ll likely want to share it on the Framer Marketplace. This is how:

Preparing for Submission

Before submitting, ensure your plugin icon, name, and functionality are polished. Test it in different browsers and states to catch any potential issues.

Submitting Your Plugin

In the Framer Marketplace dashboard, select “New Plugin” to start. Run npm run pack in the plugin’s root directory to create a plugin.zip file. Upload this file in the submission form, complete the necessary details, and submit for review.

API Reference: Essential Commands

The Framer Plugin API includes a variety of functions. Here’s a quick overview:

User and Project Information

Retrieve user and project details for personalized plugin interactions.

CMS Integrations

Use getCollections and similar commands to interact with CMS data, opening up dynamic content possibilities within plugins.

Storing Data

With getPluginData and setPluginData, store data that can persist across sessions, such as user preferences or saved states.

Editor Commands

Access tools like zoomIntoView to programmatically adjust the viewport, enhancing user experience directly through your plugin.

Conclusion

Framer Plugin development is an exciting way to expand Framer’s capabilities. With this guide, you’re equipped to begin creating, testing, and publishing plugins for the Framer community.

If you’re ready to take your design to the next level, Aquila Design is here to help. Reach out to us today to see how we can transform your project!