---
title: "storefront-next-figma"
description: "Figma design-kit skills for Storefront Next verticals, duplicate the kit, sync brand variables, and publish Code Connect. Requires the Figma MCP server."
canonical: https://agentpluginsdirectory.com/plugins/storefront-next-figma
last-updated: 2026-11-07
---

# storefront-next-figma
Figma design-kit skills for Storefront Next verticals, duplicate the kit, sync brand variables, and publish Code Connect. Requires the Figma MCP server.
- Slug: storefront-next-figma
- Publisher: Salesforce
- Repository: https://github.com/SalesforceCommerceCloud/b2c-developer-tooling
- Manifest: skills/storefront-next-figma/plugin.json
- Version: 1.3.3
- License: Apache-2.0
- Category (editorial): design-frontend
- Skills: 1 (sfnext-create-figma-kit)
- MCP servers: 0
- Stars: 58
- Repository created: 2025-10-31
- Repository last pushed: 2026-11-07
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/storefront-next-figma
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## 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. Full text: https://raw.githubusercontent.com/SalesforceCommerceCloud/b2c-developer-tooling/HEAD/skills/storefront-next-figma/README.md

## Skills

- 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.