Figma がまた進化した: ボーダー（Stroke）の機能

今年も Figma Config 2022 で Figma の数々の新しい機能が発表されました。

気になっていたところが進化したぞ！ということで、新しい Strokes の機能について書きたいと思います。

https://www.figma.com/whats-new/

ボーダーが １辺から指定できる

これまでの Figma のボーダー（Stroke）は、指定するとオブジェクト全体のまわりにつくものでした。
Rectangle（四角形）のオブジェクトにボーダーを付ける場合も、上下左右のすべてにボーダーがつくようになっていました。

今回の Individual Strokes では、上下左右だけでなく、下の1辺だけにボーダーを引く、左右にボーダーを引く、などの四辺のそれぞれの指定ができるようになりました。

1辺だけにボーダー引くためにドロップシャドウを使ったり、 Rectangle を使ったり ※ する必要は、Individual Strokes によってなくなりました。

※ Sketch 時代からある、Stroke ではなく Rectangle でボーダーオブジェクトを作り、ボーダーの太さ＝縦幅/横幅で引き伸ばしする方法

ボーダーの幅の扱いとスペーシング

この新しい Stroke から変わったことのひとつは、Stroke 幅と位置の扱いです。 オブジェクトのパスに対しての Stroke の位置は Inside Outside Center の三種類あります。
これまでは、前後オブジェクトとのスペースを測る際はどの Stroke の位置でも Stroke の幅の考慮はなしにパスの中心から測るようになっています。

新しい Stroke では、オブジェクトの上部と左右にある Stroke のみですが、 Stroke の幅が計算に入れた上でのオブジェクトとの距離を測ることができるようになりました。
ボーダーが入った要素感のレイアウトやスペーシングをするには、このような間隔のとりやすさで圧倒的に便利になりました。見かけとスペーシングの操作が一致したように思います。

注意点になりそうなこととしては、現状はオブジェクトの下にある Stroke は幅も含めて距離を測るようです。
こちらも他の上部と左右の動きと合わせてくれることを期待します。

またSVGはこれまでと同じく Stroke が　Center の扱いで出力されるようです。
SVGなど出力を前提にした線画やイメージ的なパスやオブジェクトを扱う際は、やはり Stroke をアウトラインしたほうが良さそうです。

ハンズオフ時にも Inspect でデザイナーの意図通りに表示される

これまでボーダーの高さ考慮されずに計算マージンを取ようになっていたため、ボーダーの高さの計算をちゃんと行いたい場合は線ではなく四角でボーダーを作るという方法を取っていたデザイナーも居ると思います。
デザインとして線を引く方法はさまざまありますが、ここは Figma なのでハンズオフの Inspect で表示される情報も気になります。

Stroke 以外の方法を使う場合は、CSSでいうところ border の出力にはなりません。
同じデータを見るなら、デザイナーの意図と実装者のコードは一致しているべきと思います。 Stroke のボーダーとしての使用実態と Figma の動作が合うようになったので、デザインとコードも意図と実態が合うようになってきました。

Auto Layout でも変化あり

Auto Layout では Adbanced 指定として　Stokes の項目がが追加になりました。
このオプションでは ボーダーの高さを Auto Layout のレイアウトの計算に含めるかの指定ができます。

• Excluded Layout ＝ ボーダーの高さを計算しない
• Included Layout ＝ ボーダーの高さを計算する

デフォルトでは　Excluded Layout が指定されているので、Included Layout　を指定する必要があります。
Stroke の幅を考慮して間隔を取りたいのであれば、Included Layout　をちゃんと選択しておくと良さそうです。

まとめ

Figma の進化により、デザイン時の操作でボーダーの幅やスペーシングがデザイナーの感覚にも近く使いやすくなりました。あわせて、Inspect でもにデザインでの意図と近いかたちで計算されるようになりました。 いちいち「幅を考慮に入れて Xpxズレが〜」というようなこと気にしなくて済み、その点で共通認識を揃えるところは別にことに回せるようになります。

個人的にスペーシングの点で、これまでボーダーの幅が考慮されずに計算されたスペースが表示されていたのが違和感だったので、このような変更はとても嬉しいものです。
現状までのデザインデータにも影響は（おそらく）ないので、いい機能の進化であるなと思います。

今後もFigma のデザインの感覚と実態に沿った進化に期待はしていけるなと改めて感じました。

参考: 

• https://help.figma.com/hc/en-us/articles/360049283914#individual
• https://help.figma.com/hc/en-us/articles/360049283914#position

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。