要素を編集する

要素はフレーム内の個々のパーツで、見出し、ボタン、画像、フォームフィールド、またはフレームがレンダリングするその他のコンポーネントです。要素は、フレーム全体を再生成せずに1つのパーツを変更したいときにターゲットにするものです。

​

要素を選択する

ツールバーの Edit ツール を使います。Edit がアクティブな状態でライブフレーム内をクリックすると、カーソル下の要素が選択されます。選択された要素はハイライトのアウトラインが付き、Agent に変更を依頼できる小さなインラインプロンプトが表示されます。

​

選択した要素を操作する

​

Agent に変更を依頼する

インラインプロンプトを使って、要素のコピー、色、レイアウト、スペーシング、動作を更新するよう Agent に依頼します。

​

要素を Inspect する

フレームごとのアクションバーの Inspect ボタンで要素を Inspect すると、その要素をターゲットにした Visual Editor が開きます。

​

Visual Editor

要素を選択すると Visual Editor が開きます — インラインプロンプトとペアになった右サイドパネルです。パネルはすべてのコントロールを明確なセクションにグループ化して、必要なものを素早く見つけられます：Text、Layout、Color、Border。（画像要素を選択すると Image セクションも表示されます。）

​

Layout

Layout セクションでは、Agent を通さずにコンテナ内の子要素の配置を調整できます。フレックスコンテナを選択して Layout を展開すると、以下が表示されます：

• Alignment: コンテナ内の両軸に沿ったアイテムの配置のための 3×3 ドットピッカー。
• Direction: 子要素を行または列に積み重ねる2つの矢印ボタン。
• Gap: アイテム間のスペースのピクセル値。Gap 入力の隣のアイコンは現在の方向に合わせて変わるため、水平方向か垂直方向のスペーシングのどちらを調整しているかが常にわかります。その隣の矢印アイコンは Distribute space between items をトグルし、子要素をコンテナの反対側の端に押しやります。
• Outer space: 要素の外側のスペースの各辺の入力（各辺に1つの入力と、すべての4辺を一度にロックするリンクトグル）。
• Inner space: 要素の内側のスペースの各軸の入力と、両軸を一度にロックするリンクトグル。

Layout セクションは選択した要素に少なくとも1つのレイアウトコントロールが適用される場合のみ表示されます。スペーシングやレイアウトプロパティを持たないプレーンなテキストノードはセクションを完全に非表示にするため、エディタはコンパクトに保たれます。 Text、Color、Border、Image セクションについては、Visual Editor ガイド をご覧ください。

​

関連ページ

• Canvas — 概要と構成要素。
• Frames — 要素が存在するコンテナ。
• Toolbar — Edit ツールがある場所。
• Visual Editor — 完全な要素編集ウォークスルー。