ds-impact-analysis

DS Impact Analysis — Tasarım Sistemi Etki Analizi

Design Token Kuralı: Bu skill'deki kod örneklerinde geçen font adları, renk kodları, piksel boyutları yalnızca FORMAT gösterimidir. Çalışma anında tüm design token değerleri (font, renk, boyut, spacing, radius, gölge) kayıtlı kütüphaneden (figma_get_variables, figma_get_styles) veya kullanıcıdan okunmalıdır. Hardcoded token değeri kullanma. Detay: project-context.md → "Design Token Kuralı".

Overview

Bu skill, bir design system token'ı veya bileşeni değiştirildiğinde etkilenecek tüm ekranları, bileşenleri ve dosyaları analiz eder. DesignOps ekiplerinin değişiklik kararlarını bilinçli vermesini sağlar.

Salt okunur — Figma tuvalinde değişiklik yapmaz.

Prerequisites

• F-MCP Bridge plugin bağlı olmalı
• Değiştirilmek istenen token/bileşen bilgisi (isim veya ID)

F-MCP skill koordinasyonu

• Önce (isteğe bağlı): audit-figma-design-system ile mevcut DS durumunu anla
• Sonra: Etki analizi onaylandıktan sonra:
  • Token değişikliği → design-token-pipeline (reverse flow ile güncelle)
  • Bileşen değişikliği → apply-figma-design-system veya fix-figma-design-system-finding
  • Kod güncellemesi → implement-design + design-drift-detector

Required Workflow

Step 1: Plugin Bağlantısını Doğrula

figma_get_status()

Step 2: Değişiklik Kapsamını Belirle

Kullanıcıdan değişikliği öğren:

Token değişikliği:

• Hangi token/variable? (ör. color/primary/500, spacing/md)
• Yeni değer ne? (ör. #2563EB → #3B82F6)
• Hangi mode'lar etkileniyor? (ör. Light, Dark, her ikisi)

Bileşen değişikliği:

• Hangi bileşen? (ör. Button, Card, NavBar)
• Ne değişiyor? (ör. variant ekleme/kaldırma, property değişikliği, boyut)

Step 3: Token Bağımlılık Ağacı

Token değişikliği için:

figma_get_variables(verbosity="full")

figma_execute ile bağımlılık taraması:

const targetVarName = "<TOKEN_NAME>";

const collections = await figma.variables.getLocalVariableCollectionsAsync();
const allVariables = [];
for (const col of collections) {
  for (const varId of col.variableIds) {
    const v = await figma.variables.getVariableByIdAsync(varId);
    allVariables.push(v);
  }
}

const targetVar = allVariables.find(v => v.name === targetVarName);
if (!targetVar) return { error: "Variable bulunamadı: " + targetVarName };

// Alias zincirleri: transitif bağımlılık taraması (A → B → C zinciri)
function findDependents(varId, visited = new Set()) {
  if (visited.has(varId)) return []; // döngü koruması
  visited.add(varId);
  const direct = allVariables.filter(v =>
    Object.values(v.valuesByMode).some(val =>
      val && val.type === "VARIABLE_ALIAS" && val.id === varId
    )
  );
  const transitive = [];
  for (const d of direct) {
    transitive.push(...findDependents(d.id, visited));
  }
  return [...direct, ...transitive];
}

const allDependents = findDependents(targetVar.id);
const uniqueDeps = [...new Map(allDependents.map(d => [d.id, d])).values()];

return {
  target: { id: targetVar.id, name: targetVar.name, type: targetVar.resolvedType },
  directDependents: uniqueDeps.map(d => ({
    id: d.id, name: d.name, type: d.resolvedType
  })),
  dependentCount: uniqueDeps.length
};