コネクターと線による図表とフローの作成
- 編集可の権限があるユーザーは、コネクターを作成して編集できます。
- この記事では、Figmaの新しいデジタルホワイトボードツールであるFigJamの線について説明します。線は、デザインファイルの直線のベクターパスです。また、Figmaにはプロトタイプコネクションもあります。
FigJamでは、ボード上で線を使用して、シェイプと付箋の間のパスを作成したり、順序を示したり、アノテーションをしたりできます。線ごとに色、テキスト、終了点、線幅をカスタマイズできます。
線の形は次の2種類です:
- カギ線コネクターでは、ボード上でオブジェクトを迂回して、別のオブジェクトへの直線でないパスを作成できます。
- 直線では、ボード上の別のオブジェクトへの直接的なパスを作成できます。
線を作成する
線は既存のシェイプと付箋にスナップされます。シェイプをボード上で移動すると、シェイプと線が一緒に移動します。
- ツールバーでをクリックします。
- カギ線コネクターか直線のいずれかのシェイプを選択します。キーボードショートカットXまたは⇧ Shift Lを使用して、カギ線コネクターを作成できます。直線の場合はLを使用します。
- 接続するオブジェクトの間でカーソルをクリックしてドラッグします。
線ツールは、他のツールを選択するか、VまたはEscを押すまでアクティブです。
線を作成したら、開始点または終了点をクリックして、他のオブジェクト、または同じオブジェクトの他の側面にドラッグできます。
クイック作成を使用してシェイプをボードに追加すると、コネクターが自動的に追加されます。
線を移動する
線をボード内で動かして、他のオブジェクトに接続できます。線のパスを移動してフローを改良したり、ボードに他のオブジェクトを配置するスペースを作ったりすることができます。
開始点と終了点を移動する
線の開始点と終了点をオブジェクトの側面にスナップすると、1回でポイントの1つを他のオブジェクト、または同じオブジェクトの別の側面に移動できます。
- 線のパスの任意の場所をクリックします。
- 移動するポイントの青の点をクリックしてドラッグします。
- 他のオブジェクトの側面にこれをスナップします。
線の終点をオブジェクトの任意の場所に配置するには(そして線がオブジェクトの側面にスナップするのを避けるには)、⌘Command (Mac)またはCtrl (Windows)を押しながら線を動かします。
線の開始点または終了点をボードのオブジェクトに接続せず、後でコネクションを完了するか、そのまま放置しておくことができます。
線全体を移動する
線全体を移動するには、まず開始点と終了点を接続先のオブジェクトからすべて切り離す必要があります。切り離した後の手順は次のとおりです:
- ボードから線を選択します。
- 新しい場所に線をドラッグします。
- 必要に応じて、開始点と終了点をオブジェクトに接続します。
パスをカスタマイズする
カギ線コネクターのパスは、いつでもカスタマイズできます。ボード上の他のオブジェクトの周囲に複数のパスを作成して楽しむことができます。手順は次のとおりです:
- カギ線コネクターを選択します。
- 移動する部分のパスのハンドルをドラッグします。
コネクターの開始および終了部分では、ドラッグするとパスに余分な部分が追加される場合があります。
線をカスタマイズする
最初にファイルを作成したり開いたりするときに、線のスタイルは既定のプロパティに設定されています。たとえばグレー、テキストなし、実線のパスです。ボードに線を追加すると、ツールバーを使用してテキスト、色、線のスタイル、終了点を変更できます。
FigJamでは、ファイルで最近作業したときに最後に使用した線のスタイルがすべて記録されています。
色
線のパスを別々の色にして、フロー、パス、またはワークストリームを区別します。
- 線を作成または選択します。
- 色選択機能をクリックします。
- 新しい色を選択します。
線のスタイルと線
線は、実線と破線のどちらかを選ぶことができます。切り替え手順は次のとおりです:
- 線を作成または選択します。
- 線のツールバーでをクリックします。
- 実線と破線のどちらかを選択します。
線
線は、太い線と細い線の2種類を選択できます。線の線幅を変更する手順は次のとおりです:
- 線を作成または選択します。
- 線のツールバーでをクリックします。幅は、デフォルトで細いに設定されます。
- 線に適用する幅をクリックします。
テキスト
線のパスにはテキストラベルを追加できます。
パスにテキストを追加する手順は次のとおりです:
- 線を作成または選択します。
- 線のツールバーでをクリックします。
- テキストを追加します。
コネクターのテキストラベルに新しい行を追加するには、Return/Enterを使用します。
線では、テキストを太字にするか、取り消し線を付けることしかできません。
テキストを移動する
テキストラベルを、線のパスに沿って見やすい場所にドラッグします。この操作は、線の長さがラベルの移動に十分な場合にのみ実行できます。
テキストの背景を表示する
線にテキストを追加するときに、背景のオンとオフを切り替えることができます。手順は次のとおりです:
- 線を作成または選択します。
- をクリックしてラベルを追加してから、テキストを追加します。デフォルトでは背景がオフに切り替えられます。
- ツールバーの色選択機能をクリックします。
- をクリックして、テキストの背景を表示します。
テキストの背景色は線の色と同じです。線とテキストの背景を異なる色にすることはできません。
開始点と終了点のスタイル
線の点には5種類のスタイルがあり、パスの方向の定義に便利です。
- なしでは、点にスタイルが設定されません。線の開始点と終了点であることのみが示されます。
- 単色と線の矢印の場合、線の外側に向いた単色または線の三角形が、点に表示されます。
- 三角形の場合、線の内側に向いた単色の三角形が、点に表示されます。
- ひし形の場合、点にひし形が表示されます。
線の作成時に、その開始点と終了点のスタイルをツールバーで個別に設定できます。
- 線を作成または選択します。
- 必要に応じて、線のツールバーを使用してスタイルを設定します。
線の開始点と終了点を一括編集するには、⇧ Shiftクリックを使用して複数の線を選択します。