Framer's Plugins 3.8 introduces developer-friendly APIs to create Web and Design Pages programmatically, streamlining workflows and boosting automation. This guide explains how to use these APIs with simple code snippets that plugin creators can implement immediately.

What’s New?

The core features include two new APIs:

  • createWebPage(path: string): Creates a new web page with the specified path.
  • createDesignPage(pageName: string): Creates a new design page with the given name.

These allow dynamic generation of pages within Framer, saving time on manual page creation and enabling seamless integration with data sources like Airtable, Google Sheets, and Notion.

Supporting details from the announcement highlight robust improvements to Framer’s data plugins. Airtable integration now includes better error handling, descriptive messaging, and fewer restrictions on file types, delivering a smoother experience for users importing complex datasets. Google Sheets gains support for ISO date formats, improved field mapping, and more flexible slug assignment, while Notion’s integration benefits from clarified errors and streamlined warnings, reducing unnecessary friction.

How to Use createDesignPage

Here’s sample code demonstrating how to create a new design page inside a plugin:

// Import the framer object provided in the plugin environment
async function addNewDesignPage() {
try {
// Create a new design page named "My Design Page"
const designPage = await framer.createDesignPage("My Design Page");
console.log("Design page created:", designPage);
} catch (error) {
console.error("Failed to create design page:", error);
}
}

// Call the function to add the page
addNewDesignPage();

This code calls the createDesignPage API with a page name string and waits for the promise to resolve to the new page node. It logs success or handles errors gracefully.

How to Use createWebPage

Similarly, creating a new web page based on a URL path is straightforward:

async function addNewWebPage() {
try {
// Create a new web page with path "/new-page"
const webPage = await framer.createWebPage("/new-page");
console.log("Web page created:", webPage);
} catch (error) {
console.error("Failed to create web page:", error);
}
}

// Execute the function
addNewWebPage();

This generates a selectable web page target for your plugin actions or automated site building.

Why This Matters

Automating page creation reduces repetitive manual work and empowers plugin developers to build more powerful, integrated tools within Framer’s ecosystem. Whether syncing data-driven pages or enabling personalized content generation, these APIs advance design and development efficiency.

Additional Tips

  • Both APIs return a promise resolving to a page node enabling further programmatic manipulation.
  • Use error handling to catch API failures, especially when plugin input could vary.
  • Combine these with data plugins improvements for richer syncing and automation scenarios.

As Framer’s plugin environment evolves, these features mark a significant step toward more dynamic, automated design workflows.

Sources