figma-how-to-edit-line-style
公開日: 2021.04.30  | 更新日: 2022.05.27

Figmaで破線・点線や矢印がついたパスを作る方法

今回はFigmaでテキストや図形などのオブジェクト(パス)に枠線をつける方法と、枠線のスタイル(色・太さ・破線・矢印など)を編集する方法を紹介します。

この記事のターゲット

  • Figmaの初心者

  • Figmaでテキストや図形に枠線(Stroke)をつける方法を知りたい方

  • Figmaで枠線(パス)のスタイル(色・太さ・破線・矢印など)を変更したい方

また、Figmaで簡単に波線パスをつくる方法を紹介した記事もありますので、興味のある方は合わせてご覧ください!

Figmaで簡単に波線・ジグザグのパスを作る方法

今回は、イラレでよく使われているような波線のパスを、Figmaで簡単に再現する方法の紹介です。おまけで、シンプルなジグザグのパスを作る方法も最後に載せています。 ... 続きを読む

figma-wave-and-curve


テキストや図形などのオブジェクトに枠線をつける方法

add-stroke

オブジェクトに枠線を追加する方法は次の通りです。

  1. 枠線を追加・編集したいオブジェクトを選択

  2. 右プロパティの「Stroke」の「+」で線のレイヤーを追加

  3. 枠線のレイヤーが追加されるので、線の太さや色を調節する

同じ手順でテキストやFrame(アートボード)にも枠線を設定できます

add-stroke-text-and-frame

また、○や□といったパスが閉じているオブジェクトの場合、枠線を表示する位置をパスに対して内側・中央・外側を選択できます

  • Center:パスの中心

  • Inside:閉じたパスの内側

  • Outside:閉じたパスの外側

line-position

枠線を破線・点線にする方法

how-to-edit-line-dot

パスにつけられた枠線を破線・点線にする手順は次の通りです。

  1. 破線・点線にしたいパスまたはオブジェクトを選択

  2. 右プロパティの「Stroke」の「…」をクリック

  3. ポップアップウインドウのDashes(破線)の数値を「5,10」などの値にする

点線のスタイルは、Dashesに「X,Y」のように2つの値をカンマで区切って設定します。XとYの関係は以下の通りです。

  • X(Dash):点線の「点」部分の長さ。値が大きいほど色のついた部分が長くなります。

  • Y(Gap):点線の「空白」の長さ。値が大きいほど空白が長くなります。

XよりYの値が大きいとゆったりした点線になり、XよりYの値が小さいとぎっちりした詰まった線になります。

dot-pattern

ここまでの枠線のパターンをまとめると、以下のようなイメージになります。

figma-stroke-style

パスの始点・終点のスタイルを矢印などに変更する

edit-line-end

閉じていないパス(直線・曲線など)の始点・終点を矢印にしたり、端の形を丸ませたり、角ばらせる方法は次の通りです。

  1. 始点・終点を変更したいパスを選択する

  2. 右プロパティの「Stroke」の「…」をクリック

  3. ポップアップウインドウの「Cap」を選択し、「Line arrow」など好きな端の形を選択する

Cap(端点)で選択できる種類は次の通りです。

  • None:なし(パスの端でぶつ切り)

  • Round:丸められる終わり方。太さの半分の長さの分だけ角が削られます。

  • Square:角張る終わり方。Noneほとんど同じ

  • Line arrow:「<>」の矢印の終わり方。

    • 見た目上は、線の端にRoundされた45度ずつの線に枝分かれします。

  • Triangle arrow:「◀︎▶︎」の矢印の終わり方。パスの内側に太さに比例して大きくなる塗りの正三角形がくっつきます。

line-end-pattern

四辺の枠線を上側のみなど部分的に適用する

2022年5月のアップデートで、四角形の枠線を上下左右で自由に太さを設定できるようにアップデートされました。以下の記事で手順を紹介していますので参考にしてください。

Figmaで枠線(Stroke)を部分的に適用する方法

今回は、Figmaで四角形のオブジェクトの4辺の枠線(Stroke)を1辺だけ、2辺だけといったように部分的に適用する方法を紹介します。テーブルやリストといった罫線を表現する際に左右のどちらかだけ、または上下につけるといった部分的な表現が可能になります。 ... 続きを読む

figma-partially-apply-border


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

Figmaで簡単にフローチャートや画面遷移図をつくる方法

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む

figma-connect-with-arrows

Figmaで曲線パスに沿って文字やシェイプをはわせる方法

今回はFigmaで曲線パスに沿って文字やシェイプ(パーティクル)を配置させる方法を紹介します。Figmaの標準の機能では手作業で一つずつ配置する必要があるので、「To Path」というプラグインを使用します。 ... 続きを読む

figma-to-path-plugin

Figmaで簡単になめらかな角丸の「スーパー楕円」を作る方法

今回は、デザイナー界隈で話題になったトークルームアプリ「Clubhouse」のプロフィールのアバターに使用されている、なめらかな角丸のシェイプ、いわゆる「スーパー楕円」をFigmaで簡易的に再現する方法をまとめました。 ... 続きを読む

figma-super-ellipse

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告