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を適用しています。
できたら、枠線を適用したいオブジェクトを選択した状態で右プロパティの「Stroke」セクションで右上の「＋」アイコンをクリックすると、デフォルトカラーが#000000で太さが1pxの黒い枠線が適用されます。
Strokeが適用された状態で、さらにStrokeの右下の「…」ボタンの左にある角のない四角形のようなアイコンをクリックすると、枠線を4辺のどこに表示するかを選択できるオプションが表示されます。
選択できるオプションは次のとおりです。
All：すべての辺（4辺）
Top：上側の1辺
Bottom：下側の1辺
Left：左側の1辺
Right：右側の1辺
Custom：任意の辺（1~4辺）
以下のデモでは「Bottom」を選択しています。
「Custom」を選択することで、Strokeのセクションが4辺のそれぞれに対して太さを選択できるUIに変化します。
4辺に対して数値で「0」を指定すれば辺なし、「1」以上の数値を指定すれば枠線が適用されます。
それぞれの枠線に対して異なる数値を適用できますので、右下だけ太く、左上は細くするといった調整ができます。
また、線の種類も点線を適用することができます。
線の種類は4辺で別々に指定することはできません。
色もStrokeに対して複数設定できるUIになっていますが、4辺で別々に指定することはできません。
複数色の用途としては、グラデーションの重ね塗りなどの装飾に使うといった具合でしょうか。
どうしても枠線ごとに色を変えたい場合は、絶対座標指定（Absolute position）を有効にした枠線のみのオブジェクトを別途用意してFrame内に配置するか、細長い矩形を配置するなど、Stroke以外の機能を利用する必要があります。
また、今回紹介した部分的に枠線を適用する方法は、四角形のオブジェクトにのみ限定されている機能になります。
楕円（Ellipse）、三角形（Polygon）、星形（Star）、またはテキストといった四角形ではないオブジェクトに対してはそもそも部分適用のオプションが表示されません。
矩形（Rectangle）、Group、Frame（Auto layout）といった四角形のオブジェクトにのみ適用可能です。
この記事を読んだ方におすすめの記事
Figmaでシンプルなフォーム・コンポーネントを作る方法
今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ...
