Back to Details

multi-brand

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Multi-Brand — Theme Switching & Verification

多品牌——主题切换与验证

Set up and manage multiple brand themes in a single Figma design system using variable modes. Each brand gets its own mode with distinct color, typography, and spacing tokens. Supports switching between brands and verifying cross-brand consistency.
在单个Figma设计系统中使用variable modes设置和管理多个品牌主题。每个品牌拥有独立的模式，包含独特的颜色、排版和间距令牌。支持品牌切换及跨品牌一致性验证。

Skill Boundaries

技能边界

  • Use this skill to set up or manage multi-brand token systems.
  • If the task is building a single-brand design system, switch to figcraft-generate-library.
  • If the task is syncing tokens from a DTCG spec, switch to token-sync.
  • If the task is auditing design system health, switch to design-system-audit.
  • 使用本技能搭建或管理多品牌令牌系统。
  • 如果任务是构建单品牌设计系统，请切换至figcraft-generate-library。
  • 如果任务是从DTCG规范同步令牌，请切换至token-sync。
  • 如果任务是审计设计系统健康状况，请切换至design-system-audit。

Key Concept

核心概念

Figma variable modes enable multi-brand by storing different values per brand in the same variable:
Collection: "Brand Colors"
  Modes: [Brand A, Brand B, Brand C]

  Variable: color/primary
    Brand A: #3B82F6 (blue)
    Brand B: #10B981 (green)
    Brand C: #8B5CF6 (purple)

  Variable: color/surface
    Brand A: #FFFFFF
    Brand B: #F0FDF4
    Brand C: #FAF5FF
Components bound to these variables automatically switch appearance when the mode changes.
Figma variable modes通过在同一变量中存储不同品牌的不同值，实现多品牌管理：
Collection: "Brand Colors"
  Modes: [Brand A, Brand B, Brand C]

  Variable: color/primary
    Brand A: #3B82F6 (blue)
    Brand B: #10B981 (green)
    Brand C: #8B5CF6 (purple)

  Variable: color/surface
    Brand A: #FFFFFF
    Brand B: #F0FDF4
    Brand C: #FAF5FF
绑定到这些变量的组件会在模式切换时自动变更外观。

Workflow

工作流程

Step 1: Connect and Load Tools

步骤1：连接并加载工具

ping                                          → verify plugin connection
load_toolset("variables")                     → variable/collection/mode management
If 
ping
fails (plugin not connected): STOP. Do not fall back to other MCP servers. Tell user: open Figma → Plugins → FigCraft → wait for connection, then retry.
ping                                          → 验证插件连接
load_toolset("variables")                     → 变量/集合/模式管理
如果
ping
失败（插件未连接）： 停止操作。不要切换到其他MCP服务器。告知用户：打开Figma → 插件 → FigCraft → 等待连接完成后重试。

Step 2: Discover Existing Structure

步骤2：发现现有结构

variables_ep(method: "list_collections")      → existing collections and modes
variables_ep(method: "list")                  → all variables with current values
Determine if multi-brand is already set up (multiple modes in color collections) or needs to be created.
variables_ep(method: "list_collections")      → 现有集合和模式
variables_ep(method: "list")                  → 所有变量及其当前值
判断是否已搭建多品牌系统（颜色集合中存在多个模式），或需要从头创建。

Step 3: Set Up Brand Modes

步骤3：设置品牌模式

If creating from scratch:
add_collection_mode(collectionId: "...", name: "Brand B")
If renaming existing modes:
rename_collection_mode(collectionId: "...", modeId: "...", name: "Brand A")
如果从头创建：
add_collection_mode(collectionId: "...", name: "Brand B")
如果重命名现有模式：
rename_collection_mode(collectionId: "...", modeId: "...", name: "Brand A")

Step 4: Populate Brand Values

步骤4：填充品牌值

For each brand mode, set variable values:
variables_ep(method: "update", variableId: "...", valuesByMode: {
  "modeId-brand-a": "#3B82F6",
  "modeId-brand-b": "#10B981"
})
For multi-mode token sync from DTCG files:
load_toolset("tokens")
sync_tokens_multi_mode(modes: {
  "Brand A": "tokens/brand-a.json",
  "Brand B": "tokens/brand-b.json"
}, collectionName: "Brand Colors")
为每个品牌模式设置变量值：
variables_ep(method: "update", variableId: "...", valuesByMode: {
  "modeId-brand-a": "#3B82F6",
  "modeId-brand-b": "#10B981"
})
从DTCG文件同步多模式令牌：
load_toolset("tokens")
sync_tokens_multi_mode(modes: {
  "Brand A": "tokens/brand-a.json",
  "Brand B": "tokens/brand-b.json"
}, collectionName: "Brand Colors")

Step 5: Apply Brand to Screens

步骤5：将品牌应用到屏幕

Set explicit variable mode on screen frames to preview each brand:
set_explicit_variable_mode(nodeId: "screen-frame-id", collectionId: "...", modeId: "brand-b-mode-id")
This makes the entire screen and its children resolve variables using Brand B values.
为屏幕框架设置明确的变量模式，预览各品牌效果：
set_explicit_variable_mode(nodeId: "screen-frame-id", collectionId: "...", modeId: "brand-b-mode-id")
这会让整个屏幕及其子元素使用Brand B的值解析变量。

Step 6: Verify Cross-Brand Consistency

步骤6：验证跨品牌一致性

