Sansan Tech Blog

Sansanのものづくりを支えるメンバーの技術やデザイン、プロダクトマネジメントの情報を発信

Figma MCPとCode Connectで実装効率を向上させる方法

Contract One 開発

こんにちは、技術本部 Contract One Engineering UnitでAI契約データベース「Contract One」の開発をしている井上です。

今回は、現在各所で注目を集めているFigma MCP（Model Context Protocol）について書きます。

Figma MCPとは

Figma MCPは、生成AIとFigmaをつなぐアダプターのようなものです。生成AIは、Figma MCPを通して、Figmaに記載されている内容を理解し、コーディングをアシストできます。

Figma MCPは、Figma Code Connectを使ってFigmaで作成したデザインシステムと実装コードをつなげることで、より高い効果を発揮します。この記事では、その設定方法と活用例も併せて紹介します。


以下、次のような順で書いていきます。

  • Figma MCPの設定方法
  • Figma Code Connectの設定方法
  • 実際の活用事例

Figma MCPの設定方法

⚠️ 注意: Figma MCPの利用には、Figma Dev Modeの契約が必要です。

1. Figmaデスクトップアプリのインストール

まず、Figmaのデスクトップアプリをダウンロードします。

www.figma.com

2. MCPの有効化

Figmaのデスクトップアプリを開き、MCPを有効化します。
「Enable Dev Mode MCP Server」にチェックを入れてください。

figma enable MCP

3. MCPサーバーの設定

次のように MCP Server を設定します。

