コミュニケーションの手段にFigma/Figjamを活用したら幸せになった話

# はじめに
こんにちは！Ayakoと申します。
今回はFigma/Figjamを利用したらコミュニケーションが円滑に楽しくできた話をしようと思います。
チームビルディングやオリエンテーションの参考に少しでもなれば幸いです。


# 使った場面
今回は以下の利用場面についてどのようにFigma/Figjamが役立ったか紹介しようと思います。
- プログラミングコミュニティ[PlayGround](https://shinonome.com/services/playground)でのオンライン交流会
- 教育実習

# Figma/Figjamを使うメリット
[公式サイト](https://help.figma.com/hc/en-us/articles/4410786053911-Invite-visitors-to-an-open-session)で使い道やメリットがわかりやすく並んでいますが、私が思うメリットは大きく分けて3つです。
共通して言えることは、使う上でのハードルが限りなく低いのが魅力だと思います。

## 1. 直感的なUI/UXで使いやすい
初めて使う人でも直感的に使えるというのは言わずもがな強いですね。
操作の説明をあまりせずに済むので本題に早く入ることができ各個人のFigmaの経験の差による待ち時間の発生などがないのもいいなと思いました。

## 2. ダウンロードが不要
ブラウザ上で動作するのでネット環境があれば出来てしまうのも大きなメリットだと思います。
有料のチームプランでないと使えませんがFigjamのopen session機能を使うことによってアカウント登録が不要になるのもイベントなどで使いやすいなと感じました。(アカウント登録自体もGoogleアカウントなどを使えば簡単に作れるのでそこまで問題ないですが)

## 3. Figma Communityにあるプラグイン/ウィジェット/ファイルが豊富
有志による豊富な制作物も魅力だと思います。
今回挙げた場面ではファイル・ウィジェットを主に利用したのですが準備時間の短縮にとても役立ちました。
利用させていただいたものはこの後の具体的な利用場面で紹介してるので皆さんもぜひ！
Figmaファンがファンを作る。好循環が生まれている幸せな世界だと思います。

# 交流会で使った時の話
使った資料は[こちら](https://www.figma.com/proto/7ieJJJyPLlASPoNaUmkhPs/Qiita?node-id=1%3A231&scaling=contain&page-id=0%3A1&starting-point-node-id=1%3A231)

交流会を行なったプログラミングサークルではデザイン、フロントエンド、バックエンド、モバイル、ブロックチェーンといったように学ぶコースが分かれているため、全くFigmaに触れない学生も多くいました。
また、Figma=デザインツールとしか認識していないのももったいないと感じ、コース間交流の一環としてFigmaを用いることにしました。
交流会には12人も参加してくれました！
![参加者.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/3cc8c5f9-3a4b-d37c-11dd-d3a0cffcb674.png)


## 日程調整はFigjamで
[Simple vote](https://www.figma.com/community/widget/1031261785662682451)というウィジェットを用いて日程調整を行いました。
操作に慣れてもらおうと思ったのですが日程調整の投票の下ではお絵かきが行われていて既に説明は必要なかったようです。(笑)
![日程調整.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/e7077ea9-d1c8-84c2-3f53-390fc2bec1be.png)

## Figma/Figjamの概要を説明
上記の資料を利用してFigma/Figjamの説明をしました。
デザイン作る以外にもたくさん使えるんだよ〜と伝えたのですが、この交流会の後、スライドをFigmaで作ってみました！という声が聞けたのが嬉しかったです。
ちなみにここでもお絵かきが(笑)
![スクリーンショット 2022-11-24 13.28.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/845f3213-166d-708a-8195-bee638b2bed8.png)
### 紹介したプラグイン
- [Multiplayer Pong Game](https://www.figma.com/community/plugin/749261072790710247)
他にもあった気がするのですが...

# Figjamで遊ぶ
もう何が何だか今となってはわかりませんが(笑)、基本機能はもちろん、ウィジェットでたくさん遊びました！
![スクリーンショット 2022-11-24 13.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/dd051ca2-6f80-6be7-0e2c-0b27c45096ce.png)

### 使ったウィジェット
- [Calender](https://www.figma.com/community/widget/1027625562492916399)
- [Photo Booth](https://www.figma.com/community/widget/1030479012894344777)
- [Simple Tic Tac Toe](https://www.figma.com/community/widget/1123835477666234652)
- [Donut: Creative Warmups and Icebreakers](https://www.figma.com/community/widget/1029886180069182307)
- [Chess](https://www.figma.com/community/widget/1032204675316247617)
- [Rock Paper Scissors](https://www.figma.com/community/widget/1029130788194861040)

などなど...

# 教育実習で使った時の話
3週間の教育実習でもFigmaが大活躍でした。
主に以下の場面で使用しました。

## プリント
Figmaを使用しました。
Frameのサイズが紙にも対応しているので簡単に作ることができました。
PDFも簡単にエクスポート出来て素敵...！
![スクリーンショット 2022-11-24 13.41.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/44372090-7b50-458d-6a6c-4024c9f7427c.png)

## スライド
Figma Communityのスライドテンプレートをお借りして自己紹介や授業で投影するスライドを作成しました。
おしゃれで準備に時間がかからないのでとても助かりました！
数学の授業では数式を使いたかったので[Latex Editor](https://www.figma.com/community/plugin/754622689958838972/Latex-Editor)というプラグインを用いて作成しました。
![スライド.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/a259bd06-32d3-952b-d161-f40d5a14e4fe.png)



### 使用したスライドテンプレート
1つ見つかりませんでした...
- [Mono Presentation Template](https://www.figma.com/community/file/878543640849779093)
- [Calibra Presentation Template](https://www.figma.com/community/file/878544060095482262)

## ホームルームで自己紹介&オリエンテーション
Figma/Figjamを使い担当クラスの生徒と交流しました。
高校生の好奇心・吸収力恐るべし！ほとんど説明していないのに使いこなしていました。(笑)
カーソルがこんなにあるのを初めて見たのですごく嬉しかったのを覚えています。
![figjam.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/31e514e5-766e-df86-4901-7d346cfe7e75.png)

### open sessionを利用する
このロングホームルームの時間使うだけのために生徒のアカウントを用意するのは大変だったのでopen session機能を使いました。
[open session](https://help.figma.com/hc/en-us/articles/4410786053911-Invite-visitors-to-an-open-session)はオープンセッションを開始し、誰でもFigJamファイルに招待して24時間無制限にセッションすることができる機能です。
セッションURLを共有してこのFigjamファイルに参加してもらいました。

### 基本機能を使って交流
タイマーを使って時間制限をしつつ交流しました。  
スイパラが流行っているというあたり高校生の若さを感じました...
![スクリーンショット 2022-12-21 19.40.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/5dc36ca7-091b-837e-a9fb-36c875b91d8d.png)

![スクリーンショット 2022-12-21 16.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/5ef43680-a96b-7bc9-cd95-98b0ea8f2924.png)
![スクリーンショット 2022-12-21 16.09.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/d3eec7f3-0eba-3915-6ad3-0a8f35328d14.png)

### ウィジェットを活用
せっかく付箋で書いてもらったので発表してもらいかったのですが、挙手制は難しいかなと思い指名することにしました。そこで使用したのが[Whose turn is it?](https://www.figma.com/community/widget/1044279368528763372/Whose-turn-is-it%3F)です。ウィジェット起動時に参加している人を集めてくれてランダムに1人選んでくれます。
![スクリーンショット 2022-12-21 19.21 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/fcdbaace-b67b-54ae-5ea1-277ac38c65fd.png)

また、自己紹介も兼ねていたので自分クイズを作成しました。ここでは[Poll](https://www.figma.com/community/widget/1030845409121640454/Poll)というウィジェットを使用し、投票してもらいました。
このウィジェットは匿名投票か、単一選択か複数選択かなど細やかな設定ができるので様々な場面で活躍できると思います。
![スクリーンショット 2022-12-21 19.20 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/0dbaddcc-cc07-ecb8-cc4d-f35487001110.png)

### spotlightを使って強制的に注意を向けてもらう
好きなように遊んで楽しんでもらいたい気持ちはありつつ、話を聞いてもらいたい場面や見て欲しい箇所があったりしました。
その際に使ったのが[spotlight](https://help.figma.com/hc/en-us/articles/5025214483351-Facilitate-meetings-with-spotlight)機能です。
強制的に自分の見ている世界にすることができます。
一旦作業を中止してもらうことができるので話を聞いてもらうことができました。

# Figma愛を語らせてください！
ここまでFigmaの基本機能+プラグイン+ウィジェットの活用例を紹介してきたことによってFigma愛は十分伝わっているかと思いますが、もう少しお付き合いください(笑)。
Figmaを使い始めて早4年目。WEBデザイン、資料作成、チームビルディング、アイディア出しなど様々場面で利用してきました。
## プラグイン作りました！
[Color Contrast Grid](https://www.figma.com/community/plugin/1039910246084959068/Color-Contrast-Grid)というプラグインを作成しました。
コントラスト比の基準を満たしているかチェックしてくれます。
自分の好きなFigmaにプラグインなどによってカスタマイズできるのがとても楽しいですね。

## グッズ買いました！
これが私を表しているスマホやです。他にも帽子やメモ帳などのグッズも購入し、使用しています。出歩いている時とか誰かFigmaファンの方に話しかけてもらえないかな〜と思っています(流石に経験はないですが...笑)。
|||
|----|----|
|![222283.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/2607bd0c-87c7-ae94-38b6-40c1430bafe4.jpeg)|![222285.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436259/74770bfc-a541-ff75-2d42-83a9ab3ec826.jpeg)|

以上です！最後まで読んでくださりありがとうございました！！