For each brand mode, verify:
  1. Contrast ratios — colors must meet WCAG 4.5:1 in every brand
  2. Readability — text colors work against brand-specific backgrounds
  3. Component integrity — no visual breakage when switching brands
  4. Token completeness — every variable has a value for every brand mode
Verification workflow per brand:
set_explicit_variable_mode(nodeId: "...", collectionId: "...", modeId: "brand-x")
export_image(nodeId: "...", scale: 2)         → screenshot for visual check
lint_fix_all(categories: ["wcag"])            → contrast check
针对每个品牌模式，验证以下内容：
  1. 对比度——每个品牌的颜色必须符合WCAG 4.5:1标准
  2. 可读性——文本颜色在品牌专属背景上清晰可辨
  3. 组件完整性——切换品牌时无视觉破损
  4. 令牌完整性——每个变量在所有品牌模式下都有对应值
每个品牌的验证流程：
set_explicit_variable_mode(nodeId: "...", collectionId: "...", modeId: "brand-x")
export_image(nodeId: "...", scale: 2)         → 截图用于视觉检查
lint_fix_all(categories: ["wcag"])            → 对比度检查

Step 7: Generate Brand Comparison

步骤7：生成品牌对比图

Create side-by-side brand previews:
For each key screen, clone the frame and set different brand modes:
nodes(method: "clone", items: [{ id: "screen-id", name: "Screen - Brand B", x: 500 }])
set_explicit_variable_mode(nodeId: "cloned-id", collectionId: "...", modeId: "brand-b")
Export comparison screenshots for stakeholder review.
创建品牌并排预览：
针对每个关键屏幕，克隆框架并设置不同品牌模式：
nodes(method: "clone", items: [{ id: "screen-id", name: "Screen - Brand B", x: 500 }])
set_explicit_variable_mode(nodeId: "cloned-id", collectionId: "...", modeId: "brand-b")
导出对比截图供利益相关方审阅。

Architecture Patterns

架构模式

Simple (2–3 Brands)

简单模式（2–3个品牌）

Collection: "Color"     modes: [Brand A, Brand B]
Collection: "Spacing"   modes: [Value]          ← shared across brands
Collection: "Radius"    modes: [Value]          ← shared across brands
Only color varies between brands. Spacing and radius are shared.
Collection: "Color"     modes: [Brand A, Brand B]
Collection: "Spacing"   modes: [Value]          ← 各品牌共享
Collection: "Radius"    modes: [Value]          ← 各品牌共享
仅颜色因品牌而异，间距和圆角为各品牌共享。

Standard (3–5 Brands)

标准模式（3–5个品牌）

Collection: "Primitives"  modes: [Brand A, Brand B, Brand C]
Collection: "Semantic"    modes: [Light, Dark]
Primitives vary per brand. Semantic tokens alias primitives and vary by light/dark mode.
Collection: "Primitives"  modes: [Brand A, Brand B, Brand C]
Collection: "Semantic"    modes: [Light, Dark]
基础令牌因品牌而异，语义令牌别名基础令牌，并随明暗模式变化。

Advanced (5+ Brands × Light/Dark)

高级模式（5个以上品牌 × 明暗模式）

Collection: "Primitives"  modes: [Brand A, Brand B, ...]    ← brand palette
Collection: "Semantic"    modes: [Light, Dark]               ← aliases to primitives
Collection: "Component"   modes: [Default]                   ← aliases to semantic
Three-tier architecture: primitives (brand-specific) → semantic (mode-specific) → component (stable API).
Collection: "Primitives"  modes: [Brand A, Brand B, ...]    ← 品牌调色板
Collection: "Semantic"    modes: [Light, Dark]               ← 别名至基础令牌
Collection: "Component"   modes: [Default]                   ← 别名至语义令牌
三层架构：基础令牌（品牌专属）→ 语义令牌（模式专属）→ 组件令牌（稳定API）。

Cross-Brand Checklist

跨品牌检查清单

Before publishing a multi-brand system:
  • Every variable has values for all brand modes (no undefined)
  • Contrast ratios pass WCAG AA in every brand
  • Text remains readable against all brand backgrounds
  • Icons/illustrations work with all brand color schemes
  • Component states (hover, active, disabled) work in all brands
  • Dark mode (if applicable) works with all brands
  • Brand-specific assets (logos, illustrations) are swappable via INSTANCE_SWAP
发布多品牌系统前，请确认：
  • 每个变量在所有品牌模式下都有对应值（无未定义项）
  • 每个品牌的对比度均通过WCAG AA标准
  • 文本在所有品牌背景上均保持可读
  • 图标/插画适配所有品牌配色方案
  • 组件状态（悬停、激活、禁用）在所有品牌中正常显示
  • 暗色模式（若适用）适配所有品牌
  • 品牌专属资产（logo、插画）可通过INSTANCE_SWAP替换

Safety Rules

安全规则

  • NEVER remove a brand mode without explicit user confirmation
  • ALWAYS verify contrast in every brand after color changes
  • ALWAYS set values for new variables in ALL existing modes (avoid undefined)
  • Use 
    save_version_history
    before major brand changes
  • 未经用户明确确认，切勿删除品牌模式
  • 颜色变更后，务必验证所有品牌的对比度
  • 新增变量时，务必为所有现有模式设置对应值（避免未定义）
  • 进行重大品牌变更前，使用
    save_version_history
    保存版本历史