はじめに

この機能を使用できるユーザー

すべてのプランで利用可能

編集アクセス権を持つユーザーは、線プロパティを更新できます

線はデザインファイルのレイヤーに適用できるコレクションです。線は、ベクトルパスの視覚的な表現だと考えることができます。線プロパティを使用すると、以下を行えます。

• シェイプ、ベクターネットワーク、またはブール演算にアウトラインを追加する
• 線と矢印を作成する
• 画像にボーダーを追加する
• 長方形、フレーム、コンポーネントなど長方形レイヤーの個々の辺に線を追加する

線の外観は、色、太さ、分布、辺、終了点のプロパティを使用して制御できます。

線プロパティ

右サイドバーの線セクションで線プロパティを閲覧および調整します。

ペイント

ペイントは、線を定義するために使用する主要なプロパティです。線に複数のペイント（色）を適用できます。これにはグラデーションと画像のペイントが含まれます。ペイントでは、同じ太さ、位置、スタイルのプロパティを共有する必要があります。

1. カラーピッカーを使用して、ペイントの種類、値、不透明度を選択します。
2. をクリックして、現在の選択に別のペイントを追加します。
3. またはを選択して、各ペイントの表示を切り替えます。
4. を選択して、スタイルピッカーを開きます。そこからカラースタイルを適用するか、現在の選択から新しいスタイルを作成できます。
5. を選択して、選択したレイヤーから線を削除します。

位置

Figmaでは、レイヤーのパスに線を適用する位置を定義できます。内側、外側、中央から選択します。中央に設定された線を除き、ほとんどのシェイプレイヤーのデフォルトのオプションは内側です。

SVG形式では中央の線のみがサポートされます。レイヤーをSVG形式でエクスポートする予定なら、これを考慮に入れてください。

内側または外側の線のあるレイヤーをSVGにエクスポートすると、Figmaは線を「簡素化」します。これにより、内側または外側の線は中央の線のように見えます。これはエクスポートされたオブジェクトの外観には影響しませんが、SVGコードの複雑さに影響を与えます。

線の簡素化についての詳細はこちら →

太さ

フィールドを使用して、線の太さをピクセル単位で選択します。値を入力するか、フィールドに焦点を合わせ、マウスまたはトラックパッドを使用して値をスクロールします。

個々の線

デフォルトでは、Figmaはレイヤーのすべての辺に線のプロパティを適用します。レイヤーが長方形、フレーム、またはコンポーネント/インスタンスの場合、各辺の線のプロパティも利用できます。

各辺の線プロパティを使用して、線を適用する辺を選択します。

• すべて (default)
• 上
• 下
• 左
• 右
• カスタム: 線を適用する辺を選択します。カスタムでは、各辺ごとに異なる線の太さを設定できます。

各辺のカスタム線

「カスタム」を選択すると、線のセクションに4つの個別フィールドが表示されます。フィールドを使用して、各サイドの太さを個別に調整します。辺から線を削除するには、線の太さを0に設定します。

個々の線を使い、以下のような一般的なデザイン要素やパターンを作成できます。

• テーブルの行の上部または下部に1本の線を適用する
• セクションヘッダーまたは区切りの下に水平線を表示する
• 要素の3辺のみにボーダーを適用する
• カードまたはタスク要素の左側にカラーブロックを追加する

終了点

オープンエンドのパスの終了点にスタイルを追加します。終了点プロパティは、選択したベクターパスに応じて2つの異なる場所に表示されます。

2つのエンドポイント

レイヤーがオープンベクターパスの場合、主要な「線」セクションでベクターパスの始点と終点にエンドポイントを設定できます。例: 線や矢印のシェイプ。

2つのフィールドを使用して、開始 (左) と終了 (右) のエンドポイントの端または先端のスタイル ↓を設定します。

3つ以上のエンドポイント

ベクターパスまたはシェイプが閉じている場合や、3つ以上のエンドポイントがあるオープンパスがある場合は、代わりに線の詳細設定でエンドポイントを設定します。

