Skip to content

salesforcecommercecloud/figma-to-sfnext-pagedesigner

v0.1.0Apache-2.0

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.

GitHubOpen Website

figma-to-sfnext-pagedesigner

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.

⚠️ Prerequisite: Figma MCP server

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.

Before using this plugin:

  1. Add the Figma MCP server to your AI tool's MCP configuration (see your IDE's MCP docs).
  2. 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=<value>.
  3. Have a Storefront Next project checked out (with the sfnext CLI available via pnpm sfnext …).

Installation

# Claude Code
claude plugin marketplace add SalesforceCommerceCloud/b2c-developer-tooling
claude plugin install figma-to-sfnext-pagedesigner@b2c-developer-tooling

# GitHub Copilot CLI
copilot plugin marketplace add SalesforceCommerceCloud/b2c-developer-tooling
copilot plugin install figma-to-sfnext-pagedesigner@b2c-developer-tooling

VS Code (GitHub Copilot): Command Palette → Chat: Install Plugin From Source → enter the repo SalesforceCommerceCloud/b2c-developer-tooling.

For file-copy install to any supported IDE, use b2c setup skills figma-to-sfnext-pagedesigner. See the install guide for details.

Usage

/figma-to-sfnext-pagedesigner

The skill asks for a Figma frame URL (must include node-id), a Storefront Next repo URL or local path, and a Page Designer group (palette folder). It then:

  1. Splits the frame into one Page Designer block per visual section.
  2. Shows you the authorable fields and default values for each block — and a token reconciliation table where the design diverges from your brand.css — then waits for your approval before writing any code.
  3. Generates React + Tailwind components using your project's brand tokens, adds Page Designer decorator metadata with defaults pre-filled from the Figma copy, and wires up SCAPI product loaders for catalog-backed sections.
  4. Registers each component, commits, and pushes.
  5. Validates design fidelity in the browser (when a browser MCP is available).

After CI runs (MRT deploy + cartridge deploy), the new blocks appear in the Business Manager Page Designer palette with fields pre-filled from the Figma design.

What's included

  • figma-to-sfnext-pagedesigner — the end-to-end Figma → Page Designer workflow (5 phases, with a user approval gate before any code is written). Bundles a references/PAGE-DESIGNER-SFN.md mental-model doc the skill reads during pre-flight.

License

Apache-2.0. See the repo LICENSE.