Dev Modeでのデザインのナビゲーション
🚧 Dev Modeはベータ版から外されました
FigmaのDev Modeには、開発者がデザインをコードに変換するために必要なものがすべて揃っています。1月31日以降、Dev Modeの利用には有料シートが必要です。
Dev Modeを有効にすると、Figmaデザインファイルのインターフェースが変更されます。Dev Modeでは、左サイドバーを使用してデザイン間を簡単に移動したり、開発の準備ができているセクションを簡単に識別したりできます。
-
A
検索
特定のコンポーネントを検索するには、[検索]フィールドを使用します。Figmaは、現在のファイル内にあるオブジェクトとアクセスできるライブラリを検索します。
- 検索バーを開く場合は、左サイドバーで をクリックするか、次のキーボードショートカットを使用します。
- Mac:Command f
- Windows:Ctrl f
- 検索するテキストまたはレイヤー名を入力します。入力すると、検索結果が自動的に表示されます。
- 現在のページごとに結果を表示することも、全ページの結果を同時に表示することも可能です
- [設定]をクリックして、レイヤータイプ(テキスト、フレーム、シェイプなど)の検索フィルターを追加します。
- 結果内を移動するには と を使用します
- [設定]メニューの[その他]を使用して、ウィジェット名やスライス名など、その他のすべてを検索します。
- 結果をクリックして、キャンバス上のレイヤーに移動します。
- ナビゲーションパネルに戻るには、 をクリックするか、Escキーを押します。
- 検索バーを開く場合は、左サイドバーで をクリックするか、次のキーボードショートカットを使用します。
-
B
ページ
Dev Modeアイコンは、開発準備完了とマークされているセクションを含むページを示します。準備完了とマークされたセクションは、[Dev Mode]ナビゲーションパネルの[開発準備完了]に表示されます。
-
C
[開発準備完了]とマークされたセクション
Dev Modeアイコンは、開発準備完了とマークされているセクションを含むページを示します。準備完了とマークされたセクションは、[Dev Mode]ナビゲーションパネルの[開発準備完了]に表示されます。
-
D
レイヤー
Dev Modeアイコンは、開発準備完了とマークされているセクションを含むページを示します。準備完了とマークされたセクションは、[Dev Mode]ナビゲーションパネルの[開発準備完了]に表示されます。
キャンバス上でレイヤーにカーソルを合わせると、サイズ、パディング、間隔調整などレイアウトに関する詳細情報が表示されます。
最上位のフレームが選択されている場合、左右の矢印キーを使うか、画面の矢印をクリックしてページの各フレーム間を移動できます。