Figmaで画面タブを分割して２画面表示する方法

今回は、Figmaの画面タブを２画面に分割して表示する方法を紹介します。FigJamを眺めながらFigmaで画面レイアウトを作成したり、プロトタイプで画面全体を表示しながらコンポーネントを調整するなどの使い方ができます。

この記事のターゲット

• FigmaやFigJamで画面を分割表示したい方

• Figmaでプロトタイプを表示しながら画面UIを作成したい方

• FigmaやFigJamで同じファイルを２画面で同時に表示したい方

画面タブを分割する方法

画面タブを分割する方法は以下の通り複数あります。

同じファイルを分割表示したい場合

タブを右クリックして、メニューから「タブに分割」を選択します。

この方法だと、同じファイルを別の場所やページで同時に表示できます。

２つの異なるファイルを同時に表示したい場合

複数タブを開いている状態で、同時に表示したいファイルのどちらかを、もう片方のファイル上にタブをドラッグします。

ドラッグする際、左か右半分に薄い青い領域が表示されますので、どちらの側に配置するかを指定できます。

この方法であれば、FigmaとFigJamを同時に表示させたり、プロトタイプ画面でプレビューを表示しながら編集画面で画面デザインを変更するといったことがしやすいです。

タブの分割を解除したい場合

分割表示を変更する方法は以下の通りです。

• 分割タブのどちらかを「x」ボタンで閉じる

• 分割タブを右クリックしてメニューから「タブに分割」を再度選択する

この記事を読んだ方におすすめの記事

Figmaのオートレイアウトで使える便利なテクニック集

今回は、Figmaでオートレイアウト（Auto layout）機能を使う時に、知っていると便利なテクニックを紹介します。知っているかどうかで生産性やアウトプットのスピードが大きく変わるものばかりですので、ぜひ試してみだください。 ... 続きを読む

FigJamのマインドマップの基本的な使い方

今回は、FigJamの標準機能として追加された「マインドマップ」機能の基本的な使い方を紹介します。マインドマップでは、あるテーマからツリー構造でアイデアを発散しやすく、複数のパターンが存在する状態設計や、テスト設計などに活用できます。 ... 続きを読む

Figmaでダイアログをオーバーレイで表示させる（プロトタイプ）

今回はFigmaのプロトタイプ（Prototype）機能を利用して、画面レイアウトの前面にダイアログをオーバーレイで表示するプロトタイプの作り方とサンプルファイルの紹介です。 ... 続きを読む