活動の様子

Figmaの学生プラン・FigJamを導入します

Figmaの学生プラン・FigJamを導入します

こんにちは!NUTMEGデザインチーム、小林です!

この度、NUTMEGでは一部のメンバーのみしか利用していなかったFigma・Figjamをメンバー全員に導入することにしました。

今回のブログではその導入にあたり、具体的な導入の流れを備忘録的にまとめようかと思います。

目次

Figmaの導入

今回はFigmaに登録するだけではなく学生プラン(エデュケーションステータス)の設定まで行います。 もう既にFigmaのアカウントを持っている人はエデュケーションステータスの獲得に進んでください。

Figmaアカウントの作成

まずは以下のリンク先にアクセスして、右上のSign upから好きなメールアドレスを使用してFigmaを登録します。

http://figma.com/

基本的にどのメールアドレスで登録しても問題なく使用できますが、Figma公式としては大学のアドレスを推奨しています。

エデュケーションステータスを申請する前にFigmaアカウントを作成しておく必要があります。 教育機関が発行したメールアドレスがある場合は、そのアドレスを使ってFigmaにサインアップすることをお勧めします。

電子メールアドレス、GoogleアカウントどちらでSign upしても大丈夫です。 よしなにしてください。

以下のような画面になったら成功です。(一部画像を編集して情報を隠しています。)

エデュケーションステータスの獲得

Figmaでログインが完了したら、以下のリンク先にアクセスしてください。後はそのまま指示に従って情報を入力するだけです! 表示が英語になっている人もいると思うので一応日本語でも解説しておきます。

以下のリンク先にアクセスしてもWelcome to Figma for Educationと書かれた画面が出てくる場合はもう既に登録が済んでいるのでそのままで結構です。

https://www.figma.com/education/apply

  1. 学生または教師を選択
  2. 無料のFigmaエデュケーションプランに申し込む理由を入力
    入力は日本語でも問題ありません。
  3. 学校の名前を入力
    メニューで学校の名前を検索します。
    弊学の場合はNagaoka University of Technologyで出るはずです。
  4. 送信ボタンをクリック
    これで申請プロセスは完了です。

後は個人でチームを作るなり、既存のチームに招待してもらう流れになると思います。

FigJamの使い方

FigJamの使い方 基本編

遊びながら覚えた方が楽しいと思うので基礎的な操作方法を羅列するだけで細かい説明は省きます。 これだけ使えたら十分使えると思います。

面白い機能は太文字になっているのでぜひ! メイン端末がmacなのでwindowsのショートカットは保証しません。

隅から隅まで使い尽くしたい人用に有用そうな機能を一通り羅列したものも後に用意しておくので暇な時にどうぞ。

操作方法一覧 基本編
機能 ショートカット(windows+mac)
ズーム Ctrl (Cmd) + スクロール
選択ツール v
付箋を追加 s
画像を追加 Ctrl (Cmd) + Shift + K
カーソルチャットを追加 /
オブジェクトに対してコメントする c

FigJamの使い方 発展編

面白いのはこの辺りでしょうか?

個別で紹介したい機能もありますので表の後に書かせてもらいます。

操作方法一覧 発展編
機能 ショートカット
クリップボードに書き出し(オブジェクトを選択後) Ctrl (Cmd) + Shift + c
エモート(感情を伝えるためのエフェクトが出る) e(表示される円のスマイルマークから)
スタンプ(リアクションするためのスタンプ) e(表示される円のスタンプマークから)
テキスト(枠なしテキスト) t
セクション分け(付箋を置くエリア分けに便利) Shift + s
Timer[タイマー]

ヘッダー右上からタイマーを使うことができます!

タイマーといえどただ時間を測るだけではなく、BGMを流すことが可能です。 グループワークには[Lo-fi hip hop]がおすすめです。[Button smash]はかなりノリノリなのでタイミングを選ぶかもしれませんが個人的にはあり。

レコードの針をクリックで動かすことも可能なところが個人的に好きなポイント! 針の動きに合わせて音楽・タイマーがスタートするという遊び心が個人的にぐっときました。

追加であと1分!っていうことができるのももう一つの好きなところです。 ブレストの痒いところに手が届く感じでいいと思います。

Vote [投票]

その名の通り投票機能です。 ただ、まだ日本語機能には問題があるようで子音を使った日本語を直接入力することができないようです。コピペしたらどうにでもなるので現状一手間必要ですね。開発途中らしさも好き。

使い方としては投票のタイトルと一人当たりの票数を決めるだけでOK。 全員に投票権が渡ります。司会役や投票しない人は何もせずに投票を終えることも可能です。

投票は基本ステッカーベースで行われるようで投票に使用するステッカーを選ぶ必要があります。 この辺りは司会が指定する必要がありそうです。一人当たりの票数を増やして、ステッカーを変えてさまざまな意図で投票することも可能そう。一度投票に使用したステッカーを削除して、再度投票することも可能でした。

投票後には得票数が多いオブジェクトにメダルが着くっぽいです。かわいいですね。 投票はオブジェクトに貼り付ける形で行うようで、何もない空間にステッカーを貼るような使い方はできません。

ここまでいいことばかり書きましたが、投票に使ったステッカーは投票終了後も残り続ける点が少し不便でした。投票以降も作業を続けるのなら邪魔になるかもしれません。

最後に

いかがだったでしょうか?

これ言ってみたかったんですよね。

Figma、FigJamの導入、使い方を簡単に解説してみました。ここでは紹介しきれなかった機能(Stickers、Templates、Widgets、Plugin etc…)についてもいずれまとめたいと思います。

NUTMEGとして、Figmaを導入するに至った背景・理由、その具体的な運営方法についても機会があれば自分か他の誰かがまとめると思うので、そちらもチェックしていただけると嬉しいです!

長くなりましたが参考にしていただければ幸いです。 最後まで読んでくださりありがとうございます。