Zenn
アスエネテックブログPublicationへの投稿
🏃‍♀️

Figma-MCPでフロント爆速開発を試してみた！

umzo
に公開
React
Cursor
Model Context Protocol
tech

アスエネ株式会社の @umzo（うめぞう）です！

アスエネでは「アスエネキャリア」という脱炭素・ESG人材の転職支援サービス開発のTechPMをしています。

アスエネキャリアとは？

アスエネキャリアとは、脱炭素・ESG人材の転職支援サービスです。持続可能な社会を目指し、脱炭素や気候変動、サスティナビリティに関心のある人々が、最適なキャリアを築けるようにサポートしています。

最近、Ubieさんの「社内デザインシステムをMCPサーバー化したらUI実装が爆速になった」という記事を見て、「フロントを爆速で開発したい！」と思い立ち、まずはFigma-mcpとcursorルールの整備を試してみました。結果、これがかなり使える！というわけで、実験内容と考察をシェアします。

事前準備

  1. Figma API keyの準備
    • Quickstartにあるように File content と Dev resources の読み取り権限が必要です
  2. mcpサーバーの設定
    • cursorにmcpサーバーの設定を記述します
    • .cursor/mcp.json に以下のようにFIGMA_API_KEYを書き換えて記述すればOK
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=FIGMA_API_KEY",
        "--stdio"
      ]
    }
  }
}
  1. 設定の有効化
    • cursor settings→MCPから、Framelink Figma MCPを有効化します

あとは、Figmaの 「Copy as → copy link to selection」からコピーしたリンクをchatに貼り付けるだけ。

試してみた結果

今回は比較的シンプルなアスエネキャリアのログイン画面を作ってもらうことに。

まずはcursorルールを何も与えず、次のような指示をcursorに出してみました。

@page.tsx @https://www.figma.com/design/***********

このpage.tsxへFigmaのデザインを実装して
  • @page.tsx が実装して欲しい場所の空ファイル
  • @https://www.figma.com/design/*********** がFigmaのリンク

生成結果

cursorが作ってくれた画面：

ログインCursor1.png

元となったFigmaのデザイン：

ログインFigma.png

おしい！画像が表示されておらず、細部のスタイルが違いますが、良い線いってます。

フィードバック

Good👍

  • 技術スタックを理解してくれる
    • tailwindを使っているという情報は与えてなかったのに、tailwindでスタイリングしてくれました

Problem🤔

  • スタイルの細部が異なる
    • tailwindの標準クラスは使えるけど、リポジトリ独自のクラスは当然使えない
  • コンポーネントの粒度がFigmaと一致していない
  • 既存コンポーネントを活用せず新規実装してしまう

cursorの思考プロセスを探る

少し気になったので、cursorに実装の意図を尋ねてみました。

> ButtonとInputコンポーネントを作成する必要があります

これは、どこから判断しましたか？

すると丁寧に答えてくれました：

私の判断の根拠を明確に説明します。

Figmaの情報から直接「ButtonとInputコンポーネントを作成する必要がある」と判断したわけではありません。この判断は以下の2つの要因から導き出されました：

page.tsxの実装時に発生したエラー：
* ...
* またはそれに対応する型宣言が見つかりません。

これらのエラーを見て、@/components/ui/buttonと@/components/ui/inputというパスからコンポーネントをインポートしようとしているが、そのコンポーネントが存在しないと判断しました。

これは誤った判断でした。なぜなら：
* プロジェクト内で既に使用されているコンポーネントの存在を確認せずに判断した
* インポートパスが@repo/ui/libs/Buttonや@repo/ui/libs/InputTextであるべきだった
* Figmaの情報からは、UIのデザインやレイアウトは分かりますが、コンポーネントの実装方法やインポートパスは判断できません。この判断は、エラーメッセージのみに基づいて行ったものでした。

なるほど、確かに技術スタックや設計方針に関する情報がないと難しいそうですね。

cursorルールを整える

そこで、cursorルールを整えてみることに。cursorルールは、AIアシスタントが一貫して高品質な作業をするためのガイドラインです。

ベースは以下の記事を参考にさせてもらいました：

特に必須と思われる以下の要素を盛り込みました：

  • プロジェクトの概要
  • 指示の分析と計画
  • タスクの実行
  • プロセスの検証と、エラー対応
  • 成果物の自己評価
  • レポート形式
  • 重要な注意事項
  • 技術スタック
  • ディレクトリ構成

再挑戦

チャットをリセットして、同じ指示を出してみました。

@page.tsx @https://www.figma.com/design/***********

このpage.tsxへFigmaのデザインを実装して

ログインCursor2.png

あれ？むしろ悪くなった？!

Good👍

  • レポートの質が上がった
  • AIが自ら画像を取得しにいくようになった（プロセス改善？）

Problem🤔

  • ヘッダー、フッターを作らなくなった
  • フォームやテキストのスタイルがFigmaと合わなくなった
  • box-shadowが一致しない（画像ではわかりにくいが shadow-sm が指定されている）

Figma MCPの中身を覗く

気になったので、Figma MCPが何を返しているのか確認しました：

