FigmaのVariablesの勉強会を実施しました！

こんにちは。クラウドワークスでデザイナーをしています、さかたです。
クラウドワークスのデザイングループでは1ヶ月に1回くらいのペースで定期的に勉強会を実施しています。今回は2023年7月に実施した勉強会について紹介させていただきます！

7月の勉強会では、2023年6月22日に開催されたFigmaが主催するイベント「Config 2023」で発表された、Figmaの新機能についての勉強会を実施しました。
複数の機能がリリースされたので本当は全てをあれこれ触っていきたかったのですが、時間の制約もあるのでその中からVariables（バリアブル）のみに絞った内容としました。今回のリリースの中で、理解して活用するのが1番難しそうだなと個人的に感じたのでさかたの独断と偏見で決めました。

新機能Variables（バリアブル）って？？

今回、勉強会で取り上げたVariablesってなんぞやといったところは、各所で記事になっていたりわかりやすく解説されているので詳細は省きますがざっくり言うと、再利用可能なさまざまな値を保存し、あらゆる種類のデザインプロパティやプロトタイプアクションに適用させることができる機能です。
それを利用することで、コンポーネントをFrameから別のFrameに移動させた際にスタイルが切り替わるようにできたりします。
例えば、PCサイズのFrameからSPサイズのFrameに移動させた際にボタンがそれぞれに最適なサイズに変わったり、ライトモードのFrameからダークモードのFrameに移動したらカラーがそれぞれに適用したカラーに変わったりなどができます。

ボタンコンポーネントをライトモードのFrameとダークモードのFrame間を相互に移動

どうやったのか

デザイングループの勉強会では持ち回りで担当者を決めて、担当者が題材や開催形式、資料や作業ファイルなどを準備しています。 さかたのVariablesへの理解もイマイチであったのと、クラウドワークスのデザイングループは横断組織のため普段業務で比較的関わりの少ない他事業部を担当しているデザイナー同士でコミュニケーションを取りたいという意図もあり、レクチャーしながら進めるよりも、今回はみんなでここわからん、ここどうやるんだろをワイワイ話しながらやっていきたいなと考えていました。 そのため、Variablesについての資料や作業用のFigmaファイルと簡単なVariables使用手順だけを用意して実施しました。
（Figma公式のVariables playgroundとken様のバリアブルの使い方かんたん４ステップを参考資料として使用させていただきました。）

UIデザイナーが多いので、用意していた作業用のFigmaファイルはVariablesを活用してUIに変更を加える想定でいたものですが、中には自分で素材を持ってきてFrameを移動させるとハロウィンのキャラクターが変身していくようなものを作っていたり、それぞれが楽しみながら参加できているようでした。

用意した作業用のFigmaファイル

また、ありがたいことにこの1年でデザイナーも多数入社いただいておりデザイングループの規模も10人単位の組織になりました。
それに伴い勉強会も参加人数も増えてきたため、全員で一斉に行うと発言のハードルが上がったり、話の収拾がつかないみたいなことにもなりそうだなと思い、Google Meetのブレイクアウトルーム機能を使って3、4人づつの複数のグループに分けて実施しました。
（デザイングループはほとんどのメンバーがリモートで業務をしているので勉強会も他のMTGと同じくGoogle Meetで実施しています。）
ちょいちょい見ていた感じ、どのルームもみなさん活発に発言できているようでよかったです。

やり方の課題

実施している中で個人的に課題に感じたのが、自分のいるグループ以外の様子がわからなかったことです。
いち参加者としてというより、勉強会の主催者として他グループのメンバーがうまく取り組めているのかが気になっていました。
他のルームに移動することもできたので様子を見に行ったりしましたが、わからない部分をメンバー同士でそれぞれ教え合ったりして良い感じに取り組めているようでした。
ただ、結果的にうまくいっていただけなので仕組みでそういった面もフォローできるように設計していかねばという学びでした。

さいごに

1年前くらいにもConfigで発表されたFigmaの新機能の勉強会を実施していました。今年も実施できたので来年もConfigがあればその内容をまた勉強会で取り上げていきたいですね！

今後も引き続きデザイングループ勉強会は実施していきますので、一緒に成長し続けてくれるデザイナーさん募集しています！