MCP: Figmaデザインをフロントエンドコードに変換

まだFigmaデザインからスタイル情報を手動で抽出し、フロントエンドコードを書いていますか？そうであれば、Trae IDEのModel Context Protocol（MCP）機能をお勧めします。MCPサーバー - Figma AI Bridgeを使用することで、Figmaデザインを自動的に整理されたフロントエンドコードに変換し、対応するWebページを生成できます。プロセス全体はシンプルで効率的であり、複雑な設定は必要ありません。このチュートリアルの手順に従って、Trae IDEでスマートなデザイン配信を体験してください。始めましょう！

デモンストレーション

デモシステム環境

このチュートリアルで使用するシステム環境は以下の通りです：

Trae IDEバージョン: 1.3.5
macOSバージョン: 14.7
Node.jsバージョン: 20.19.1
npxバージョン: 10.9.2
Pythonバージョン: 3.13.3
uvxバージョン: 0.6.16

手順

チュートリアルに従って、MCPサーバー - Figma AI Bridgeをプロジェクトに統合し、エージェントを設定してから、自然言語を使用してAIにフロントエンドページの生成を依頼します。

ステップ1: Trae IDEをインストール

Trae IDEはAIと深く統合されており、AI Q&A、コード自動補完、エージェント駆動のAIパワードプログラミング機能を提供します。Trae IDEでプロジェクトを開発する際、AIと柔軟に協力して開発効率を向上させることができます。

Traeの公式ウェブサイトにアクセスして、Trae IDEのインストールパッケージをダウンロードし、コンピューターにインストールしてください。

ステップ2: MCPサーバーのランタイム環境を設定

MCPサーバーが正常に起動できるようにするため、以下の依存関係をインストールする必要があります：

npx: Node.jsに含まれるツール（バージョンは18以降である必要があります）
uvx: uvツールチェーンの軽量Pythonスクリプトランナー

まず、後でコマンドラインを介して依存関係をインストールしやすくするため、Trae IDEでターミナルを開きましょう。手順は以下の通りです：

Trae IDEを起動します。
上部メニューバーで、ターミナル > 新しいターミナルをクリックします。
インターフェースの下部にターミナルパネルが表示されます。

uvxをインストール

ターミナルを開いた後、以下の手順でuvxをインストールします：

Pythonの公式ウェブサイトにアクセスし、Python 3.8以降をダウンロードしてインストールします。
インストールが完了したら、ターミナルで以下のコマンドを実行して、インストールが成功したかどうかを確認します：
bash
```
python3 --version
```
インストールが成功した場合、ターミナルにPythonのインストールされたバージョン番号が出力されます。
以下のコマンドを実行してuv（uvxを含む）をインストールします：
macOS / Linux用インストールコマンド：
bash
```
curl -LsSf https://astral.sh/uv/install.sh | sh
```
Windows用インストールコマンド（PowerShell）：
powershell
```
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```
source $HOME/.local/bin/envコマンドを実行して、uvxに必要なランタイム環境変数と初期化設定を読み込みます。
以下のコマンドを実行して、インストールが成功したかどうかを確認します：
bash
```
uvx --version
```
インストールが成功した場合、ターミナルにuvxのインストールされたバージョン番号が出力されます。

Node.jsをインストール

uvxのインストールが完了したら、以下の手順でNode.jsをインストールします：

Node.jsの公式ウェブサイトにアクセスし、Node.js 18以降をダウンロードしてインストールします。
インストールが完了したら、ターミナルで以下のコマンドを実行して、インストールが成功したかどうかを確認します：
bash
```
node -v
npx -v
```
インストールが成功した場合、ターミナルにインストールされたNode.jsのバージョン番号が出力されます。例：
```
v18.19.0
10.2.0
```
Trae IDEを再起動してNode.jsを有効化します。

ステップ3: Figma個人アクセストークンを生成

Figma AI Bridgeを設定する際、Figma個人アクセストークンを入力する必要があります。Figmaのセキュリティ設定センターで取得できます。手順は以下の通りです：

ページの左上角にあるユーザーアバターをクリックし、メニューから設定を選択します。
設定ウィンドウが表示されます。
ウィンドウの上部メニューからセキュリティを選択します。
セキュリティ設定パネルに入りました。
個人アクセストークンセクションに移動し、新しいトークンを生成ボタンをクリックします。
新しいトークンを生成するポップアップウィンドウが表示されます。
Figma個人アクセストークンを設定します：
- トークンの名前を入力
- トークンの有効期限を設定
- トークンの権限範囲を設定。以下の表の設定を直接使用してください：

権限タイプ	権限範囲
Code Connect	Write
Comments	Read and write
Current user	Read-only
Dev resources	Write
File content	Read-only
File versions	Read-only
Library analytics	Read-only
Library assets	Read-only
Library content	Read-only
Projects	Read-only
Team library content	Read-only
Variables	Read and write
Webhooks	Read and write

ウィンドウの下部にあるトークンを生成ボタンをクリックします。
Figma個人アクセストークンが生成されました。後でMCPサーバー - Figma AI Bridgeを設定する際に使用します。

ステップ4: MCPサーバー - Figma AI Bridgeを追加

Trae IDEを開きます。
AIチャットボックスの右上角にある設定アイコンをクリックします。

MCP: Figmaデザインをフロントエンドコードに変換 ​

デモンストレーション ​

デモシステム環境 ​

手順 ​

ステップ1: Trae IDEをインストール ​

ステップ2: MCPサーバーのランタイム環境を設定 ​

uvxをインストール ​

Node.jsをインストール ​

ステップ3: Figma個人アクセストークンを生成 ​

ステップ4: MCPサーバー - Figma AI Bridgeを追加 ​

関連記事 ​