UI/UXデザインツール『Figma』入門

4-4. ストローク(線)

  • UIデザイン
  • UXデザイン
  • プロトタイピング

ストローク(線)には、矢印や、破線など様々な設定が行えます。このレッスンでは、ストロークの様々な設定方法を解説していきます。

公開日:2019/08/21最終更新日:2021/08/10

1.ストローク(線)の使い方

オブジェクトの枠線や線の設定を行うには、プロパティパネル右にある「Stroke」から設定を行うことが出来ます。

  1. 線の色を指定することが出来ます。(前のレッスンで解説したブレンドモードの設定も行えます)
  2. 先の太さの設定を行えます。
  3. 線の詳細設定を行うことが出来ます。(詳細は下記)
  4. 線をオブジェクトに対して内側、中心、外側どこに描画するかを指定することが出来ます。
図1 Strokeのプロパティパネル

2.Advanced Stroke(線)の詳細設定

線の詳細設定はプロパティパネル右の図2の赤枠から設定を行うことが出来ます。

図2 線の詳細設定

各項目について詳しく説明をしていきます

図3 線詳細設定のプロパティ

線種

「Stroke style」から「Solid」「Dash」「Custom」を選択することができます。

図4 線種

 

先端の処理

 

線の端の部分の処理を設定できます。線の始点のみ、終点のみ、始点と終点どちらにも設定することができます。

図5 先端の処理

③枠線の角設定

シェイプやパスの角の形状を図6の3種類から選択することが可能です。

図6 Join

文字の角の処理

Miter Angleは、文字などでツノが出る問題の調整を行うためツールです。

図7 Miter Angle

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者