リテールアプリ共創部のるおんです。
先日、AWSから Kiro powers という新機能がリリースされました。Kiro powersは、AIコーディングエージェントであるKiroの機能を拡張するためのプラグインシステムです。
今回は、このKiro powersの中から Figma power を実際に試してみたいと思います！

https://aws.amazon.com/jp/blogs/news/introducing-powers/

Kiro powersとは

Kiro powersとは、Kiroの機能を拡張するためのプラグインシステムです。MCPサーバー、ステアリングファイル、フックなどをパッケージ化したもので、ワンクリックでインストールして使用することができます。

Kiro powersの詳細については、以下の記事で詳しく紹介していますので、こちらをご覧ください。
https://dev.classmethod.jp/articles/kiro-powers-introduction/

今回は、このKiro powersの中から Figma power を試してみます。

Figma powerのインストールと有効化

① powerのインストール

左サイドバーにKiroにPowerが宿ったようなロゴがあるので、それを選択し、レコメンドされている「Design to Code with Figma」を見つけて「Install」をクリックします。

インストールが完了すると、ユーザー設定ファイル（~/.kiro/settings/mcp.json）に 自動的 にpowerの設定が追加されます。

{
  "mcpServers": {},
  "powers": {
    "mcpServers": {
+     "power-figma-figma": {
+       "url": "https://mcp.figma.com/mcp",
+       "disabled": false,
+       "disabledTools": [],
+       "autoApprove": ["get_screenshot"]
+     }
    }
  }
}

このように、MCPサーバーの設定が自動的に追加されるのがpowersの便利なところですね。手動でMCPサーバーを設定する必要がありません。

② powerの有効化

インストールが完了すると、「Try Power」ボタンが表示されるので、それをクリックします。すると、右側のパネルでオンボーディングが始まりますが、その前に Figma MCPの接続が必要 なので、その案内が表示されます。

案内に従って、MCPサーバーを接続します。Figma MCPを使用するには、Figmaアカウントでのアクセス許可が必要です。ブラウザが開いてFigmaへのログインを求められるので、「Agree & Allow Access」をクリックして許可します。

オンボーディングのワークフローの開始

ここから実際にオンボーディングが開始されます。

具体的には、Figma PowersのPOWER.mdに記載されているWorkflowが実行されます。
https://github.com/kirodotdev/powers/blob/main/figma/POWER.md#step-1

デザインシステムルール の生成と、hooks の生成の2つのステップがあることが確認できます。

Step1: デザインシステムルールの作成

まずはワークフローのStep1である、デザインシステムルール の生成が実行されます。
ここでは、Figma MCPサーバーのcreate_design_system_rulesツールを使用して、「design-system.md」という名前でステアリングファイル（ルールファイル）が生成されます。

ここで、実際に使用されているフレームワークやスタイリングライブラリなどの技術スタックや、デザインパターンが記載されていることが確認できます。

// tailwind.config.js で定義
colors: {
  primary: {
    DEFAULT: "#0017C1",  // メインカラー
    touch: "#00118F",    // ホバー/アクティブ状態
  },
  secondary: {
    touch: "#B2B9EC",
    errorTouch: "#F2C1C1",
  },
  error: {
    DEFAULT: "#C62828",
    touch: "#A12020",
  },
  dark: "#080808",
  default: "#414143",    // 通常テキスト
  soft: "#757578",       // 補助テキスト
  light: "#B4B4B7",      // disabled状態
  pale: "#D8D8D8",       // ボーダー
  veryPale: "#F1F1F4",
  extremelyPale: "#F8F8FB", // 背景
}

// 使用例
className = "text-14ptW3"; // 14px, line-height: 19px, weight: 300
className = "text-16ptW6"; // 16px, line-height: 21px, weight: 600

fontFamily: {
  sans: ["Noto Sans JP", "sans-serif"],
  body: ["Noto Sans CJK JP DemiLight", "ヒラギノ角ゴ Pro W3", ...],
}

web/src/
├── components/     # 共通UIコンポーネント
│   ├── Button.tsx
│   ├── TextField.tsx
│   ├── SelectField.tsx
│   └── *.stories.tsx
├── features/       # 機能別ページ・コンポーネント
│   ├── member-card/
│   ├── member-registration/
│   └── ...
├── hooks/          # カスタムフック
├── utils/          # ユーティリティ
└── assets/         # 画像・アイコン

import { tv, twMerge } from "@/utils/tailwind";

const buttonStyle = tv({
  base: "flex h-12 w-full items-center justify-center gap-2 rounded px-6 py-2",
  variants: {
    property: {
      primary: "",
      error: "",
    },
    variant: {
      contained: "",
      outlined: "border border-solid",
    },
  },
  compoundVariants: [
    {
      property: "primary",
      variant: "contained",
      class: ["bg-primary", "text-white", "hover:bg-primary-touch"],
    },
  ],
});

import { forwardRef, type ComponentProps } from "react";
import { twMerge } from "@/utils/tailwind";

type Props = ComponentProps<"input"> & {
  label?: string;
  error?: { message?: string };
};

export const Component = forwardRef<HTMLInputElement, Props>(
  ({ label, error, className, ...props }, ref) => {
    return (
      <input
        ref={ref}
        className={twMerge("base-classes", error && "error-classes", className)}
        {...props}
      />
    );
  }
);
Component.displayName = "Component";

Step2: Hooksの作成

