chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • FigmaのStrokeが進化した

FigmaのStrokeが進化した

ナレッジ・ノウハウ
FigmaのStrokeが進化した

SHARE

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

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

いままでのStroke

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

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

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

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

進化したStroke

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

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

見出しの装飾

罫線

menuなどの装飾

さいごに

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

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

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

emi

Webデザイナー

    10年以上コーディングがメインだったデザイナーです。検証ツールでソースを見るのが大好きです。

    関連記事

    Copyright © 2022, chot inc.