はじめに

本記事では、Figma Makeの最新アップデートから、Claude Codeを用いたFigma連携まで、”生成AI×UIデザイン〜フロントエンド“の現場で役立つ活用術をギュッと凝縮してお届けします！

まずは、Figma Makeの機能アップデートをご紹介します！
Figma Makeの基本的な機能や使い方は、多くの方に読んでいただいているこちらの記事をご覧ください！
Figma Makeとは？徹底解説します！

Make kits

Make kitsとは

Make kitsは、Figma AIに対して「自社のデザインシステム（スタイル、コンポーネント、変数など）」を読み込ませるための学習機能です。

通常、AIが生成するUIは汎用的なものになりがちですが、Make kitsを適用することで、「AIエージェントが自社のガイドラインを理解し、組織のルールに沿ったデザインを直接エンジニアリング・描画する機能」へと進化します。
単なる「それっぽい」デザインではなく、実際の開発プロセスに直結する高精度なプロトタイプ生成が可能になります。

導入手順（ライブラリ連携）

Figma AIに自社の「脳」を移植する手順は非常にシンプルです。

1. キットの作成を開始
FigmaのAIメニューから「設定」を選択し、「キットを作成（Create a kit）」をクリックします。
Kitの使い方①
2. デザインシステムの指定
既存の公開ライブラリ（自社で運用しているスタイルやコンポーネントセット）を指定します。
Kitの使い方②

  • カラー/フォントスタイル
  • 変数（Variables）
  • コンポーネントライブラリ
    これらを読み込ませることで、AIが参照すべき「正解」を定義します。

3. 準備完了の確認
設定が完了すると、AIプロンプト入力時にそのキットを選択できるようになります。これで、AIが自社専用のコンポーネントを使って描画する準備が整いました。

【Make kitsをデザインの相棒にする活用＆攻略ガイド】

Make kitsを単なる自動生成ツールではなく、「一貫性を守るデザインパートナー」として使いこなすためのTipsです。

1. デザインシステムへの「完全適合」を実現
指示がない場合、AIは一般的な図形を描きますが、Make kitsを使うことで既存パーツを優先的に利用させることができます。

指示のコツ
「ライブラリ内のコンポーネントを使用して」と明示することで、新規にパーツを作るのではなく、既存の資産を組み合わせて画面を構成してくれます。

2. 実装を意識した「npmパッケージ」連携
Make kitsはコードとの親和性も高いのが特徴です。

できること
デザインシステムに対応するnpmパッケージの情報を紐付けることで、
エンジニアがそのまま実装に使えるプロパティを持ったデザインを生成します。
メリット
デザインから開発へのハンドオフ（受け渡し）が劇的にスムーズになります。

3. プロンプトによる「高精度検証」

指示のコツ
「ログイン後のダッシュボードを、自社のカラー変数を使って作成して」といった
具体的な指示（プロンプト）を与えるだけで、ルールを逸脱しないデザイン案が複数生成されます。
活用シーン
新規機能のアイデア出しの際、デザインシステムの制約下でどこまで表現が可能かを瞬時に検証できます。

【苦手なこと・検証が必要なこと】

  • ドキュメント化されていないルールの解釈
    ライブラリに登録されていない「暗黙のルール」や、複雑なインタラクションの意図までは汲み取れない場合があります。
  • 抽象的なブランド表現
    「もっとかっこよく」「いい感じに」といった曖昧な指示では、せっかくのMake kitsも本領を発揮できません。
    「〇〇コンポーネントをベースに、××の変数を適用して」といった、デザインシステムに基づいた具体的な指示が、高精度な出力を得る近道です。

Figma to Code

MCPを使用することで、Figma Designの画面をもとに、Claude CodeなどのAIコーディングツールで実装を進めることができます。

【FigmaデザインをNext.js / Tailwind CSSで実装する際のTips】

1. 実装前に「プロジェクトの前提」と「実装方針」を共有する

