figma-partially-apply-border
公開日: 2022.05.27  | 更新日: 2022.05.28

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

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

また、これまでEffectのDrop shadowやInner shadowを代用して下線などに適用していた場合、今後は置き換えられるようになります。

この記事のターゲット

  • Figmaで部分的にStrokeを適用したい方

  • FigmaでShadowやShapeを利用した下線からStrokeに置き換えたい方


オブジェクトに枠線(Stroke)を適用する手順

まず、枠線を適用したい四角形のオブジェクトを用意します。

今回はボタンUIに枠線をつける想定で、ボタンのオブジェクトを用意します。

ボタンは「ボタン」というテキストを用意して、選択したままShift + A でAuto layout化して適当に16pxのPaddingを適用しています。

stroke1

できたら、枠線を適用したいオブジェクトを選択した状態で右プロパティの「Stroke」セクションで右上の「+」アイコンをクリックすると、デフォルトカラーが#000000で太さが1pxの黒い枠線が適用されます。

stroke2

Strokeが適用された状態で、さらにStrokeの右下の「…」ボタンの左にある角のない四角形のようなアイコンをクリックすると、枠線を4辺のどこに表示するかを選択できるオプションが表示されます。

選択できるオプションは次のとおりです。

  • All:すべての辺(4辺)

  • Top:上側の1辺

  • Bottom:下側の1辺

  • Left:左側の1辺

  • Right:右側の1辺

  • Custom:任意の辺(1~4辺)

以下のデモでは「Bottom」を選択しています。

stroke3

「Custom」を選択することで、Strokeのセクションが4辺のそれぞれに対して太さを選択できるUIに変化します。

4辺に対して数値で「0」を指定すれば辺なし、「1」以上の数値を指定すれば枠線が適用されます。

それぞれの枠線に対して異なる数値を適用できますので、右下だけ太く、左上は細くするといった調整ができます。

stroke4

また、線の種類も点線を適用することができます。

線の種類は4辺で別々に指定することはできません。

stroke5

色もStrokeに対して複数設定できるUIになっていますが、4辺で別々に指定することはできません。

複数色の用途としては、グラデーションの重ね塗りなどの装飾に使うといった具合でしょうか。

どうしても枠線ごとに色を変えたい場合は、絶対座標指定(Absolute position)を有効にした枠線のみのオブジェクトを別途用意してFrame内に配置するか、細長い矩形を配置するなど、Stroke以外の機能を利用する必要があります。

stroke6

また、今回紹介した部分的に枠線を適用する方法は、四角形のオブジェクトにのみ限定されている機能になります。

楕円(Ellipse)、三角形(Polygon)、星形(Star)、またはテキストといった四角形ではないオブジェクトに対してはそもそも部分適用のオプションが表示されません。

矩形(Rectangle)、Group、Frame(Auto layout)といった四角形のオブジェクトにのみ適用可能です。

stroke7

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

Figmaでシンプルなフォーム・コンポーネントを作る方法

今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-form

FigmaのComponent propertiesとVariantsの使い分けの考察

今回は2022年5月11日に公開されたFigmaの新機能「Component properties」の使い方を検証しつつ、類似する既存機能「Variants」との使い分けについて考察してみます。自由研究形式で追記しながら記事を更新しています。 ... 続きを読む

figma-component-properties-vs-variants

Figmaでおすすめの直線・曲線パスを使ったTipsまとめ

今回はFigmaで直線や曲線のパスを使用するときにおすすめの方法を目的別に紹介します。Figmaの基本機能でできることから無料のプラグインを使用する方法など、当サイトでも人気の解説記事をまとめましたので、参考にしてみてください。 ... 続きを読む

figma-path-and-curve-tips

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

うえんつ

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