sfnext-create-figma-kit

name	sfnext-create-figma-kit
description	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 variables, or keep design and code tokens aligned. Requires the Figma MCP server.

Create a Figma Kit Skill

This skill is the entrypoint for setting up or syncing the Figma design kit for a Storefront Next vertical, so the kit stays aligned with the brand tokens defined in code.

It is the design-kit companion to sfnext-create-vertical (in the storefront-next plugin): create or change the brand tokens in code first, then run this skill to mirror them in Figma.

Step 0 — Verify prerequisites (required)

This workflow uses the Figma MCP server. Before proceeding, confirm:

• The Figma MCP server is connected in your AI tool's MCP configuration.
• You have a Figma URL with a node-id parameter for the component or frame to work with.
• You have edit access to the Figma file.

If the Figma MCP server is not connected, stop here. Configure it (see your IDE's MCP docs), then return to this skill.

Getting a node-id: in Figma, right-click any frame or component → Copy/Paste as → Copy link. The URL contains node-id=<value>.

Source kit

Duplicate the official Storefront Next Design System community kit: https://www.figma.com/community/file/1646023293012114166