いきなりコードを書くと、既存のルールを無視した独自実装が増える原因になるため、Figmaからコードを生成する前に、Claude Codeに以下のようなファイルを確認させておきます。

  • tailwind.config.ts
  • app/layout.tsx
  • app/globals.css
  • components/ui 配下の共通コンポーネント

また、いきなりコードを書かせるのではなく、まずは実装方針を出させると、後から修正する箇所を減らせます。

まず対象のFigmaフレームを読み取り、実装方針を提案してください。
以下の観点で整理してください。
・どのコンポーネントに分割するか
・既存コンポーネントを使える箇所はどこか
・Server Component / Client Componentの切り分け
・レスポンシブ時のレイアウト方針
方針を提示したあとに、実装に進んでください。

2. 「実装して」ではなく、Next.js前提の指示をセットで渡す

単に「Figmaを実装して」と伝えるだけだと、imgタグや通常のaタグを使ったり、必要以上にuse clientが付いたりすることがあります。
Next.jsで実装する場合は、フレームワーク特有の作法もあわせて指示しておくと安心です。

Next.js App Router / TypeScript / Tailwind CSS前提で実装してください。
・画像は next/image の Image コンポーネントを使用してください
・ページ遷移は next/link の Link コンポーネントを使用してください
・基本はServer Componentとして実装してください
・useState / onClick / useEffect が必要な箇所のみClient Componentに分離してください
・Tailwind CSSを使用し、任意値は最小限にしてください
・見出し、button、label、formなどはセマンティックなHTMLを優先してください

画像まわりは、next/imageの使い方まで指定しておくと、よりNext.jsらしい実装に近づきます。

カード型UIの画像は、親要素に relative とアスペクト比を指定し、Imageには fill と適切な sizes を設定してください。

3. Figmaのレイヤー構造をそのままReact構造にしない

Figma上のFrameやGroup、Auto Layoutの構造が、そのままReactのDOM構造として出力されることがあります。

しかし、Figmaのレイヤー構造はデザイン上の管理や見た目調整のための構造です。
そのまま実装に持ち込むと、不要なdivや深いネストが増え、コードが読みづらくなります。

Figmaのレイヤー構造をそのままReactのDOM構造に変換しないでください。
FrameやGroupは参考にしつつ、不要なラッパーdivは削減してください。

Figma上の構造は参考にしつつ、Reactコンポーネントとして自然な構造に整理することが重要です。

4. Auto LayoutはFlex/Gridのヒントにしつつ、DOMは浅く保つ

FigmaのAuto Layoutに含まれるGap、Padding、Alignmentなどの情報は、Tailwind CSSの gap-*、p-*、items-*、justify-* に置き換えやすいです。

一方で、Auto LayoutをそのままDOMに変換すると、ラッパー要素が増えすぎる場合があります。
Auto LayoutはあくまでFlex/Grid設計のヒントとして扱い、実装ではできるだけ浅いDOMに整理するのがポイントです。

Auto Layoutの構造は参考にしつつ、Tailwindのflex / grid / gap / paddingで表現できるものは親要素のclassNameに集約してください。
DOMのネストを深くしすぎないでください。

5. コンポーネント分割の境界線を先に定義する

大きなFigmaフレームをそのまま実装させると、AIが1つの巨大なコンポーネントを作ってしまうことがあります。
そのため、実装前に「汎用UI」「画面固有コンポーネント」「ページ全体の組み立て」に分けて考えさせると、整理されたコードになりやすいです。

実装前に、コンポーネント分割案を出してください。
・Button / Input / Badge など、汎用UIとして components/ui に置くもの
・この画面専用のSectionやCardとして components/features 配下に置くもの
・page.tsxに残すページ全体の組み立て部分

Figmaの見た目を再現するだけでなく、Reactコンポーネントとして保守しやすい形に変換することが重要です。

Claude code to Figma

MCPを使用することで、Claude Code→Figmaデザインに移行することも可能になりました！

使用方法

