agentpluginsdirectory
SalesforceCommerceCloud avatar

figma-to-sfnext-pagedesigner

v0.1.0

by SalesforceCommerceCloud · author: Salesforce

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.

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 · Open the README on GitHub

Skills
1
MCP servers
0
Stars
56
License
Apache-2.0
Repo created
2025-10-31
Last pushed
2026-09-25
Publisher type
Organization
Version
0.1.0

Links

Skills · 1

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.

Category

Design & Frontend. Assigned by this directory. Agent Plugins 1.0.0 has no category field, so no manifest declares one.

Keywords

salesforce · storefront-next · figma · page-designer · b2c-commerce · commerce-cloud

Related by publisher and keywords

  • storefront-next-figmaSalesforceCommerceCloud

    Figma design-kit skills for Storefront Next verticals, duplicate the kit, sync brand variables, and publish Code Connect. Requires the Figma MCP server.

  • storefront-nextSalesforceCommerceCloud

    Storefront Next development skills for building React 19 storefronts on Salesforce B2C Commerce.

  • b2cSalesforceCommerceCloud

    B2C Commerce development skills including Custom API development guides.

  • b2c-cliSalesforceCommerceCloud

    B2C CLI Skills for Salesforce Commerce Cloud development.

  • b2c-dx-mcpSalesforceCommerceCloud

    Build, debug, and deploy Salesforce B2C Commerce with your AI assistant. Includes documentation, workflow skills, and Salesforce Commerce API tools.

  • b2c-python-sdkSalesforceCommerceCloud

    Consuming the salesforce-b2c-tooling-sdk Python SDK: authenticate to B2C Commerce, resolve dw.json config, and call OCAPI/SCAPI/WebDAV clients and operations from scripts or notebooks.

Add the verified badge to your README[![Verified by AgentPluginsDirectory.com against Schema 1.0.0](https://agentpluginsdirectory.com/badge.svg)](https://agentpluginsdirectory.com/plugins/figma-to-sfnext-pagedesigner)

✓ Verified . We fetched the manifest from GitHub and checked it against the official Agent Plugins 1.0.0 schema at agent-plugins.org.