レイヤー全体を選択している場合、終了点プロパティを使用すると、すべてのエンドポイントに同じ先端または端スタイルを設定できます。

それらを個別に編集するには、以下のようにベクター編集モードで各終点を選択する必要があります。

1. レイヤーを選択した状態で、Enter / Returnキーを押してベクター編集モードを開きます →
2. 単一の終了点を選択します。選択された終了点は、白線と青い円で識別できます。
3. 右サイドバーの線のセクションでを選択して線の詳細設定メニューを開きます。
4. 終了点プロパティを更新します。
5. 線の詳細設定メニューは開いたままになるので、キャンバスで別の終了点を選択し、再度終了点を更新できます。

端と先端のエンドポイント

端または先端のセレクションから選択してエンドポイントに追加します。

• なし: パスの終了点には端や先端は追加されません。端は正方形で、パスには長さが追加されません。
• 角丸（デフォルト）：線の半分の太さの端を追加し、パスの終了点を幅の50％に丸めます。
• 正方形: パスの終了点を直角にし、線の半分の太さの端を追加します。
• 線矢印: 終了点の両側に45度の線が2本追加されます。線矢印にはパス自体と同じ線の太さが使用され、矢印の先端線の長さは変更できません。
• 三角矢印: 両方の終了点が三角の矢じりになります。パスの片方の終了点にのみ矢印を適用するには、ベクター編集モード → に入る必要があります。
• 逆三角形: 三角形の矢印を逆にしたり反転させたりしたもので、矢印がパスの内側を指しています。
• ひし形矢印: 終了点に塗りつぶされたひし形の先端を追加します。

線の種類

線の詳細設定を使用すると、線の外観をさらにカスタマイズできます。これらの設定にアクセスするには、右サイドバーの線のセクションに移動し、 [線の詳細設定]を開きます。

基本的なストローク

基本的なストローク設定を使用して、破線または点線を作成できます。

破線

以下の方法で、均一な破線を作成します。

1. [線]パネルで、を選択して、[線の詳細設定]メニューを開きます。
2. 破線の線スタイルを選択します。
3. 破線の長さをピクセル単位で入力します。
4. 破線間の間隔の長さをピクセル単位で入力します。
5. 破線の端の種類を選択します。
   • なし
   • 角丸
   • 正方形

ドット

以下の方法で点線を作成します。

1. プロパティパネルの[線]セクションで、ドロップダウンを使用して線の位置を中央に変更します。
2. を選択して、[線の詳細設定]メニューを開きます。
3. 破線の線スタイルを選択します。
4. [破線]の長さを1ピクセルと入力します。
5. 線端の設定で、 [角丸] を選択します。
6. 破線の間隔を調整して適合させます。

カスタム

以下の方法で、カスタムパターンを使用して破線または点線を作成します。

1. [線]パネルで、を選択して、[線の詳細設定]メニューを開きます。
2. 線のスタイル設定をカスタムオプションに設定します。
3. 破線設定で以下の構文を使用して、破線、間隔、破線、間隔...の破線パターンを定義します。
4. 使用する線端を選択します。

ブラシのストローク

ブラシのストロークは、選択したオブジェクトに自然で手書きのような外観を与えます。[線の詳細設定]の[ブラシ] タブを使用して、自身が作成したカスタムブラシを含む利用可能なブラシスタイルを検索します。スタイルにカーソルを合わせると、選択内容がどのように表示されるかをプレビューできます。ブラシのストロークを適用したら、方向設定を使用してストロークのフローを決定できます。

ダイナミックなストローク

ダイナミックなストロークは、選択内容の線をでこぼこしたような手書きの外観を与えます。ダイナミックなストローク設定を使用すると、線の外観を以下の方法で構成できます。

• 頻度: 線のでこぼこの数を決定します
• 波: でこぼこの大きさを決定します
• 滑らかさ: でこぼこのとがり具合を決定します

結合とマイター結合の角度

パスまたはベクターネットワーク内で線が結合する方法を定義します。パス全体の結合を調整するか、ベクター編集モードに入ってパスの単一のアンカーポイントを選択します。選択できるオプションは以下の通りです。