1.Claude Codeに以下のようなプロンプトを入力

現在ローカル環境で表示している画面デザインをキャプチャし、Figmaに送信して

ポイント：「既存ファイルの指定or新規でファイルを作成」が可能です！最初にプロンプトで指定してもOK。指定していない場合は、Claude側から質問されます。

2.開かれたローカル画面上部にボタンが表示される


ここで選択範囲を指定していずれかのボタンを押すと、Figmaのファイルが開きます
メニューだけ・ヘッダーだけや、全画面など、デザインとして移行したい場所を指定することができます

3. Figma Designでデザインが作成されていることを確認

既存プロジェクトで、Figmaデザインが無いが、デザインを新たに管理したい場合、開発側の更新が、Figmaに反映されていない場合に使える機能だと感じました！
オートレイアウトも使用されていて、若干のデザイン崩れが発生することもありますが、修正が必要な箇所も少なく、精度高く移行することが可能です！

Figmaスキル

Figmaスキルは、Figmaでの一般的なタスクを確実に実行する方法をAIエージェントに教える、あらかじめ用意された手順です。
たとえば、新規ファイルの作成、デザインシステムを参照した画面制作、デザインからのコード生成などが可能です。
スキルがないと、タスクのたびにその手順をプロンプトで説明しなければいけません。しかし、スキルがあることで、「新しいFigmaファイルを作成」​​や「このデザインを実装」といった簡潔な指示のみでタスクを説明できるようになります。

Figmaスキルは複数ありますが、その基盤となるスキルがfigma-useです。
このスキルはFigmaに関するデータの書き込みや、Figmaファイル内でのJavaScriptの実行が必要な読み取りを行う際に呼び出すように設定されています。
これにより、AIエージェント側がプロンプトの意図を汲み取ってfigma-useを呼び出してくれます。

Figma 公式では現在、16のスキルが提示されています。
たとえば、figma-generate-designはコードや自然言語の説明をもとに、既存のデザインシステムを活用してFigma上で画面を制作できます。また、figma-implement-designはデザイン（Figma URL）を解析し、オートレイアウトの制約や変数の意味を考慮したコードを生成します。
このように、目的に応じてスキルが用意されており、プロンプトを柔軟に解釈してタスクを実行できます。

Write to canvas

【Write to canvas とは】

Write to canvas という機能の実態は Claude Code の「figma-use」というスキルと Figma MCP サーバで提供される「use_figma」ツールを組み合わせたものです。
Figma MCP サーバーで新たに提供された「use_figma」が Figma を操作するための AI エージェント向けのツールで、そのツールを適切に使えるようにするためのガイドが「use_figma」となっています。
つまり、Write to canvas とは「AI エージェントが MCP ツールを介して、Figma キャンバスを直接エンジニアリングする機能」になります。

【インストール手順（Claude Code × Figma）】

1. Figma リモートMCPサーバーを有効化
以下のコマンドを実行し、Claude Code 用の Figma プラグインをインストールします。
本プラグインをインストールすることで、リモートMCPサーバーも自動的に有効化されます。

claude plugin install figma@claude-plugins-official

Figma 公式からも MCP のインストール手順が出ていますので、あわせてご参照ください。
https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/#claude-code

2. Claude Code の起動と認証
作業ディレクトリで claude コマンドを実行して起動します。
起動後、/mcp コマンドを入力し、以下の手順で Figma との連携を承認してください。
・plugin:figma:figma を選択
・Authenticate を選択
・ブラウザが開くのでAllow Accessをクリック
「✔ connected」と表示されたら認証成功です！

3. 正常に準備できたか確認（Tools & Skills）
最後に、Claude Code がFigmaキャンバスを操作するのに必要な「手足（ツール）」と「脳（スキル）」を持っているか確認します。

ツールの確認
・/mcp → plugin:figma:figma→ View tools を選択
・use_figma がリストにあれば、Claude Code からFigma への書き込みが可能な状態になっています。

