Figmaがアップデートがされるたびに新機能を試すのが楽しみになっています。
デザイナーのemiです。

2022.5月のアップデートの機能で、個人的にこれを待ってた！というStrokeの進化について書いていこうと思います。

いままでのStroke

今までは表やノートのように罫線が入ったデザインをするときに、文字と罫線を繰り返して表示していました。


表の場合では重なる部分があるので、繰り返した部分は間隔を「-1」にするか（この方法個人的には好きではない）、表のヘッダー、行、表の終わりにわけてコンポーネントを作ったり（バリアント化したら大量の表を入れる時に大活躍）…という方法で作成していました。

行の間隔を-1で設定する方法がなぜ好きではないのか

表の部分をコーディングする時はこのようなスタイルをかかないので、この方法はとにかくスマートではないのです。
デザインデータは見た目さえ合わせればいいというものでもない。と思っているので、この方法が好きではないのです。

進化したStroke

ノートや表のデザインをするときにわざわざ線のみのレイヤーを追加しなくて良くなりました。
アップデートでStrokeのカスタマイズができるようになったので、四方のborderのみでなくどこか一辺のみ指定も可能になりました。

上だけ、左だけ。などの指定ができるので表以外にもこのように見出しの装飾、メニューの部分でも使用できます。

見出しの装飾

罫線

menuなどの装飾

さいごに

Strokeの設定が進化したことで、以前より効率のいい、実装者にも伝わりやすいデザインデータを作ることができるようになったのではないかと思います。

Figmaでのデザイン作業は実装のパターンを考えやすくてとても好きです。

このブログを書いている途中でバタバタして間が空いてしまい、Strokeのカスタマイズができるようになったありがたみが減ってきてしまいました。
ブログは熱量ある時に書ききりたいですね…