• マイター: 2つのパスの交差点に矢印のような鋭い先端にします。
• ベベル: 鋭い先端を切り落として平らな端にします。
• 丸み: 2つのパスの交差点に丸みをつけて柔らかな結合にします。

マイター結合の角度の設定を使用して、2 本の結合線がベベルする角度を制御します。例えば、90°のマイターでは、90°以下の角度は面取りされ、90°を超える角度は鋭い先端になります。

サポートされている線プロパティの概要

一部のプロパティは特定のレイヤータイプでのみサポートされています。以下のテーブルを使用して、作業中のレイヤータイプで特定のプロパティがサポートされているかどうかを確認してください。

レイヤータイプ	ペイント	位置	太さ	各端の線	カラースタイル	終了点	参加
長方形	✓	✓	✓	✓	✓	✕	✓
線	✓	✕	✓	✕	✓	✓	✕
矢印	✓	✕	✓	✕	✓	✓	✓
楕円	✓	✓	✓	✕	✓	✕	円弧ツールで変更した場合
多角形	✓	✓	✓	✕	✓	✕	✓
星	✓	✓	✓	✕	✓	✕	✓
ブール値	✓	✓	✓	✕	✓	✕	✓
ベクターネットワーク	✓	✓	✓	✕	✓	パスのみを開く	✓
テキスト	✓	✓	✓	✕	✓	✕	✓
フレーム (コンポーネントを含む)	✓	✓	✓	✓	✓	✕	✓

ファイルへの閲覧のみのアクセスで線プロパティを閲覧およびコピーする

ファイルへの閲覧のみの権限を持つ場合、線プロパティは右サイドバーにボーダーとして表示されます。プロパティをCSSとして表現するか、Hex、RGB、HSL、HSBなどのカラー値として表現するかを選択できます。プロパティの表現方法を選択したら、ボーダーセクションにカーソルを合わせて、[コピー] をクリックします。

スタイルと線

カラースタイルは線にのみ作成および適用できます。太さや位置など、線の他のプロパティをスタイルとして保存する方法はありません。

線にカラースタイルを適用しても、他のプロパティを引き続き調整できます。これには、太さと分布、端、結合、破線などの高度な線プロパティが含まれます。

線にカラースタイルを適用する

1. 更新するレイヤーを選択します。

2. 右パネルの[線]セクションで、スタイルアイコンをクリックします。

3. スタイルピッカーを使って、関連するカラースタイルを選択します。

4. 線の他のプロパティを必要に応じて調整します。

線の拡大縮小とサイズ変更

線は、サイズ変更の方法に応じて異なる反応をします。

• 線の太さを維持して、オブジェクトのサイズを調整したい場合は、オブジェクトのサイズ変更を行います。線のバウンディングボックスにカーソルを合わせ、 カーソルが表示されたらドラッグしてサイズ変更します。
• 拡大縮小ツールを使用して、オブジェクトのサイズに合わせて線プロパティを拡大縮小します。スケールツールの使用方法に関する詳細はこちら →

線をベクターオブジェクトに変換する

線のアウトライン化を使用すると、線をベクターオブジェクトに変換できます。これにより、オブジェクトの各パスが編集可能な1つのシェイプに変換されます。

これにより、次の操作を行うことができます。

• 半破線を削除または拡張する
• カスタムシェイプを作成してベクター編集モードで編集する
• 単一オブジェクトへの複数パスの結合
• ベクトルオブジェクトを均等に拡大縮小する

線のアウトライン化

1. レイヤーを右クリックして [線のアウトライン化] を選択するか、以下のキーボードショートカットを使用します。
   
   • Mac: ⌘ Command ⌥ Option O
   • Window: Control Alt O
2. Figmaはパスをベクターオブジェクトに変換し、線として設定されていたペイントを塗りつぶしとして適用します。
3. ベクター編集モードでそのベクターオブジェクトの外観を確認できます。Enter / Returnキーを押すか、ツールバーの [オブジェクトの編集] をクリックして、ベクターオブジェクトを編集します。