はじめに

こんにちは、Figmaが好きすぎてなんならメモもたまにFigmaのテキストボックスで済ませているヤマダ(北野)です。普通にメモとしては使いにくいのでおすすめしません。

https://aws.amazon.com/jp/blogs/news/introducing-powers/
Kiro powers、気になりますよね！Kiro powersのセッションも記事にしましたので、今回は実際にそのpowerを見せてもらおうと思います。

Kiro powersとは

Kiro powers は、幅広い開発とデプロイメントのユースケースに対して、その統一されたアプローチを提供します。MCP ツールとフレームワークの専門知識を一緒にパッケージ化し、動的に読み込みます。
Neo が『マトリックス』で武術の専門知識を即座にダウンロードしたことを覚えていますか？ それが Kiro エージェントに対して powers が行うことです。あらゆるテクノロジーの専門知識への即座のアクセスです。鍵は動的コンテキスト読み込みです。従来の MCP 実装はすべてのツールを事前に読み込みますが、powers は関連する場合にのみアクティブ化されます。「database」と言及すると、Neon power がそのツールとベストプラクティスを読み込みます。デプロイメントに切り替えると、Netlify がアクティブ化され、Neon は非アクティブ化されます。

私はマトリックスを履修していませんが、なんとなく想像はできます。必要な時に必要な知識だけがインストールされる感じですよね。
今回はpowersのなかでもFigma powerを試していきたいと思います。

Figma powerを試す

主な機能

デザインシステムの統合

  • Figmaデザインからコードコンポーネントへの自動マッピング
  • デザインシステムルールの生成と管理
  • デザインとコードの一貫性を保つ

コードコネクト機能

  • UIコンポーネントをFigmaデザインに自動接続
  • コンポーネントファイルが作成・更新された時の自動チェック
  • デザインとコードの同期状態を管理

ワークフロー自動化

  • デザインシステムルールを自動生成してステアリングファイルに保存
  • ファイル編集時のフックでFigmaコンポーネントとの連携を自動提案
  • React + Tailwindコードの生成とプロジェクト固有のデザイントークンへの変換

使用例

  • デザインシステムルール作成 – プロジェクト全体のデザイン一貫性を保つルールを自動生成
  • コンポーネント同期 – 新しいUIコンポーネントを作成した際、対応するFigmaデザインとの接続を提案
  • デザイン→コード変換 – Figmaデザインを実際のコードコンポーネントに変換し、プロジェクトのスタイルシステムに適合

上記はKiroに聞いてみた結果です。使用例にあるデザイン→コード変換はAmplify Studioで提供されていた機能に似ているような気がしますね。ということで今回はFigmaで作成したコンポーネントをVueのプロジェクトにコード化してコンポーネントとして使用してみたいと思います。

実践

Kiro側の作業


まずはKiroを開きましょう。


サイドバーにKiroとKiro powersのアイコンが並んでいます。パワーありそうですね。


さっそくKiro powersの方を開いてみるとRECOMMENDEDにいきなりFigma powerっぽいのがありました。


ここでインストールするだけみたいですね。今の所は拡張機能みたいな感じです。
では今回やってみるVueのプロジェクトで使いたい旨を伝えてみます。


少し話したら勝手に作業を始めました。最近ちょっとKiroを触っていなかったのですが、この何もしなくても全部進んでいく感じが懐かしいです。
Figma側のコンポーネントの作成などは手で行う必要があるので一旦Figmaに移動します。

Figma側の作業



デザインファイルを作成し、適当にコンポーネントを作ってみました。オブジェクトを選択して右クリックで「コンポーネントを作成」をするだけです。

Figma側で必要な情報は以下です。用意しておきましょう。

  • コンポーネントがあるデザインファイルのURL
  • アクセストークン（作った瞬間しか見れないので注意！）


URLはコピーするだけですが、アクセストークンは作成する必要があります。Figmaのホームから左上のアカウントをクリックし、「設定」「セキュリティ」「個人アクセストークン」です。必要な権限を選択して新しく作成します。今回は1日の期限にしておきました。

Kiro側に戻ってくる


「.kiro/settings/mcp.json」を開きます。
水色に塗りつぶしてある箇所にアクセストークンを作成した時に出てくる値を入れます。（作った瞬間しか見れないので注意！）

といってもこの辺りもKiroに言って値を渡せば全部やってくれると思います。あとはKiroに任せつつ、コンポーネントを認識できたらしいのでVueのプロジェクトに適当に出力もらいます。


おお〜！なんか勝手にカスタマイズして出してくれてますね！すごい楽ちんだ！！

Figma powerまとめ

1. デザインデータの構造化取得

# Figma APIから取得したデータ
components:
'2:9':
id: '2:9'
name: Kiro
description: ''
  • Figmaファイルのコンポーネント構造を自動解析
  • デザインシステムの要素（色、レイアウト、コンポーネント）を構造化されたYAMLで取得

2. ベクターデータの直接活用

従来の方法だと：

  • 手動でFigmaからPNG/JPGをエクスポート
  • 画像ファイルとして扱う（拡大縮小で品質劣化）

Figma Powerを使うと：

  • VectorデータをSVG形式で直接取得
  • 完全にスケーラブルで軽量
  • コードとして扱えるため、色やサイズを動的に変更可能

3. 開発者フレンドリーな形式

// 生成されたVueコンポーネント
<KiroIcon
:size="100"
backgroundColor="#4f46e5"
logoColor="#fbbf24"
/>
  • プロパティベースでカスタマイズ可能
  • デザインシステムとの統合が容易

4. ワークフローの自動化

手動プロセス：

  • Figmaを開く
  • コンポーネントを選択
  • エクスポート設定
  • ダウンロード
  • ファイル整理
  • コンポーネント作成

Figma Power：

  • URLを指定
  • 自動でSVG取得
  • 即座にVueコンポーネント化

さいごに

今回はとても簡単なユースケースでFigma powerを使ってみました。普段からFigmaを使っていることもあってかなりあっさりとやりたいことをできた気がしています。この程度の作業であれば自動化の恩恵は感じにくいですが、powerに頼ることでチームメンバー間のスキルの差がなくなることや作業フローが一律になるなど目に見えない効果はたくさんありそうです。

また、KiroのSpecファイルにデザインルールを自動生成させるなどさらに厳密な管理も想像できます。他のpowerにも同様のインパクトがあると思うので、Kiroによる開発効率の向上はヤマダが想像しているものよりとんでもなさそうです！なんといってもKiroはアイコンが可愛いのでずっと触れていたいツール、これから擦っていきたいと思います🙇‍♂️