figma-to-sfnext-pagedesigner

figma-to-sfnext-pagedesigner is a plugin for Claude Code from SalesforceCommerceCloud/b2c-developer-tooling. Its manifest loads nothing; the 1 skill it bundles cost 181 tokens per session together, scanned A, original, Apache-2.0.

A conversion tool that turns Figma frames into live Salesforce Storefront Next page blocks. The output uses React components, brand design tokens, and product-data loaders.

In plain words
What is it for?
Use it when building Storefront Next pages from Figma designs, matching a brand system, and adding product data to the resulting blocks.
Why use it?
It reduces the manual work of translating a visual design into storefront code and connecting that code to commerce data.

Plugin for Claude Code

Written for Claude Code: a Claude Code plugin manifest.

Good fit Use it when building Storefront Next pages from Figma designs, matching a brand system, and adding product data to the resulting blocks.

Compare 6 plugins from other repositories ↓
Install in Claude Code
/plugin marketplace add SalesforceCommerceCloud/b2c-developer-tooling
/plugin install figma-to-sfnext-pagedesigner
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo
git clone --depth 1 https://github.com/SalesforceCommerceCloud/b2c-developer-tooling

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for figma-to-sfnext-pagedesigner

README.md
[![agentmods](https://agentmods.dev/badge/plugins/salesforcecommercecloud/b2c-developer-tooling/figma-to-sfnext-pagedesigner/github.svg)](https://agentmods.dev/plugins/salesforcecommercecloud/b2c-developer-tooling/figma-to-sfnext-pagedesigner)
Your own site
<a href="https://agentmods.dev/plugins/salesforcecommercecloud/b2c-developer-tooling/figma-to-sfnext-pagedesigner"><img src="https://agentmods.dev/badge/plugins/salesforcecommercecloud/b2c-developer-tooling/figma-to-sfnext-pagedesigner/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for figma-to-sfnext-pagedesigner

Your own site · 80×15
<a href="https://agentmods.dev/plugins/salesforcecommercecloud/b2c-developer-tooling/figma-to-sfnext-pagedesigner"><img src="https://agentmods.dev/badge/plugins/salesforcecommercecloud/b2c-developer-tooling/figma-to-sfnext-pagedesigner.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session not measured What this adds to a session before it is invoked.
When invoked not measured The manifest loads nothing itself; its 1 skill cost 181 tokens a session between them.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Security

Grade A, and why

figma-to-sfnext-pagedesigner scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/figma-to-sfnext-pagedesigner/.claude-plugin/plugin.json · 21 lines

What it actually says

{
  "name": "figma-to-sfnext-pagedesigner",
  "version": "0.1.0",
  "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.",
  "author": {
    "name": "Salesforce"
  },
  "homepage": "https://salesforcecommercecloud.github.io/b2c-developer-tooling/",
  "repository": "https://github.com/SalesforceCommerceCloud/b2c-developer-tooling",
  "license": "Apache-2.0",
  "keywords": [
    "salesforce",
    "storefront-next",
    "figma",
    "page-designer",
    "b2c-commerce",
    "commerce-cloud"
  ],
  "icon": "./assets/logo.png"
}
Contents

What it installs

The manifest is a name and a version. 1 skill travel with it, and installing the plugin installs all of them — 181 tokens a session between them. Each is measured on its own page, and each can be installed alone.

Files

What ships with it

1 file beside plugin.json in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today Changed · +9 lines f05e56f6c760
  2. 1mo ago First seen · 12 lines scan A c3a03b04cf42

Subscribe to this mod's changes

figma-to-sfnext-pagedesigner is a plugin published in the GitHub repository SalesforceCommerceCloud/b2c-developer-tooling (56 stars, last pushed today), licensed Apache-2.0. Its token cost is not measured: this kind of file is read by the harness, not the model. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.