Figma、AIモーショングラフィックスとWebGPUシェーダーツールを発表
Figmaは、高度なAI機能をコアとなるキャンバスに直接統合することで、デザインと開発の架け橋を根本的に変えようとしています。年次カンファレンス「Config」において、このデザイン界の巨人は、複雑なクリエイティブ・ワークフローを自動化するために設計された、AI駆動のモーショングラフィックスやシェーダーエフェクトを含む一連の高精度なツールを発表しました。
Code Layersとフルスタック最適化によるギャップの解消
Figmaのエコシステムにおける最も重要な変化の一つは、フルスタック開発向けに最適化された、再構築されたキャンバスです。「Code Layers」の導入により、デザイナーとエンジニアは統合された環境で作業できるようになり、ビジュアルモックアップと実際のコードベースの境界線が事実上なくなりました。
開発者は、リポジトリのクローン作成、FigmaのAIエージェントを使用した新しいデザインの方向性の生成、そして複雑なフローを編集可能なデザインレイヤーへの抽出が可能になりました。重要なのは、これらのアップデートによって、変更をコードに同期し戻すことができる双方向のワークフローが実現することです。AIエージェントとコーディングツールを単一のスペースに集約することで、Figmaは単なるプロトタイピングツールから、製品開発ライフサイクル全体の中心的なハブへと進化しています。
ジェネレーティブ・モーションとAI駆動のアニメーション
Figmaは、UI/UXデザインにおいて最も時間がかかる要素の一つである「モーション」に取り組んでいます。新しいMotionツールにより、チームはプラットフォーム内で直接、アニメーション、トランジション、3D変形を共同でデザインできるようになります。
すべての動きを手動でキーフレーム設定する代わりに、ユーザーはチャットボットのインターフェースを活用して、プロンプトからアニメーションを生成できます。このAIを活用したアプローチにより、クリエイターは特定のバウンス（跳ね返り）やスライドといったトランジションを言葉で説明するだけで、ソフトウェアにアニメーションを自動生成させることができます。これらのモーションアセットはデザインシステムに接続され、コードに裏打ちされているため、「そのまま出荷可能（ready to ship）」な状態であり、デザインとフロントエンドエンジニアリングの間のハンドオフにおける摩擦を大幅に軽減します。
WebGPUシェーダーによる高精度なビジュアル
ビジュアルの忠実度の限界を押し広げるため、FigmaはWebGPUを活用した新しいシェーダーツールを導入しました。これにより、これまでのツールの制約内では不可能だった、カスタムのビジュアル処理や塗りつぶしを作成できるようになります。
ユーザーはプロンプトを使用して、ディザリング、ピクセル化、高度なブラー（ぼかし）タイプなどの複雑なシェーダーエフェクトをキャンバス上で直接構築できます。この機能により、デザイナーは現代のウェブ標準に基づいた、ハイエンドでパフォーマンスの高い視覚効果を実装できるようになります。これを補完するのが「Figma Weave」です。これは、複雑で多段階のAIワークフローを、シンプルで直感的なキャンバス操作に変換するために設計された、20以上の統合AIツールスイートです。
なぜこれがAIの展望において重要なのか
Figmaの進化は、業界におけるより広範なトレンド、すなわち「副操縦士（sidekick）としてのAI」から「統合されたエンジンとしてのAI」への移行を示唆しています。モーションやシェーダー数学のような専門領域に生成機能を組み込むことで、FigmaはLLMや生成AIがいかに高度にテクニカルなプロフェッショナル・ワークフローに適用できるかを証明しています。この進展は、クリエイティブ・ソフトウェアがいかに単なる単純な反復作業の自動化にとどまらず、人間の専門知識を拡張できるかという点において、新たな基準を打ち立てるものです。
主なポイント
- 統合されたワークフロー: 新しいCode Layersにより、開発者はデザインの変更を直接コードに同期できるため、ハンドオフのプロセスが効率化されます。
- ジェネレーティブ・モーション: デザイナーは自然言語のプロンプトを使用して、コードに裏打ちされた複雑なアニメーションや3D変形を作成できるようになります。
- 高度なビジュアル: WebGPUを活用したシェーダーの統合により、シンプルなAIプロンプトを通じて、ディザリングやピクセル化などの高精度なエフェクトが可能になります。