8月の暑さは少し落ち着いた気がしますが、まだまだ暑い日が続きますね。
さて、先日何年ぶりかわからないぐらい久しぶりに「CSS Nite」で登壇させていただきました。内容は「Figmaをより使いこなすために知っておきたいこと 2025」ということで、販売中の動画講座の内容からピックアップするような形で、覚えておきたいFigmaのアレコレを紹介しました。本編はYouTubeなどで配信されており、多くの方にご覧いただいたようです。ありがとうございました（深々）。
当日のデモの最中にはYouTubeにもコメントを多く頂いていたのですが、中でもバリアブルズ（変数）を使ったモードの切り換えやバリアントの使い方あたりが皆さんの注目の的だったように思います。特にいまどきのWebサイトはレスポンシブにディスプレイの表示領域にあわせてコンテンツの表示が変わるのが当たり前になっています。Figmaを使った制作時にも複数のディスプレイサイズにあわせた画面を作る必要が多いことでしょう。
そこで私の講座でも既にモードの切り替えによるライトモードやダークモードの切り替え、言語の切り換えの方法は既に紹介しておりましたが、今回マスター編の講座の中にある実践編に追加する形でバリアントやバリアブルズを使い、モードを切り替えることで自動的に設定内容やコンポーネントの状態を切り替える解説を用意しました。一度に解説しようとすると難しくなるかもしれませんので、2本に分けて以下の内容になっております。
- 変数を使ったレスポンシブな指定（11:59）
- 変数とバリアントを使ったコンポーネント（13:41）
内容紹介がてら短めのプレビュー動画も用意しました。既に講座を購入いただいている皆様には、LMSのマスター編の最後にある実践編に2本のコンテンツは追加済ですのでご覧いただければと思います。
こちらのコンテンツは、マスター編に含まれます。
以下のいずれかの講座からアクセス可能です。