エンジニア向けFigma勉強会(2024年版)をやってみました
この記事は atama plus Advent Calender 2024 12月23日の記事です。
こんにちは、atama plusでプロダクトデザイナーをやっているしらこです。
今日は、エンジニア向けにFigma勉強会をやったよ！という記事です。
（Figmaの機能についての詳細というより、勉強会をやってみての個人の感想です。）
なお、1年ほど前に社内でノンデザイナー向けFigma勉強会を開催したことはあります。
では、なぜまたやろうと思ったか？
シンプルに自分自身がFigmaの進化についていけていないからです（ドーン）
というのは半分冗談ですが(半分本気です)、1度だけじゃなく定期的に取り組むことで、デザイン資産の利活用や開発プロセスの改善につながったり、開発チーム全体のモメンタムを生み出せたりするんじゃないかしら？と考えたからです。
そんなわけで、不定期で行っているTech Lunchで希望者を募り、ゆるっと開催することにしました。
実施の前にエンジニアのアンケートを取ってみました。
なるほど、これだけでも興味深いですね。
また、過去に参加した人とそうでない人で、前提知識や期待値に違いがありそうです。
なので今回は、まったくわからんの人も少しわかるの人も、どちらの期待にも応えられるように2回開催することにしました。
お品書きは以下の通りです。
Day1
・Figmaの基礎知識
・atama plus 特有の知識
・ページの命名規則、コンポーネントのマスターファイルの運用など
・Dev Mode と Figma AIの紹介
・ハンズオン（簡単なワイヤーフレームの制作）
Day2
・Figmaの知っておくと便利なショートカット
・Dev Mode をもっと詳しく
・差分の比較
・コンポーネントのプレイグラウンド
・各種プラグイン など
・ハンズオン（プロトタイプ、アニメーション）
Day1
1日目はとりあえず、ざっくりとしたFigmaの基礎知識と社内での運用などを共有しました。
まったくのゼロから作るより、コンポーネントを使ったりデザイナーが作ったデータを元に作業することが多いかなと思うので、まず覚えてほしいことは、
「インスタンスの切り離しと、オートレイアウトの解除の仕方だけ覚えておけばとりあえずなんとかなる！」
もうほんとにこれだけです！
魔法の解除ができれば、あとはきっとどうにかできます！！（雑）
ちなみに、Figma AIがすごいぞ！と意気揚々と紹介していたんですが、自分がウェイティングリストに登録していただけでまだみんなは使えないことにその時に気づきました ﾃﾍｰ
Day2
2日目は主にDev Modeをちょっと詳しく見る会でした。
基本機能に加えてプラグインをちょっと紹介したぐらいですが、個人的にはFigma for VScodeがお気に入り。
この記事では細かい機能面についてのご紹介はしないですが、DevModeも色々進化していて、開発者にとってさらに嬉しいものになっています。
すごいぜFigma！
さて、勉強会後のアンケートはこのような感じでした。
勉強会をやってみて
勉強会をやってみて、改めて自分自身のインプットになりましたし、同じツールでも求めていることや視点の違いを感じて新鮮でした。
また、自分にはない視点から「こうしたらもっと便利かも」と言ってもらえるのは、強い味方ができたような感覚です。
勉強会はあくまできっかけに過ぎないかもしれないですが、これまでの自分の経験を振り返ってみても、こういう小さいきっかけがあるだけで始めるハードルが低くなったことが多かったように思います。
なのでもし、Figmaに限らず何らかのナレッジを共有し合いたいという気持ちをお持ちの人は「ともに学び合う仲間を作る」感覚でまずはライトにやってみてはいかがでしょうか？きっと誰かのきっかけになるはず！
それではー！！