Figma、ローカルコードの視覚的編集に対応　AIが本番コードを自動修正

デザインカンプで整えたUIが、本番環境に実装されたらなぜかズレている。そんなデザイナーとエンジニアの間の溝は、長年Web制作の現場で繰り返されてきたストレスでした。

Figmaは5月28日、「Figma Make」においてローカルの本番コードベースに直接接続できる新機能を発表しました。デザインツールを離れることなく、本番コードを直接ビジュアル編集できる環境を提供します。

キャンバスで調整、AIがコードを自動書き換え

今回のアップデートの目玉は、Figma Makeとローカルコードベースをつなぐ専用AIエージェントの搭載です。

ユーザーはMakeの画面上でUI要素を選択し、レイアウト、カラー、フォント、サイズなどを視覚的に変更できます。背後のAIエージェントが該当するコンポーネントコードを特定し、デザインの変更に合わせて自動でコードを書き換えます。

単なるプロパティ変更にとどまらないアニメーションやインタラクションの調整には、画面上の要素に「注釈（アノテーション）」を残す手法を採用しました。複数の要素を指定しながら文脈付きで指示できるため、通常のプロンプト入力よりも直感的にAIへ意図を伝えられます。

さらに、Gitワークフローに完全対応している点も大きな特徴です。

変更内容はローカルコミットとして保持され、ブランチの作成やコミットの巻き戻し、エンジニアチームへのPR提出までMake上で完結します。Make内の画面やコンポーネントを通常のFigmaキャンバスにレイヤーとしてコピー＆ペーストすることも可能です。

現在はMac向けベータ版で限定公開

この新機能は5月28日より限定ベータ版として提供が始まっています。

現時点で利用できるのはMac向けのデスクトップベータアプリのみで、利用にはウェイトリストへの登録が必要です。ベータ期間中はAIクレジットを消費せずに試用できますが、正式なクレジット料金体系は近日中に発表される予定です。

なお、Figma側は非エンジニア向けのセットアップ改善を進めているとしつつも、現時点ではすでに社内のリポジトリ権限を持っているデザイナーに最も適した機能であると説明しています。

なぜ重要か

今回の機能拡張は、AIツールが目指すべき「デザインと実装の完全な融合」に向けた極めて現実的な一歩だと評価できます。

多くのAIコーディングツールがIDEやターミナルの中に閉じこもる中、Figmaはデザイナーが最も慣れ親しんだキャンバス側から本番コードを操作する道を選びました。微細な余白の修正やフォントの差し替えのためだけにチケットを切り、エンジニアの手を止める必要がなくなります。

個人開発者や少人数のスタートアップにとって、デザインから本番反映までのサイクルを劇的に短縮できるメリットは計り知れません。

ただし、課題はコードの品質と保守性です。本番環境のフロントエンドは状態管理や独自コンポーネントの依存関係が複雑に絡み合っています。AIが書き換えたコードがアーキテクチャを壊さず、チームのコードレビューをスムーズに通過できるかどうかは、今後の現場での検証が待たれるところです。