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