Figma code layers

概要

• Figmaのキャンバス上で、デザインのすぐ隣に実際に動作するコードを配置し、画面の見た目と挙動を同じ場所で確認できます。
• コードレイヤーは通常のレイヤーのように扱えるインタラクティブなプロトタイプで、デザインと実装の間をスムーズにつなぎます。

主な特徴

• フレーム、GitHubリポジトリ、Webページ、プロンプトからコードレイヤーを作成し、複数の実装案を並べて比較できます。
• コードレイヤーの状態を編集可能なFigmaレイヤーへ変換し、編集内容をコードへ同期してリポジトリに反映できます。
• チームメンバーが同じレイヤーにコメントしたり、Figmaエージェントへ指示したりでき、MCP経由でAIツールからの作成にも対応します。

こんな人におすすめ

• 静的なモックアップでは伝わりにくいUIの動作を、デザイナーと開発者が一緒に確認・検討したいチームに適しています。
• デザインとコードを別々のツールで往復する負担を減らし、実際に動くUIを比較しながら意思決定したいプロダクトチームに向いています。