メインコンテンツまでスキップ

レイヤー名を1つのプロンプトで設定

Figmaエージェントが、ファイル内の乱雑なレイヤー(フレーム、コンポーネント、バリアントなど)をキャンバス上で直接リネームします。希望する内容を説明するだけで、数秒でファイルが読みやすくなります。

  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

ようやく意味の通るレイヤー名に

整理された一貫性のあるネーミングはチーム全体の作業スピードを高めます。しかも、もう手作業で行う必要はありません。

AIが生成したデザインレイアウトを検討しているFigmaのキャンバスAIが生成したデザインレイアウトを検討しているFigmaのキャンバス

単純作業を削減し、集中力を維持

1つずつ、フレームごとにレイヤー名を変更するといった面倒な作業を任せて、本当に重要なデザインの意思決定に集中できます。整理作業はエージェントが引き受けるので、そのまま作業を続けられます。

デザイン全体に一括編集を適用しているFigma AIエージェントパネルデザイン全体に一括編集を適用しているFigma AIエージェントパネル

1つずつではなく、まとめてリネーム

フレーム、ページ、あるいはファイル全体を選択し、命名規則を説明します。エージェントが何百ものレイヤーに一貫して適用するため、繰り返しのクリック作業なしにファイルを整理された状態に保てます。

チームのフィードバックをデザインに統合しているFigma AIエージェントパネルチームのフィードバックをデザインに統合しているFigma AIエージェントパネル

チームの構造への認識を揃える

分かりやすいレイヤー名は、より速いハンドオフにつながります。開発者は必要な要素を見つけやすくなり、デザイナーは互いの作業を土台に構築でき、「Frame 847」のような読み解けない名前に時間を無駄にすることもなくなります。

よりきれいなファイルを支える機能

デザインチームの実際の働き方に合わせて作られた、Figmaエージェントならではの特長を詳しく見ていきましょう。

  • コンポーネントライブラリに接続し、ブランドトークンをデザインに自動適用しているFigma AIエージェントのスクリーンショットコンポーネントライブラリに接続し、ブランドトークンをデザインに自動適用しているFigma AIエージェントのスクリーンショット

    命名規則を説明する

    機能別、階層別、コンポーネントの種類別など、レイヤーの名前をどう付けたいかをエージェントに伝えると、そのロジックを選択範囲全体に適用してくれます。

  • Figma上で複数のAIデザインプロンプトが同時に実行されているスクリーンショットFigma上で複数のAIデザインプロンプトが同時に実行されているスクリーンショット

    1つのプロンプトで一括リネーム

    複数のフレームやページ全体を選択できます。エージェントが一度にすべてをリネームするため、1つずつレイヤーをクリックする必要はありません。

  • デザインへのコメントが付いた、共有されたFigma AI会話スレッドのスクリーンショットデザインへのコメントが付いた、共有されたFigma AI会話スレッドのスクリーンショット

    追加プロンプトで調整

    命名がしっくりこない場合は、同じスレッド内で「もっと短くして」「コンポーネントの種類を追加して」のように調整でき、最初からやり直す必要はありません。

  • デザインワークフローを自動化するFigma AIエージェントのスキルオプションを示すスクリーンショットデザインワークフローを自動化するFigma AIエージェントのスキルオプションを示すスクリーンショット

    共有可能なスレッド

    スレッドを共有すると、チームはプロンプト全体と命名のロジックを確認できます。別途スタイルガイドがなくても、全員がファイル構造について認識を揃えられます。

Figmaは、まるで自分の手の延長のように感じられます。キャンバス上でデザインのアイデアを練り、あとはエージェントが最後まで仕上げてくれます。デザインライブラリを接続すれば、これまでにない速さでデザインからコードへ進めます。

Andy Madrick
プロダクトデザイナー、Notion

Notionのロゴ

Figmaエージェントを使ってみる

  • リネームするレイヤーを選択

    Figma Designでファイルを開きます。リネームしたいレイヤー、フレーム、コンポーネントを選択するか、ページ全体を選択します。

  • 命名規則を説明する

    レイヤーの名前の付け方をエージェントに伝えます。「コンポーネントの種類と状態で命名して」「機能を先頭にしたcamelCaseを使って」のように具体的に伝えましょう。

  • リネームされたレイヤーを確認

    レイヤーパネルで更新された名前を確認します。調整が必要な場合は同じスレッドで修正できます。

  • ファイルを整理された状態に保つ

    ファイルが大きくなるたびにエージェントを再実行しましょう。一貫した命名は維持しやすく、一度プロンプトすればどこにでも適用できます。

エージェントを使いこなす

  • Figmaのデザインエージェントが登場

    Figma AIエージェントの実際の動作を見て、自分のワークフローにどう活かせるかを確認しましょう。

    詳細はこちら
  • 「開始」ボタンとサンプルのチャットプロンプト「Figma、読書アプリ用に異なるレイアウトを作成できますか?」が表示されたFigmaエージェントプレイグラウンドの導入画面「開始」ボタンとサンプルのチャットプロンプト「Figma、読書アプリ用に異なるレイアウトを作成できますか?」が表示されたFigmaエージェントプレイグラウンドの導入画面

    Figmaエージェントを使ってみる

    一括編集からフィードバックの反映まで、Figmaエージェントの機能をステップバイステップのガイド付きで実際に試せるプレイグラウンドです。

    始める
  • デザインワークフローでのFigmaエージェントの使い方

    Figmaチームによるステップバイステップのチュートリアルで、デザインワークフローにおけるFigmaエージェントの使い方を学びましょう。

    今すぐ見る

FAQ

AIレイヤーネーミングツールは、内容や機能、あるいは説明した命名規則に基づいて、デザインファイル内のレイヤーを自動的にリネームするツールです。Figmaエージェントはこれをキャンバス上で直接行います。レイヤーを選択し、どのように名前を付けたいかを説明すると、エージェントが選択範囲全体に一貫した名前を適用します。手動でのリネームは不要です。

Figmaエージェントは、選択したレイヤーを分析し、プロンプトに基づいて名前を適用します。コンポーネントの種類別、階層別、camelCaseなどの特定の規則で命名するよう依頼できます。エージェントは選択範囲を処理して一括でレイヤーをリネームし、必要に応じて手動で調整できるよう編集可能な状態を保ちます。

分かりやすいレイヤー名は、自分にとってもチームにとってもファイルを扱いやすくします。開発者はハンドオフの際に正しい要素を見つけやすくなり、他のデザイナーも推測することなく作業を積み上げられ、「Rectangle 12」を探す時間も減ります。一貫した命名は、デザインシステムを拡張したり新しいメンバーをオンボーディングしたりする際にも役立ちます。

Figmaエージェントを使うと、数個のフレームでもページ全体でも、リネームしたいレイヤーを選択し、プロンプトで命名規則を説明します。エージェントが一度にすべてをリネームします。最初の結果に調整が必要な場合は、同じスレッド内で追加のプロンプトで仕上げられます。

Figmaエージェントは、すべての有料Figmaプランでご利用いただけます。Figma Designの左サイドバーからアクセスできます。現在のオープンベータ期間中はAIクレジットを消費しないため、今のうちにぜひ試してフィードバックをお寄せください。