ラボ

AIを使ってデザイン・開発したツール。

ほとんどがFigmaプラグインです。自分のワークフローの中の引っかかりから生まれ、AIを巻き込みながらエンドツーエンドでデザイン・開発した、実際に公開しているツールです。気になるプロジェクトをタップして詳しくご覧ください。

Amazon BedrockのLLMをベースに、1magineは自然言語を実際に編集可能なFigma要素へと変換します。マルチターンのプロンプト履歴、ライト/ダークテーマ、そしてアクセシブルでスケーラブルなUIを備えています。

7つの専用モード

作成
テキストプロンプトからモックアップ、フローチャート、コンポーネントを生成。
修正
選択した要素を自然言語で更新。
分析
選択したコンポーネントをAIが洞察・分析。
複製
モックアップ画像を編集可能なFigmaコンポーネントに変換。
アウトライン
既存デザインからスケルトンのワイヤーフレームを作成。
派生
ナレッジベース内のデザインシステム仕様からコンポーネントを生成。
プレビュー
フレームをHTML/CSS/Reactに書き出し、ブラウザでプレビュー。
1magineプラグイン — AIモードとプロンプト入力を備えたメイン画面機能概要 — AIモード、マルチターン履歴、テーマ設定、アクセシブルなUI1magineがスマートホームのダッシュボードを編集可能なFigma要素として生成している様子1magineで生成したUIモックアップやコンポーネントのギャラリー

デザインから開発への引き継ぎにおける、繰り返しの手作業（各仕様ごとにすべてのコンポーネントを手動でスケーリングする工程）をなくすために作りました。コンポーネントあたり約2時間の工数を削減し、社内のAmazonデバイスチーム4つに採用され、60名以上のアクティブユーザーがいます。

Adaptive UI Scaler — 1つのコンポーネントを4つのスケールレベル（Normal/Default、Large、Very Large、Largest）で表示

Design Checkerは、問題が開発に届く前のデザイン段階で、ページや選択範囲を監査します。視覚的アクセシビリティ、インタラクションのアクセシビリティ、デザインシステムの一貫性にわたる9つのチェックを実行。検出結果は種類と重大度（Must / Should / Nice to Fix）ごとにグループ化され、それぞれにWCAGに基づくAIの解説と推奨される修正が付きます。Fire TV UXが開発。

ハイライト

視覚
色のコントラスト（WCAG AA）、フォーカスインジケーター、テキストの可読性。
インタラクション
タッチターゲットのサイズ、インタラクティブな余白、コンポーネントの状態バリアント。
一貫性
ライブラリへの準拠、分離コンポーネントの検出、命名。
スキャン
ワンクリックでページ全体または選択範囲を確認。種類と重大度ごとにグループ化。
解説
問題ごとにAIが理由と修正方法を提示し、WCAGの基準を引用（Bedrock）。
トリアージ
修正済みのマーク、上書き（保持）、誤検出の報告、一括操作。
ダッシュボード
管理者ビュー — 利用状況の分析、上位の違反、誤検出のキュー。
エクスポート
開発者への引き継ぎ用にCSV、HTML、PDFでレポートを出力。
Design Checkerプラグイン — 重大度ごとにグループ化された検出結果の概要、Explain/Override/Exportを備えた色コントラストチェック、設定パネル

Figmaページのリアルタイムなミニマップです。どこでもクリックすればパンしたりレイヤーへ直接ズームでき、ホバーするとフレームやシェイプ、セクションの名前を示すスマートなツールチップが表示されます。プレビューウィンドウのサイズをレイアウトに合わせて調整でき、ライト/ダークの両テーマで表示されます。

Figma Communityで開く

ハイライト

ミニマップ
作業しながらページ全体をリアルタイムに俯瞰。
ナビゲート
クリックでパン、または任意のレイヤーへ直接ズーム。
ツールチップ
ホバーでフレーム、シェイプ、セクションなどを識別。
テーマ対応
Figmaのライト/ダークの両テーマで表示。
サイズ変更
Small、Medium、Largeのプレビューウィンドウから選択。
スマートなツールチップがフレーム、シェイプ、セクションなどのレイヤー名を示し、すばやくジャンプCanvas MapのミニマップをFigmaのライト/ダーク両テーマで表示レイアウトに合わせてSmall、Medium、Largeのプレビューウィンドウを選択