SalesforceCommerceCloud avatar

storefront-next-figma

v1.3.3

by SalesforceCommerceCloud · author: Salesforce

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

What storefront-next-figma does, in the publisher's words

Agent skills for keeping a Salesforce B2C Storefront Next project in sync with its Figma design kit, duplicate the official kit for a new vertical, sync Brand variable collections from brand.css, edit components at the correct layer, and publish Figma Code Connect mappings.

Part of the B2C Developer Tooling marketplace. This is the design-kit companion to the storefront-next plugin, use them together when theming a vertical.

These skills require the Figma MCP server to be configured in your AI tool. The workflow reads and edits Figma files through MCP tools. Without it, 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 or component you want to work with: 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
1.3.3

Links

Skills · 1

sfnext-create-figma-kit
Build or sync a Storefront Next vertical's Figma design kit, duplicate the official kit, update Brand variable collections from brand.css, edit components at the correct layer, and publish Figma Code Connect mappings. Use when asked to set up, duplicate, or sync a Figma kit, update Figma brand var…

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 · design-system · b2c-commerce · commerce-cloud

Related by publisher and keywords

  • figma-to-sfnext-pagedesignerSalesforceCommerceCloud

    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.

  • 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/storefront-next-figma)

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