---
title: "figma-to-sfnext-pagedesigner"
description: "Convert a Figma frame into live Storefront Next Page Designer blocks, React components with decorator metadata, brand-token reconciliation, and product data loaders. Requires the Figma MCP server."
canonical: https://agentpluginsdirectory.com/plugins/figma-to-sfnext-pagedesigner
last-updated: 2026-11-07
---

# figma-to-sfnext-pagedesigner
Convert a Figma frame into live Storefront Next Page Designer blocks, React components with decorator metadata, brand-token reconciliation, and product data loaders. Requires the Figma MCP server.
- Slug: figma-to-sfnext-pagedesigner
- Publisher: Salesforce
- Repository: https://github.com/SalesforceCommerceCloud/b2c-developer-tooling
- Manifest: skills/figma-to-sfnext-pagedesigner/plugin.json
- Version: 0.1.0
- License: Apache-2.0
- Category (editorial): design-frontend
- Skills: 1 (figma-to-sfnext-pagedesigner)
- MCP servers: 0
- Stars: 58
- Repository created: 2025-10-31
- Repository last pushed: 2026-11-07
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/figma-to-sfnext-pagedesigner
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What figma-to-sfnext-pagedesigner does, in the publisher's words

An agent skill that converts a Figma frame into live Salesforce Commerce Cloud Page Designer blocks for a Storefront Next project, React components with Page Designer decorator metadata, brand-token reconciliation, and SCAPI product loaders, in one shot.

Part of the B2C Developer Tooling marketplace. Companion to the storefront-next and storefront-next-figma plugins.

This skill requires the Figma MCP server to be configured in your AI tool. The workflow reads design context through Figma MCP. A browser MCP (Playwright or similar) is also recommended for the visual-validation step. Without Figma MCP, the skill can only act as a manual checklist.

- Add the Figma MCP server to your AI tool's MCP configuration (see your IDE's MCP docs).
- Have a Figma URL with a node-id parameter for the frame you want to convert: in Figma, right-click a frame → Copy/Paste as → Copy link; the URL contains node-id=.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/SalesforceCommerceCloud/b2c-developer-tooling/HEAD/skills/figma-to-sfnext-pagedesigner/README.md

## Skills

- figma-to-sfnext-pagedesigner: Convert a Figma frame into one or more live Storefront Next Page Designer blocks in one shot. Use whenever the user provides a Figma URL and wants the design to become merchant-authorable Page Designer components in a Storefront Next project. Requires the Figma MCP server (and a browser MCP for vis…

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.