キャンバスとツール

キャンバスはウィンドウ全体に広がり、パネルはその上に浮かんで表示されます。どのツールにも 1 キーのショートカットがあります。

1ツール

ツール	機能
選択 `V`	レイヤーを選択、移動、リサイズします。
フレーム `F`	フレームを描きます。最上位のフレームはボード、画面、スライドになります。
長方形 `R`	シェイプのスロットです。メニューにはポリゴン、星、線、アイコン、ブラウザもあります。
楕円 `O`	円と楕円。円弧やドーナツ形も作れます。
ポリゴン `Y`、線 `L`	正多角形と直線です。
ペン `P`	複数のアンカーを持つパスを描きます。Enter または Escape でパスを確定します。
鉛筆 `Shift+P`	フリーハンドの線を描き、曲線になめらかに変換します。
テキスト `T`	クリックすると幅が自動で広がるテキストボックス、ドラッグすると固定幅のテキストボックスになります。
メモ `N`	自分やエージェントに向けたメモ、コンテキスト、プロンプトのカードです。
画像	PNG、JPEG、GIF、WebP、SVG ファイルを配置します。
ハンド `H`	キャンバスをパンします。Space を押し続けても同じです。

2特殊なシェイプ

星：内側の半径を持つポリゴンです。パネルで頂点数と内側の半径を設定します。
楕円の円弧：パネルの「開始」「スイープ」「内径」で、楕円を扇形、円弧、ドーナツ形に変えられます。
アイコン：Lucide、Feather、Simple Icons（ブランド）、Material Symbols（アウトライン、ラウンド、シャープ）、Phosphor から選べます。
鉛筆のスムージング：設定の「システム」で「精密」「バランス」「なめらか」から選びます。「ペンカーソル」のスタイルもここで設定します。

3キャンバス上のライブ Web ページ

ブラウザシェイプは、実際の Web ページをデスクトップ、タブレット、スマホのデバイスとして表示し、URL、ズーム、スクロールを設定できます。コンピューターにインストール済みの Chrome、Chromium、Edge、Brave を使います。別のブラウザを使う場合は DE_BROWSER_PATH を設定してください。

開いたファイル内のページは「ページを読み込む」をクリックするまで一時停止しているため、ファイルを開いただけでサイトにアクセスすることはありません。

4メモとスクリプト

メモ、コンテキスト、プロンプトのカードはキャンバス上にだけ存在し、どのエクスポートにも含まれません。そのため、エージェントへの指示をデザインのすぐ横に残しておけます。

スクリプトノードは JavaScript で描画されるフレームです。@input パラメーターは、パネルの「スクリプト」セクションに入力欄として表示されます。

5キャンバス内の移動

トラックパッドの 2 本指スクロールでパン、ピンチでズームします。
マウスホイールではズームします。トラックパッドでスクロールしながら Cmd を押すと、パンの代わりにズームします。
どのツールでも、Space を押しながらドラッグするとパンできます。
右下のズームピルで、拡大、縮小、全体を画面に収める操作ができます。

6整列、スナップ、合成

レイヤーをドラッグするとスマートガイドが表示され、周囲のレイヤーの端や中心にスナップします。

パネルから左揃え、水平方向の中央揃え、右揃え、上揃え、垂直方向の中央揃え、下揃えができます。3 つ以上のレイヤーを選択すると、水平方向または垂直方向に等間隔に分布できます。

ブーリアン演算でシェイプを合成できます：合体 Cmd+Alt+U、前面で型抜き Cmd+Alt+S、交差 Cmd+Alt+I、除外 Cmd+Alt+X。レイヤーメニューからも実行できます。ほかのレイヤーを含むフレームは合成できません。

7コピーと貼り付け

コピー、カット、ペーストはレイヤー単位で動作します。Figma でコピーしたレイヤーをここに貼り付けると、編集可能なレイヤーとして取り込まれます。どこからコピーした HTML でも、貼り付けるとレイヤーになります。

ドキュメントエディタの使い方