Figma Makeにプロパティパネルと注釈が追加、視覚操作でコード編集を狙うワークフローを導入
この記事の要点
- Figma Makeはプロパティパネルを追加し、間隔・タイポグラフィ・レイアウトなどの視覚的コントロールで要素を直接編集できるようになった。
- 注釈（Annotate for agent）でキャンバス上に対象をマーキングし、文脈付き指示を与えて複数要素へ一括でエージェント適用できる。
- 編集はまずチャット内にステージされ、適用時にクレジットが消費される点が明記されている。プロパティパネルは新規Makeデザインのみ対応。
制作影響度80/100
Web・UI・アプリ制作 AI制作ワークフロー
視覚コントロールと注釈によるインライン編集
プロパティパネルでデザイン系の詳細プロパティを直接操作できるようになり、注釈で複数要素に文脈付き指示を与えてエージェント適用できる機能が追加された。
制作に効く変更点
- プロパティパネルの導入で視覚的なスペーシング／タイポグラフィ／レイアウト調整が直接可能になった
- 注釈機能でキャンバス上に範囲指定して文脈付きプロンプトを与え、複数要素に対して精密な変更を指示できる
- 変更はステージ（チャット）で確認後に適用され、適用時にクレジットを消費してファイルの新バージョンへ反映される
制作フローの差分
変更前：変更前の具体的な既存フローは一次情報で明示されていないが、Makeはこれまでテキストプロンプトベースの編集や別ツール連携を想定する文脈が示されている。
今回：プロパティパネルで視覚コントロールを使い要素を直接調整し、注釈でキャンバス上に位置指定と説明を付与してエージェントに詳細指示を与えられる。編集はまずチャットにステージされ、確認後に適用してコードを更新する。
実務上の差：今回の変更により、キャンバスでの視覚的操作と注釈を介した文脈指示で、テキストだけで説明する手間を減らし、各変更をステージして確認できるワークフローが追加された。
デザインとコードの受け渡しを短絡化する編集経路
UIデザイナーやフロントエンド実装者は、キャンバス上の調整や注釈でエージェントに具体的な変更を伝え、確認後にそのままコードへ反映する流れを組み込めるようになる。新規Makeデザインが対象である点は導入時の考慮点となる。
主な対象：UI/プロダクトデザイナー、フロントエンド実装者、プロトタイピング業務に関わるチームリーダー
適用対象とクレジット消費に関する注意
プロパティパネルは『新規Makeデザイン』のみ対応と明記されており、すでに作成済みのデザインは従来の編集ツールが使われる点と、適用時にクレジットが消費される点を確認する必要がある。