スキルの確認
・/skills を実行
・figma:figma-use 等のステータスが 「on」 になっていれば、Figma の作法を理解した状態で操作ができます。

【Write to canvas をデザインの相棒にする活用＆攻略ガイド】
Write to canvas 機能を単なる「描画ツール」ではなく、「デザイン作業の効率化・自動化パートナー」として作業効率を劇的に上げるための Tips をまとめました。

1. URL 指定でピンポイント操作
初歩的ですが、広いキャンバスの「どこ」を操作するかを正確に伝えます。

  • 指示のコツ：URL 指定が最強
    特定のセクションやフレームの URL を渡すことで、既存デザインを破壊せずにピンポイントでデザインの上書き、追加が可能です。
    「今の画面の右側に」といった曖昧な指示より、「このフレーム（URL）の中に」という指示を徹底しましょう。

2. デザインシステムの「抽出」と「定義」を自動化
既存の画面からルールを読み取り、一貫性のあるパーツを生成します。

  • できること
    配色、タイポグラフィ（Font-size/Weight）、余白ルールの抽出、コンポーネント生成
  • 指示のコツ
    指示がないと「ただの図形」として描きがちで、バリアブルの登録もしてくれません。
    抽出したルールに基づき、共通パーツはFigmaの「Component」として登録、色はバリアブルに登録するよう明示的に指示することが重要です。
  • プロンプト例
    「この[URL]の画面からカラーパレット・タイポグラフィ・コンポーネントなどのデザインシステムを抽出して。抽出した色はバリアブルに登録して。何度も登場している共通するパーツは、メインコンポーネントとして新規作成して。」

バリアブル登録もおてのものでした。こんな感じで、色の登録はもちろん命名まで自動でしてくれました。

3. 既存ルールを継承したデザインの新規生成

  • できること
    既存ページやデザイントーンに合わせた新規画面や、別パターンのデザイン作成
  • 指示のコツ
    何も指示しないと AI 独自の解釈が入るため、「制約条件」をプロンプトに盛り込みます。
  • あったほうが良いプロンプトキーワード
    「レイヤー構造を維持」: 整理された階層を保たせます
    「Auto Layoutを適用」: 後で人間が修正しやすいデータになります。
    「既存コンポーネントをインスタンスとして使用」: 独自パーツの増殖を防ぎます。

4. コンポーネントのバリアント生成
既存のコンポーネントに状態に応じたバリエーションを爆速で追加します。

  • できること
    既存コンポーネントへのバリアント追加。
  • 指示のコツ
    対象となるコンポーネントのURLを直接渡すと、Claudeが迷子になりません。
  • プロンプト例
    「このコンポーネント（URL）に対し、エラー状態のバリアントを追加して。枠線を赤、背景を薄い赤にして。」

5. 苦手そうなこと・検証が必要なこと

  • 巨大なファイルの読み込み
    全ページを一度読み込ませるとトークンを浪費し、精度が落ちます。ページ単位で URL を分けるのがコツです。
  • 抽象的な指示でのデザインブラッシュアップ
    これは Claude Code に限らずですが、「なんか見にくい」「いい感じに」といった雑なプロンプトでのブラッシュアップは期待通りになりませんでした。
    「〇〇の部分が××なので使いにくい（見にくい）。だから△△のように修正して」といった、人間側の判断とUI/UXへの意図を適切に言語化し、具体的な指示として舵を切る必要がありそうです。
    雑な指示（例えば「この UI なんとなくいけてないのでブラッシュアップして」）でも、うまく意図を汲んでデザイン生成してくれるのが Figma プラグインの「Layermate」なのですが、このあたりは別途比較をまとめられたらと考えています。

まとめ

いかがでしたでしょうか？
FigmaとClaudeの連携は、デザイナーでもスムーズにできましたので、ぜひ皆さんも試してみてください！
今後も新たなAI機能がアップデートすることが予想されますが、うまく使いこなして業務に活用していきたいと思います！