GitHub Copilot + Figma MCPでshadcn/uiを編集して自分好みのコンポーネントを簡単に作る
VSCode Ver 1.99でついに待望のGitHub Copilot Agent ModeとMCPサーバーへのサポートが来ましたね。
とはいってもMCPサーバーをゴリゴリに導入しているわけでも無かったので、何か面白い使い方ないかな～と見ていたんですが、こんな記事を見つけてしまいました。
Figmaにあるデータと既にあるデザインシステムを結びつけるという考え方は面白いと思いつつ、 「新しくコンポーネントライブラリを構築する際でも同じことができるのでは？」 と思いました。
そこで、今使っているshadcn/uiと一緒に使ってみることにしました。
shadcn/uiとの相性の良さ
もはやshadcn/ui自体を紹介する必要はないかもしれませんが、shadcn/uiはUIライブラリを提供するのではなく、そのコンポーネントを直接レポジトリにダウンロードしてきます。
例えば、Buttonコンポーネントを pnpm dlx shadcn@latest add button で導入すると、 src/components/ui 以下に次のようなコードがそのままコピーされます。
ここで重要なのは、ユーザー側は中身を自由に書き換えることができる点です。つまり、簡単に必要なUI機能を実装できるというUIライブラリの良さを残しつつ、細かいところまで自分好みにカスタマイズできるという従来型のUIライブラリには無いメリットを享受することができます。
(実際に、shadcn/uiをベースに独自のコンポーネントデザインを作られている会社さんの記事も見かけました。)
とはいえ、全てに手を加えるのは大変
いくら既に作られたコンポーネントからカスタマイズするといっても、それは結構大変な作業だったりします。
先ほどのコード例を見てみると、大量のTailwind classが記述されており、これを全てのVariantsごとに見て回るのはかなり骨が折れます。さらにそこから自分たちの方針と合致しているclass、合致していないclassに分け、classを変更するのか、それとも新たに増やすべきなのか、と検討するのは時間のかかる行為といえます。
そこで、AIコーディングの登場です！
生成AIとTailwind CSSの相性が良いのは周知の事実かと思いますが、そこに近年発展しているMCPを組み合わせることで、必要な部分をスピーディーに変更することができるようになります！
やってみる
Figma MCPを準備しよう
Figmaを扱えるMCPサーバーには色々と種類がありますが、今回はfigma-developer-mcpを使います。
Figmaのアカウント設定から個人アクセストークンを取得しましょう。
VSCodeに導入するには .vscode/setting.json か .vscode/mcp.json に記入するみたいです。自分はClaude Desktopに置いていたサーバー設定がそのまま使えました。
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
YOUR-KEY に自分のトークンを入れたら準備完了です！
GitHub Copilotから呼び出す
全ての準備が完了すると、エージェントモードにツールマークが出てFigmaのMCPが表示されるようになります。
今回はバッジのコンポーネントについてデザインしたいので、こんな感じに指示してみました。
badge.tsxを <FigmaのURL> にあるBadgeコンポーネントにスタイルを近づけてください。
返答はこう。
Figmaのデザインに基づいてBadgeコンポーネントのスタイルを更新したいですね。まずはFigmaファイルの内容を確認して、Badgeコンポーネントのデザインを確認しましょう。
> get_figma_data を実行しました。
Figmaのデザインデータを確認しました。Badgeコンポーネントは「Budge」というフレームにあり、いくつかのバリアントがあります：
1. badge - 通常のバッジで、灰色の背景と枠線、テキストは濃いグレー
2. badge--error - 赤い背景と枠線、白いテキスト
3. badge--success - 緑の背景と枠線、白いテキスト
4. badge--warning - 黄色の背景と枠線、白いテキスト
これらのバッジは18pxの角丸を持ち、パディングが4pxになっています。テキストサイズは10pxです。
現在のbadge.tsxを、このFigmaデザインに近づけるように修正しましょう。
Badgeコンポーネントが正常に更新されました。Figmaのデザインに合わせて、以下の変更を行いました：
1. 角丸を18pxに設定して、より丸みのあるデザインに変更しました
2. フォントサイズを10pxに変更し、Figmaデザインと一致させました
3. パディングを適切に調整しました
4. 4つのバリアントを実装しました：
- default: グレーの背景と枠線、濃いグレーのテキスト (#838383)
- error: 赤い背景と枠線 (#D80000)、白いテキスト
- success: 緑の背景と枠線 (#00A63E)、白いテキスト
- warning: 黄色の背景と枠線 (#FBBF24)、白いテキスト
これで、Badgeコンポーネントは新しいウェブポータルのFigmaデザインに合わせたスタイルになりました。各バリアントはFigmaに表示されているデザインと同じ色を使用しています。
FigmaにあるVariantの違いを認識して、別パターンを実装し直してくれました。
ありがたいのですが、カラーは global.css で定義しているものなので、こっちに統一してほしいですよね。なので、こう指示しました。
global.cssを参考に色のclassを指定してほしい
global.cssに定義されているカラー変数を使って、badge.tsxコンポーネントの色を更新したいですね。現在のコードは直接カラーコードを使っていますが、テーマ変数を使うように修正します。
編集が完了しました。Badgeコンポーネントのスタイルをglobals.cssで定義されているカラー変数を使用するように更新しました。
(以下省略)
ここら辺は明示的に指示したほうが良さそうですね。
ちなみに、本題とは関係ありませんがAIコーディングならここからStorybookのStoryの生成もお手のものです。随分楽になりますね！
おわりに
shadcn/uiはFigmaでUIデザインを考えている人にとって、とても便利なものですが、それを実装するのにとても時間がかかっていました。
Figma MCPの力で素早くコードベースに変換することができるようになれば、もっと自分たちがフォーカスしたいデザインに着手できるようになるのではないでしょうか。
Discussion