AI / Claude Code

Claude CodeでFigmaプラグインを自作した正直レポート｜完全自動じゃないけど十分実用的だった

この記事でわかること

  • Figmaの「構造化」とは何か
  • STEP 1 ── プロンプト（依頼）
  • STEP 2 ── Claudeの判断プロセス
  • STEP 3 ── 実行したコード（アルゴリズムの核心部分）
  • STEP 4 ── 実行結果
  • STEP 5 ── 何が起きたのかの解説

「Figmaの構造化って、Claude Codeからできるんですか？」

そんな一言から始まった実験が、気づいたらFigmaコミュニティに公開できるプラグインになりかけている。

先に正直に言っておく。完全自動ではない。 オートレイアウトがズレたり、要素の分類が微妙だったりする部分は出てくる。でも、手作業で直せる範囲だし、何より「ゼロから手で整理する」のと比べたら天と地の差だ。

そして何より面白いのが、Claude Codeと一緒に使い続けるほどプラグインが育っていくという体験だ。

Figmaの「構造化」とは何か

デザインツールのFigmaでは、レイヤーが何十・何百と並ぶことがある。
ヘッダー、ヒーロー画像、セクション、フッター……それらが全部「同じ階層」にフラットに積み重なった状態になっていることが多い。

これをHTMLのように意味のある入れ子構造に整理することを、私は「Figmaの構造化」と呼んでいる。

Before（フラット）
├── ロゴ
├── ナビゲーション
├── ヒーロー画像
├── 見出し
├── 本文テキスト
└── フッター

After（構造化）
├── Header
│   ├── ロゴ
│   └── Nav
├── Hero
│   └── ヒーロー画像
├── Section_1
│   ├── 見出し
│   └── 本文テキスト
└── Footer

これをやることで、Auto Layout（オートレイアウト）が正しく機能するようになり、レスポンシブ対応や要素の追加・削除が格段にやりやすくなる。

STEP 1 ── プロンプト（依頼）

「例えばレイヤーをヘッダー部分・HTML構造のようなネスト構造にする。それを私はFigmaの構造化と定義しています。Claude Codeでできますか？」

STEP 2 ── Claudeの判断プロセス

選択肢は3つあった。

  1. Claude CodeでFigmaプラグインのコードを生成 → Figmaで実行
  2. FigmaのREST APIで構造を読んでClaudeが分析 → プラグインコードを生成
  3. MCPを使ってリアルタイム連携

一番現実的なのは2番だと判断した。REST APIでレイヤー情報を取得して、Y座標を分析してHeader/Hero/Section/Footerに自動分類するアルゴリズムを組み、それをFigmaプラグイン（JavaScript）として出力する流れだ。

STEP 3 ── 実行したコード（アルゴリズムの核心部分）

// Y座標でノードを4種に自動分類
var headerLimit = Math.min(80, frameH * 0.06);  // 上端6%
var footerStart = frameH * 0.95;                // 下端5%

for (var i = 0; i < children.length; i++) {
  var relY = abs.y - mainAbs.y;
  var isFullWidth = abs.w >= frameW * 0.8;
  var isLarge     = abs.h >= frameH * 0.15;

  if (relY < headerLimit && !(isFullWidth && isLarge)) {
    headerNodes.push(node);          // Header
  } else if (nodeBottom > footerStart) {
    footerNodes.push(node);          // Footer
  } else if (isFullWidth && isLarge) {
    heroNodes.push(node);            // Hero（全幅×大きい要素）
  } else {
    middleNodes.push(node);          // Section候補
  }
}

さらに、セクション内に繰り返しパターン（カード）を検出するアルゴリズムも追加した。

// ギャップの中央値 × 1.5 でカードグループを自動検出
var gapsCopy = gaps.slice().sort(function(a, b) { return a - b; });
var median = gapsCopy[Math.floor(gapsCopy.length / 2)];
var threshold = Math.max(median * 1.5, 16);

ノード間のギャップを全部計測して、中央値より1.5倍以上大きなギャップを「グループの区切り」と判断する。これで「画像＋タイトル＋テキスト」の繰り返しパターンをCard_1 / Card_2 / Card_3として自動グループ化できる。

STEP 4 ── 実行結果

プラグインをFigmaで実行した結果、フラットだったレイヤーが以下のように整理された。

