---
schema_version: "1"
id: 80f9092d428d02d247e30a0b8d220a99126cc4e3b64b65bead6df30c6ee74222
title: Keep Your Figma Design Kit and Storefront Next Code in Sync
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/release-notes/262-0-0/rn_b2c_storefront_next_figma.md
canonical_url: https://help.salesforce.com/s/articleView?id=release-notes.rn_b2c_storefront_next_figma.htm&release=262.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 6a341f428733bafe2f28a98ce1eca6649ada94d9bd1ead3e123c11f256375e27
description: Maintain a single source of truth for your brand tokens and components between the Figma design kit and your Storefront Next code. Use the Storefront Next Figma agent plugin to duplicate the official design kit for your brand, sync your brand colors and typography from code to Figma, and reflect component changes from code to Figma and vice versa. When you publish the Figma Code Connect mappings, your Figma components show your real React code in dev mode.
products:
  - Cross Cloud
release: "262"
---
# Keep Your Figma Design Kit and Storefront Next Code in Sync

Maintain a single source of truth for your brand tokens and components between the Figma design kit and your Storefront Next code. Use the Storefront Next Figma agent plugin to duplicate the official design kit for your brand, sync your brand colors and typography from code to Figma, and reflect component changes from code to Figma and vice versa. When you publish the Figma Code Connect mappings, your Figma components show your real React code in dev mode.

**Where:** This change applies to Storefront Next for B2C Commerce.

**How:** The Storefront Next Figma agent plugin requires a Figma MCP server. For installation instructions, see [Agent Skills & Plugins](https://salesforcecommercecloud.github.io/b2c-developer-tooling/guide/agent-skills.html).