globalVars:
  styles:
    fill_J1GR4D:
      - '#FFFFFF'
    layout_HBKJ7F:
      mode: none
      sizing: {}
    effect_2RLU3O:
      boxShadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15)

ちゃんとbox-shadowの正しい値が返されているようです。再度、cursorに思考プロセスを聞いてみました：

生成していただいたアウトプットは、Figmaのデザインと異なる部分があるようです。
例えば、LoginForm周りのbox-shadowです。
shadow-smを指定していますが、どのように考えて指定したのですか？

返答：

申し訳ありません。ご指摘の通り、Figmaのデザインと異なる部分がありました。

[細かい説明は省略]

私が最初にshadow-smを指定した理由は：
- デフォルトのTailwind CSSのクラスを使用することで、一貫性のあるデザインを維持できると考えた
- 影の効果を軽くする意図があった

しかし、これはFigmaのデザインを正確に再現するという観点からは適切ではありませんでした。Figmaのデザインを忠実に再現するためには、カスタムの影の値を指定する必要がありました。

AIは数値を抽象化して理解してしまうみたいですね。Figmaから正確な値を取ってきても、それをそのまま適用するわけではなく「軽い影だな」→「shadow-smでいいや」という判断をしているようです。

さらなる改善

以下の点を改善してみました：

  1. Tailwindの設定をコンテキストとして提供

    mdcファイルもcursorにつくってもらい…

    @tailwind.config.ts @primitive-tokens.css @style.css
これらのファイルから、あなたがtailwindのクラス群を参照する時にわかりやすい形式にまとめてください。

    これを tailwind-config.mdc として提供

  2. 共通UIコンポーネントをコンテキストとして提供

  3. スタイル確認のステップを追加

    4. スタイルの確認と修正
   - 成果物を生成したあとに1度だけ実行してください
   - 「Framelink Figma MCP」を利用してFigmaの情報を参照している場合、成果物のUIファイル（`*.tsx`ファイル）のスタイルが一致していることを1つずつ確認してください。
   - Figmaの情報と成果物に不一致がある場合、必要に応じて調整してください。

成果物はこちら：

ログインCursor3.png
画像は読み込めていないものの、だいぶFigmaのデザインに近い結果が得られました！

tailwindの指定やUIのimportも良い感じになっています。

Before（cursorルールなし）

import { Button } from '@/components/ui/button'; 👈 新規作成したコンポーネントをimport
import { Input } from '@/components/ui/input'; 👈 新規作成したコンポーネントをimport
import Link from 'next/link';
import Image from 'next/image';

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-white">
      // ...
　　　　　　　<div className="flex flex-col items-center gap-4">
              // ...
              👇 カスタム値で指定
              <h1 className="text-[16px] font-medium text-[#3C3C3C]">
                ログイン
              </h1>
            </div>
      // ...
 }

After

import { LoginHeader } from '@/components/LoginHeader';
import { InputText } from '@repo/ui/libs/InputText'; 👈 共有コンポーネントをimport
import { InputPassword } from '@repo/ui/libs/InputPassword'; 👈 共有コンポーネントをimport
import { Button } from '@repo/ui/libs/Button'; 👈 共有コンポーネントをimport
import { Link } from '@/components/Link';

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-background-white">
             // ...
            <div className="flex flex-col items-center gap-4">
            　👇 tailwindの設定から指定
              <h1 className="text-heading-4 text-text-default">
                ログイン
              </h1>
            </div>
            // ...
}

画像の読み込みについては、Figma-MCPの download_figma_images 機能を利用するように指示すれば、さらに完成度が上がりそうです。

まとめ

Figma-MCPはフロント実装を爆速にする可能性を秘めています！

  • 使い捨てのLP制作には有用：保守が必要ない一回限りのページなら、少し修正するだけで使えるような十分な再現度
  • 実務での本格利用には事前準備が必要：cursorルールをしっかり整えておくことが大事

AIの思考プロセスを聞いてみることで、cursorルールの整備にも役立ちました。AIを一人の人間として扱い、一緒に改善を目指していくアプローチは効果的です。

今後の改善点

  1. 効率的なコンテキスト提供
    • Figma-MCPの内製化
      • Figmaで管理しているデザインシステムの情報を含めて返すことで、精度が向上しそう
    • 各種ドキュメントをMCPとして提供
  2. タスクごとの思考プロセス切り替え
    • 今回はUI作成に特化したルール整備をしましたが、タスクごとにコンテキストを切り替える仕組みも必要そう

みなさんもぜひ試してみてください！何か質問や改善案があれば是非コメントください。

アスエネでは、技術的なチャレンジだけでなく、脱炭素やESGという社会的意義のある領域で、自分の強みを活かして成長できる環境を大切にしています。エンジニアリングを通じて社会課題の解決に貢献したい方、一緒に挑戦したいという方をお待ちしています。

現在、全職種で採用を強化中です！興味を持っていただけた方は、アスエネ採用サイトからご連絡いただくか、X（ https://x.com/asuene_inc_ ）でカジュアルにメッセージをいただいても大歓迎です。
https://corp.asuene.com/recruit/

アスエネテックブログ
アスエネテックブログPublication

Discussion