mainFrame
├── Header
│   ├── ロゴ
│   └── Nav
├── Hero（clipsContent: true）
│   └── ヒーロー画像
├── Section_1（About）
│   ├── 見出し
│   └── テキスト
├── Section_2（Bicycle）
│   ├── 見出し
│   ├── Card_1
│   │   ├── 自転車画像1
│   │   ├── タイトル
│   │   └── テキスト
│   ├── Card_2 ...
│   └── Card_3 ...
└── Footer

STEP 2ではAuto Layoutも自動適用。フレームの横幅に対する比率でパディングとギャップを計算するので、375pxのスマホフレームでも1440pxのPCフレームでも同じプラグインで対応できる。

STEP 5 ── 何が起きたのかの解説

なぜこれができたのかを整理すると：

Figmaのローカルプラグインの仕組み

Figmaのデスクトップアプリは、開発プラグインとして登録したフォルダの code.js を実行時に毎回ディスクから読み込む。
つまり、Claude Codeが ~/figma-restructure-plugin/code.js を更新すれば、Figmaで ⌥⌘P（Option+Command+P）を押すだけで即座に最新コードが反映される。

Claude Code（Mac上）
       ↓ code.js を編集
~/figma-restructure-plugin/code.js
       ↓ ⌥⌘P で再実行
Figma Desktop（同じMac上）
       ↓ Figmaキャンバスを操作

クラウド経由ではなく、Mac内でローカルに完結している。だから爆速だ。

absoluteBoundingBoxの重要性

ノードを別フレームに移動するとき、座標系が変わる。
これを解決するのが absoluteBoundingBox——キャンバス全体を基準にした絶対座標だ。
事前に全ノードの絶対座標を記録しておき、移動後に「新しい親の絶対座標との差分」を相対座標として設定することで、見た目の位置を変えずに親子関係だけを変えられる。

実際に試してみた正直な感想

プラグインを実際に使ってみると、すごく便利だけど完全ではないというのが本音だ。

うまくいくこと：
– フラットなレイヤーがHeader / Hero / Section / Footerに整理される
– 繰り返しのカード構造（画像＋タイトル＋テキスト）を自動グループ化してくれる
– ゼロから手で整理する作業が大幅に減る

うまくいかないこと：
– オートレイアウト適用後に要素がズレることがある
– デザインによってはセクションの判定が甘いことがある
– 複雑なネスト構造には対応しきれない場合も

ただ、「手作業で直せる範囲」に収まっている。8割は自動で決まって、残り2割を手直しするイメージだ。ゼロから整理するより圧倒的に速い。

Claude Codeと一緒に「育てる」という感覚

このプラグインで一番面白いのは、使うたびに改善できるという点だ。

「このデザインだとここがズレる」と気づいたら、その場でClaude Codeに伝えればアルゴリズムを修正してくれる。⌥⌘P で再実行すれば即反映。バグ報告から修正まで5分もかからない。

使ってみる → ズレを発見 → Claude Codeに報告 → コード修正 → ⌥⌘P で再実行

これを繰り返すことで、自分のデザインスタイルに最適化されたプラグインが育っていく。
市販のツールでは絶対に手に入らない「自分専用のFigma自動化ツール」だ。

このプラグインを他の人も使える？

「Figmaコミュニティ」に公開すれば、世界中の誰でも使えるようになる。
公開に必要なのは manifest.json（プラグイン設定）と code.js（処理コード）と ui.html（UI）だけ。

現在このプラグインはどんなFigmaファイルでも動く汎用版として開発中だ。今後もClaude Codeと改善を重ねていく予定。

まとめ

  • FigmaプラグインはJavaScriptで書かれた単純なテキストファイル
  • Claude Codeがコードを書いてローカルに保存 → Figmaが即反映
  • Y座標分析とギャップ検出でフラットなレイヤーをHTML構造に自動整理
  • Auto Layoutまで自動設定されるが、完全ではなく手直しが必要な箇所も出る
  • それでも「全部手作業」より圧倒的に速く、実用レベルに達している
  • 使うたびにClaude Codeと改善できるので、プラグインが自分仕様に育っていく

「完璧なツール」を待つより、「育てられるツール」を持つほうが強い。
Claude Codeとの組み合わせで、自分だけのFigmaプラグインを誰でも持てる時代になってきた。

関連記事

  • 教材の画像を手動で差し替えていた私が、Claude CodeとFigmaをMCPでつないだら全部自動になった話
  • Claudeに「フロー」を覚えさせたら、それが財産になった話
  • ClaudeはAIチャットじゃない。「デジタル製品を作るOS」をリースしている会社だった
TAG
ブログ

BLOG

View All
PAGE TOP