次に、ワークフローのStep2である、Hooksの作成 が実行されます。
ここでは、figma-code-connect.kiro.hookという名前でフックファイルが生成されます。

Hooksは、IDE内で特定のイベントが発生したときに自動的にエージェント（AI）を実行させる仕組みです。いわば「トリガー → アクション」の自動化ルールです。

そして、今回作られたfigma-code-connect.kiro.hookは、UIコンポーネントが追加・更新されたときに呼び出され、Figmaとの連携を確認するためのものです。具体的には、web/src/components/ や web/src/features/ 配下の .tsx ファイルが編集されたときに「Figma MCPを使ってCode Connectを実行」するかどうかをkiroがユーザーに尋ねるように設定されています。

{
  "enabled": true,
  "name": "Figma Component Code Connect",
  "description": "Check if UI component should be connected to Figma design",
  "version": "1",
  "when": {
    "type": "fileEdited",
    "patterns": ["web/src/components/**/*.tsx", "web/src/features/**/*.tsx"]
  },
  "then": {
    "type": "askAgent",
    "prompt": "When a new component file is created or updated, ask the user if they would like to confirm if the code has been correctly attached to the Figma component of the same name. If the user approves: first run the get code connect map tool for the last Figma URL provided by the user. You can prompt them to provide it again if it's unavailable. If the response is empty, run the add code connect map tool, otherwise tell the user they already have code mapped to that component. If the user rejects: Do not run any additional tools."
  },
  "shortName": "figma-code-connect"
}

以上でセットアップは完了したようです。実際に、Kiro内にてSteeringと、HooksとPowerのMCPサーバーが全てセットアップできていることが確認できます。

実際にFigmaからReactコンポーネントを生成してみる

それでは、実際にFigmaのデザインからReactコンポーネントを生成してみます。

Figmaデザイン

プロンプト

以下のプロンプトをKiroに送信しました：

このFigmaフレームをコンポーネントにしてください。
MemberRegistrationCompletePageという名前で、「src/features/member-registration」に作成してください。
https://www.figma.com/design/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/PageName?node-id=xxxxxxxx-xxxxxxxx&t=xxxxxxxx-xxxxxxxx

Kiroの動作

Kiroは以下の手順で処理を行いました：

1. Steeringファイルの読み込み: 作成したdesign-system.mdを読み込んで、デザインシステムルールを理解しています。
2. Figma Powerのアクティベート: プロンプトに「フレーム」というキーワードが含まれるため、Figma Powerをアクティベートします。ここで初めてMCPなどが読み込まれます。
3. Figma MCPの利用: Figma MCPのget_design_contextとget_screenshotを利用して、Figmaのデザイン情報を取得します。
4. 既存コードの確認: 既存のコンポーネントを確認し、再利用可能なコンポーネントがあればそれを使用します。
5. コンポーネントの生成: 新しいコンポーネントと、そのコンポーネントのStorybookファイルを生成します。
6. Hooksが実行！（されるはずだったが、、、）: ファイル保存時にfigma-code-connect.kiro.hookが実行され、Figmaとの連携がされるはずでしたが、ここでは実行されませんでした。。。残念。

生成されたコンポーネント

以下のようなコンポーネントが生成されました：

import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/Button";
import { Layout } from "@/components/Layout";
import { buildAppTitle } from "@/utils/string";

export const MemberRegistrationCompletePage = () => {
  const navigate = useNavigate();

  return (
    <>
      <Helmet>
        <title>{buildAppTitle("新規会員登録の完了")}</title>
      </Helmet>
      <Layout>
        <section className="flex flex-col gap-4 px-4 pt-8">
          <h1 className="text-14ptW6">会員登録が完了しました</h1>
          <p className="text-14ptW3">
            お客様の情報を登録しました。会員証をご利用いただけます。
          </p>
          <Button
            property="primary"
            variant="contained"
            onClick={() => {
              navigate("/");
            }}
          >
            会員証へ進む
          </Button>
        </section>
      </Layout>
    </>
  );
};

Figmaのデザインに基づいて、プロジェクトの既存パターン（MemberEditCompletePageなど）に合わせたコンポーネントが生成されました。tailwind.config.jsで定義されているtext-14ptW6、text-14ptW3などのカスタムフォントサイズも適切に使用されています。

Storybookで確認

生成されたコンポーネントをStorybookで確認してみます。

pnpm run storybook

Figmaのデザインと比較しても、同じ見た目のコンポーネントが生成されていることが確認できました！

おわりに

今回は、Kiro powersの新機能である「Figma power」を使って、FigmaデザインからReactコンポーネントを生成する流れを紹介しました。

従来のFigma MCPを単体で使う場合と比べて、Kiro powersを使うことで従来だと大変だった、MCPのセットアップとルールファイルの追加、フックスの設定が簡潔になり、より強力なFigmaとの連携が可能になりました。実際に、FigmaのデザインからReactコンポーネントを生成することができました。

残念ながら今回はHooksの自動実行（Code Connect）がうまく動作しませんでしたが、設計としてはファイル保存時に自動でFigmaとコードを連携させる仕組みが用意されており、今後の改善に期待したいところです。

Figma以外にも、NetlifyやSupabaseなどのpowersも提供されているので、今後はそちらも試してみたいと思います。

以上、どなたかの参考になれば幸いです。

参考

https://aws.amazon.com/jp/blogs/news/introducing-powers/
https://help.figma.com/hc/ja/articles/32132100833559-Figma-MCPサーバーのガイド