Claude Code ActionsとFigma MCPでプロダクト開発を加速する

狙い

GMOペパボのプロダクト開発において、Claude Code ActionsとFigma MCPを活用することで、開発の効率化と品質向上を目論んだ取り組みを紹介します。また、それらの連携にあたってハマってしまった箇所があったのでサンプルコードをシェアすることで助かる人がいればと期待しています。

workflowのサンプルコード

事前にFigmaの個人用アクセストークンを発行しておき、「ファイルのコンテンツ」の読み取りと、「ライブラリのコンテンツ」の読み取り権限を持たせるようにしておいてください。

基本の型は公式のClaude Code ActionsドキュメントおよびFigma MCPのリポジトリにある通りですが、Figma MCPを利用するためのtoolsの設定をallowed_toolsに追加しないと動作しませんでした。

ちなみに以下ではmodelに指定しているアプリケーション推論プロファイルを活用することで、Claude Code Actionsで実行された推論によるコストを個別に判別してコスト管理することができます。詳しくはこちらを参照ください。https://zenn.dev/pepabo/articles/d2b37e19ca61da

- uses: ./.github/actions/claude-pr-action
  with:
    model: "arn:aws:bedrock:xxxx:xxxx:application-inference-profile/xxxx"
    use_bedrock: "true"
    trigger_phrase: "@claude"
    timeout_minutes: "60"
    github_token: ${{ secrets.GITHUB_TOKEN }}
    allowed_tools: Bash, mcp__figma-developer-mcp__get_figma_data, mcp__figma-developer-mcp__download_figma_images
    mcp_config: |
      {
        "mcpServers": {
          "figma-developer-mcp": {
            "command": "npx",
            "args": ["-y", "figma-developer-mcp", "--stdio"],
            "env": {
              "FIGMA_API_KEY": "${{ secrets.FIGMA_READ_ONLY_TOKEN }}"
            }
          }
        }
      }

できるようになることの例

これによって、デザインシステムや各施策のデザインをFigmaから直接取得し、コード生成やレビューに活用することが可能になります。具体的には以下のようなことができます。

• Figmaのコンポーネントをコードに変換し、フロントエンドの実装に活用
• デザインの変更点を自動で検出し、コードに反映

そうすることで、デザインの一貫性を保ちながら、開発を進めることができます。