Figma MCPとClaude連携やってみた（02）

はじめに

お疲れ様です。みんみんです〜
今回は、9月16日のフロントの勉強会発表内容をまとめました！
デザインシステムの運用効率化とコード品質向上を目指し、Figmaバリアブルからコードへの自動変換について検証結果をご紹介します。

前回の記事はこちらになります。
Figma MCPとClaude連携やってみた（01）

検証の背景と目的

取り組んだ2つの課題

• Figmaバリアブル → SCSS変換の効率化
  デザインシステムの変数を効率的にコードへ反映します。
• セマンティックHTML自動生成の実現可能性
  アクセシビリティに配慮したHTML構造を自動生成します。

期待される効果

• デザインシステムの運用効率向上
• コード品質とアクセシビリティの改善
• デザイナー・エンジニア間のスムーズな連携

検証内容と結果

• Figmaバリアブルシステムの構築
  

• コンポーネント設計とオートレイアウト
  

• 各種プラグインツールの検証結果
  

  ツール名	バリアブル変換	セマンティックHTML	実用性	備考
  Figma to Code	×	×	×	基本的な構造認識が不十分
  Locofy Lighting	×	×	×	複雑な構造に対応困難
  Export Variables	△	×	×	変数のみの対応
  creative-code（社内ツール）	△	△	×	クリエティブチーム先輩が開発を担当し、 最も良い結果だが限界あり

• Figma MCP × Claudeによるアプローチ

  評価項目	Figma Plugin	Figma MCP × Claude
  バリアブル変換	△	◉
  セマンティックHTML	×	△
  実用性	×	△

実装に必要な環境

必須環境

• Claude: Pro以上の有料プラン
• Figma: 有料プラン
• Node.js: バージョン18.x.x以上
• SASS: npm経由でのインストール

実装結果

実際の成果（デモページ）：
約90%のコードがそのまま使用可能（生成時間：約5分）
BEM記法に準拠したHTML/SCSSの生成に良い結果

HTML

SCSS（一部省略）

// ========================================
// Variables
// ========================================

// Colors
$color-primary: #4A90E2;
$color-secondary: #E1EFFF;
$color-tertiary: #F0F7FF;
$color-white: #FFFFFF;
$color-primary-dark: #357abd;

// Typography
$font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-weight-normal: 400;
$font-weight-bold: 700;

$font-size-h1: 32px;
$font-size-h2: 36px;
$font-size-h3: 24px;
$font-size-button: 18px;
$line-height-base: 1.21em;

// Layout
$container-width: 1280px;
$content-width: 947px;

// Spacing
$spacing-xs: 10px;
$spacing-sm: 20px;
$spacing-md: 35px;
$spacing-lg: 39px;
$spacing-xl: 60px;
$spacing-xxl: 121px;

// Border Radius
$border-radius-sm: 10px;
$border-radius-md: 15px;
$border-radius-lg: 50px;

// Breakpoints
$breakpoint-desktop: 1280px;
$breakpoint-tablet: 768px;
$breakpoint-mobile: 480px;

// 一部省略
// ========================================
// Section Base Styles
// ========================================

.section {
    @include flex-column-center;
    gap: $spacing-lg;

    &_title {
        @include section-title;
    }
}

.container {
    @include container-base;
}

// ========================================
// Section Top
// ========================================

.sectionTop {
    .container {
        @include flex-column-center;
        justify-content: center;
        padding: 90px 154px;
        height: 388px;
    }
}

.topContent {
    @include flex-center;
    gap: $spacing-xl;

    &_item {
        width: 172px;
        height: 207px;
        background-color: $color-tertiary;
        border-radius: $border-radius-md;

        &:nth-child(2) {
            width: 173px;
        }

        // モバイルで幅を統一
        @media (max-width: $breakpoint-mobile) {
            width: 100%;
            max-width: 300px;
            height: 150px;
        }
    }

    // タブレット以下で縦並び
    @media (max-width: $breakpoint-mobile) {
        flex-direction: column;
        gap: $spacing-sm;
    }
}

課題と対応策

技術的課題

• 複雑なグリッドレイアウトへの対応
  現状のAI生成では、シンプルなフレックスボックスレイアウトは高精度で再現できますが、複雑なグリッドレイアウト（例：Pinterest風のマソンリーレイアウトや、複数のブレークポイントで異なるグリッド配置）では精度が未知です。グリッドアイテムが複数のセルにまたがる場合や、動的にレイアウトが変化する場合の認識が困難かもしれないです。
  
• ネストしたコンポーネントの処理
  コンポーネントの中にさらに複数のコンポーネントが入れ子になっている構造（例：カード内にボタン、アイコン、テキストコンポーネントが含まれる）では、親子関係の正確な把握と、それぞれのコンポーネントのプロパティ継承が適切に処理されない恐れがあります。
  
• カスタムアニメーションの実装
  Figmaで設計されたマイクロインタラクション（ホバーエフェクト、スクロールトリガーアニメーション、パララックス効果など）は、視覚的な最終形のみが定義されているため、アニメーションのタイミング、イージング、シーケンスといった時間軸の情報をコードに変換することができません。現状では、これらは全て手動での実装が必要になります。

運用面の課題

デザイナー側の作業工数が20-30%増加

• ①レイヤー命名規則の遵守
  従来の「Rectangle 1」「Group 2」といった自動生成名から、「header-navigation」「feature-card-container」といった意味のある命名への変更。
  これは初期段階では負担ですが、デザイナー自身の作業効率化（後からの修正時の特定が容易）にも繋がります。
• ②コンポーネント構造化
  単なるグループ化ではなく、再利用可能なコンポーネントとしての設計。
  デザインの一貫性が保たれ、将来的な変更時の作業量が大幅に削減されます。
  一度作成したコンポーネントは、プロジェクト全体で使い回せるため、中長期的には工数削減効果が期待できます。
• ③バリアブル・Properties設定
  カラーやスペーシングのトークン化、コンポーネントのプロパティ設定。
  これは初期学習コストが高いものの、ブランドカラーの変更やデザインシステムの更新時に、わずか数クリックで全体に反映できるようになります。

段階的導入プラン

• Phase 1: 小規模プロジェクトでのPoC実施
  ①ページ数：1-2ページ
  ②コンポーネント数：5-15個
  ③期間：2-4週間
• Phase 2: 中規模サイトへの適用
  ①ページ数：3-7ページ
  ②コンポーネント数：15-30個
  ③期間：1-2ヶ月
• Phase 3: 大規模サイトへの展開
  ①ページ数：10ページ以上
  ②コンポーネント数：30個以上
  ③期間：3-6ヶ月

まとめと今後の展望

Figma MCP × Claudeの組み合わせにより、デザインからコードへの変換効率が大幅に向上することが実証されました。
完全な自動化には至らないものの、従来の手法と比較して大きな改善が見られ、特に小〜中規模プロジェクトにおいて有効性が確認されています。
段階的な導入と継続的な改善により、デザインシステムの運用効率化とコード品質の向上が期待できるかなと思います！
デザインチームとの連携を強化し、MCP最適化ガイドラインの策定を進めることで、実用的な運用体制の構築を目指していきたいです。