{
  "mcpServers": {
    "figma-dev-mode-mcp-server": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

MCPの設定は、Clineの場合はGUIから、Claudeの場合は次のようなコマンドで設定可能です。

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

4. 設定完了

以上でFigma MCPの設定は完了です。

これだけでも「右側にボタンを配置して」などと命令しなくても、URLを渡して「このデザインを実装して」と頼めば対応してくれる状態になりました。
ただし、Figma MCPの効果を最大限に発揮するためには、さらにFigma Code Connectも使うとより効果的です。

Figma Code Connectの設定方法

1. @figma/code-connectをインストール

まずは、次のコマンドを実行して、グローバルに@figma/code-connectをインストールします。

pnpm install --global @figma/code-connect@latest

2. アクセストークンの取得

次に、Figmaのアクセストークンを取得します。
トークンの取得手順は次のとおりです。

  1. Figmaにログインし、ファイルページの左上にあるメニューから「Settings」をクリック
  2. 設定画面が開いたら、左側のメニューから「Security」タブを選択
  3. 「Personal access tokens」セクションで「Generate new token」ボタンをクリック
  4. トークンの名前を入力し、Code ConnectのWriteとFileContentのReadの権限を選択
  5. 「Generate token」ボタンをクリックしてトークンを生成
  6. 生成されたトークンをコピーして安全な場所に保存

3. Figmaとの接続

共通のUIコンポーネントを管理しているディレクトリで、次のコマンドを叩きます。

npx figma connect --token=先ほど取得したトークン

4. ひな型コードの生成

先ほどのconnectコマンドを実行すると、対話形式で質問が表示されます。
これらに適切に回答していきます。
回答が完了すると、Figmaと実装を連携するためのひな型コードが生成されます。
生成されるコードの例は次のとおりです。

import figma from '@figma/code-connect';
import { Button } from './Button';

/**
 * -- This file was auto-generated by Code Connect --
 * `props` includes a mapping from your code props to Figma properties.
 * You should check this is correct, and update the `example` function
 * to return the code example you'd like to see in Figma
 */

figma.connect(
  Button,
  "https://www.figma.com/design/hogehoge"
  {
    // These props were automatically mapped based on your linked code:
    props: {},
    example: (props) => <Button {...props}>
  },
);

5. Prop Mappingの設定

次に、Prop Mappingを行います。
Prop Mappingとは、簡単にいうと「Figma側のコンポーネントでこういうバリアントが設定されていたら、React側のコンポーネントではこういうpropsを設定してください」という対応関係を定義することです。
一例として、Contract Oneでも使用している社内のデザインシステム「One Design System」では、次のようにButtonのProp Mappingを設定しています。

import figma from '@figma/code-connect';
import { Button } from './Button';

figma.connect(
  Button,
  'https://www.figma.com/design/6VOHorjIXPUaIWRhPieGLt/One-Design-System--Community-?node-id=178%3A88086',
  {
    props: {
      variant: figma.enum('type', {
        primary: 'primary',
        secondary: 'secondary',
        tertiary: 'tertiary',
        ghost: 'ghost',
        danger: 'danger',
      }),
      size: figma.enum('size', {
        sm: 'sm',
        md: 'md',
      }),
      disabled: figma.enum('state', {
        disabled: true,
      }),
    },
    example: ({ variant, size, disabled }) => (
      <Button variant={variant} size={size} disabled={disabled}>
        {/* TODO: The "ボタン" content is temporary. Please update it according to the Figma design. */}
        ボタン
      </Button>
    ),
  },
);

上記の設定は、「Figmaコンポーネントでtypeがprimaryのバリアントが設定されていたら、Reactコンポーネントで{ variant: "primary"}のpropを渡してください」といった意味になります。

6. 設定の反映

最後に、次のコマンドを実行して、設定したCode Connectの情報をFigmaに反映させます。

npx figma connect publish --token=先ほど取得したトークン

成功すると、Successfully uploaded to Figma, for Reactのようなメッセージがターミナルに表示されます。

確認してみましょう。
FigmaでButtonコンポーネントのインスタンスを選択し、Devモードのパネルから「Explore component behavior」をクリックします。

Explore component behavior

typeバリアントの"primary"を選択すると左側の、"secondary"を選択すると右側の表示になります。

Figmaのバリアントの値に基づいて、Recommend Codeの中身が変わっていることがわかります。

ここで表示されているRecommend Codeは、Figma MCPのget_codeを実行したときのレスポンスに含まれます。そのため、Code Connectを適切に設定すると、Figma MCPの効果が向上するというしくみです。

実際の活用事例

ここまででFigma MCPとFigma Code Connectの設定が完了しました。
では、実際にこれらを開発に利用する事例を紹介してみます。

デザインの修正に爆速で対応する

スクラム開発では、「スプリントレビューを受けてFigmaのデザインが変わる」といったことは頻繁に起こります。こうしたデザイン変更は、Figma MCPを使ってAIにやらせると、めっちゃスムーズです。
デザインの変更があった箇所のリンクを渡して、修正依頼をClaudeに投げると、コーヒーを飲み終わるころにはPRができあがっているでしょう。

注意点としては、Figma MCPを使う際に、スタイリングに関する指示を何も出さないと基本的にバニラCSSのコードが返ってきます。
Figma MCPのget_codeのレスポンスには次のような文章が含まれているからです。

Use tailwind if available, otherwise detect the project's styling approach (e.g. CSS in JS, CSS Modules, theme providers, etc) and follow it.
Use vanilla CSS only if no system is detected.

そのため、CSS in JSを使ってほしいのか、CSS Modulesを使ってほしいのか明示的に指定するといいです。
Contract Oneでは次のようなプロンプトを使用しています。

### レイアウト

レイアウトは基本的に One Design System のレイアウトコンポーネント (Box, Stack, Center 等) を使用
レイアウト用のコンポーネント群：

- `Box`: 基本的なコンテナ
- `Center`: 中央寄せコンテナ
- `Stack`: 縦積みレイアウト

使用例:

```tsx
<Box p="sm">
  Hello world!
</Box>
```

新しい画面を爆速で作る

新しい画面の作成タスクで、Figma MCPを役立てることもできます。

MCPを利用してLLMに画面を作らせると、スピードが速いだけでなく、デザインと実装とのズレが生じにくいというメリットがあります。
人間は「Figmaでは余白が8pxだったのに、間違って4pxで実装してしまった」といったミスを頻繁に起こします。一方、LLMはこうしたミスをあまり起こしません（もちろん常に完璧にFigmaを再現してくれるわけではありませんが）。

以下は、Clineに新しい画面を実装させるためのプロンプト例です。

### 仕様の理解フェーズ

まず最初に`figma-dev-mode-mcp-server`を利用して、画面をよく理解します。
`figma-dev-mode-mcp-server`の利用可能なToolは次のとおりです:

- `get_code`: 渡されたFigmaのURLの画面をコードに変換して取得する
- `get_image`: 渡されたFigmaのURLの画面のスクリーンショットを取得する
- `get_variable_defs`: 渡されたFigmaのURLの画面で使用されている色や余白のサイズ、タイポグラフィーなどの値を取得する
- `get_code_connect_map`: 渡されたFigmaのURLに含まれるFigmaノードIDと対応しているReactコンポーネントのマッピングを取得する

### 設計方針の説明フェーズ

これからどのように実装を進めようとしているか、簡潔に説明してください。
説明には、使用しようとしているUIコンポーネントとそれに与えるpropsを含めます。
実装方針を説明した後、『この方針で実装を進めてよろしいですか？』と質問し、ユーザーから肯定的な回答を得てから次のフェーズに進んでください。

### 初期実装フェーズ

このワークフローでは、UIのみを作成します。
ダミーデータの使用は許可されます。動的な部分は後回しにしてください。
インタラクションについても、最初は実装しなくて構いません。
`onClick={() => {}}`のように空のインタラクションを設定しておいてください。

実験として、次のようなフォームを作成させてみます。

Figma Survey Form

実際に生成に使用したプロンプトはgistに掲載しています。
create-react-code-from-figma.md · GitHub

以下が生成されたコードです。

import React from 'react';
import { Box, Stack, Button, FormControl, Input } from '@sansaninc/one-ui';

export const SurveyForm: React.FC = () => {
  return (
    <Box backgroundColor="paper" p="lg">
      <Stack gap="md">
        {/* MCPは好きですか？ */}
        <FormControl
          variant="vertical"
          label="MCPは好きですか？"
          required
          supportText="「好きです」を入力してください。"
        >
          <Input placeholder="好き" />
        </FormControl>

        {/* Figmaは好きですか？ */}
        <FormControl
          variant="vertical"
          label="Figmaは好きですか？"
          required
          supportText="「好きです」を入力してください。"
        >
          <Input placeholder="好き" />
        </FormControl>

        {/* ボタンエリア */}
        <Stack direction="horizontal" gap="sm" justifyContent="flex-end">
          <Button variant="secondary" size="md" onClick={() => {}}>
            もどる
          </Button>
          <Button variant="primary" size="md" onClick={() => {}}>
            回答する
          </Button>
        </Stack>
      </Stack>
    </Box>
  );
};

動作確認をしてみると、デザインを忠実に再現していることがわかります。

画面動作確認

まとめ

Figma MCPとFigma Code Connectを活用し、LLMにコードを書かせる手法について書きました。
これは単純にスピードアップになるだけではなく、Figmaと実装の乖離を減らし、より忠実にデザインを再現するのにも役立ちます。

ここからは余談ですが、LLMにコードを書かせようとすると、できの悪い生徒に勉強を教えるときのような気持ちになることがあります。
「ええい、じゃかしいわ！自分で書いた方が早いっちゃ！」と思うこともないとは言えません。

しかし、それを乗り越えて、LLMにコードを書かせるテクニックを磨いていくと、やがて自分の想像以上に早く正確にコードを書くようになります。
こうなったときの快感は筆舌に尽くしがたく、ウププってな笑いが腹の底からラッキーって感じで込み上げてきます。

ちなみに、Contract Oneではそんな快感に病みつきな人材、あるいはAI活用に前向きな人を積極採用中です。
ぜひカジュアル面談で一緒に話しましょう！

open.talentio.com

参考リンク

© Sansan, Inc.