chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • Figmaのここがお気に入り - Variants -

Figmaのここがお気に入り - Variants -

ナレッジ・ノウハウ
Figmaのここがお気に入り - Variants -

SHARE

最近はFigmaを使う機会が増えてきて、この機能便利、最高。と思えるようなところがでてきたので書いていこうと思います。
まずはVariantsからです。

Variantsとは

Figmaを使いはじめた時にはよくわからなかったVariants(バリアント)。
コンポーネントだけで十分便利。って思っていたのですが、実際に使ってみるとこれが本当に便利で、Variantsが使えるからFigmaでデザインをしたい。と思うほどのお気に入りです。

どんな時に使う機能なのか

状態ごとのコンポーネントを作って使い分けをしたい時、例えばボタンの通常の状態とアクションがあった場合など複数パターンを用意する場合に使います。便利。



XDにもステート機能がありますが、ホバーステートが用意されている。ということはわかりますが、ステートを切り替えなければホバーの状態のデザインを確認することができません。

FigmaのVariantsは、そのステートが可視化された状態になっており、デザイン上でも簡単に切り替えることもできます。便利。


フォームのパーツなどもVariantsでまとめれば、同じものを並べても、項目ごとに選択していけば後で修正するのも簡単です。便利。


ラジオボタンなどのチェックのON/OFFの切り替えも簡単です。


コーディングの時にもコンポーネントがまとまって置いてあると、このボタンはこのパターンが必要なのかということもわかりやすくなります。



コンポーネントを作ってVariants化して…と作業しているときにはやっぱりコーディングのことがちらついています。

最後に

Figmaが日本法人を設立したというニュースもあったので、これからどんな盛り上がりを見せるのか、どんなふうにさらに進化していくのかが楽しみです。

今回はFigmaのお気に入りについてでしたが、他のツールにもお気に入りがあるので、またの機会に。

emi

Webデザイナー

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

    関連記事

    Copyright © 2022, chot inc.