【第1回】Figmaに触れてみた

こんにちは！杉澤ゼミで副ゼミ長を努めている川内谷快人です。前回は僕のインタビュー記事だったので、まだご覧になっていない方はぜひご覧いただければと思います！

さて今回は、僕がワークショップでWEBデザインツール「Figma」について学んだことを記事にしました。これからWEBデザインについて学びたいと思っている方の参考になれば幸いです！

まず、Figmaって何？

チームでのデザイン制作を行うツールとして、UIデザインツールアプリ「Figma」が注目されています。インターフェースは全て英語ですが、日本でも徐々に人気が出てきているらしいので、日本語バージョンの実装が待ち遠しいですね！

Adobe XDと比較されることが多いですが、複数人かつリアルタイムでデータの共有がしやすいため、僕の中では「個人制作＝XD」「チーム制作＝Figma」と分けて考えています。

気になった方のために、利用方法からアートボード作成までの流れを、簡潔に説明させていただきます！

Figmaを使ってみよう！

Figmaは、公式サイトからアプリをダウンロードして利用することも可能ですし、ブラウザ上でも利用可能です！ちなみに僕はアプリをダウンロードして、毎回すぐにFigmaを起動できるようにしました。

ダウンロードはこちら

アプリを起動したら、これまでに作ったデータが一覧表示されます。新規でデータを作成する場合、上の画像の「＋」ボタンを押します。

新規作成できたら、制作開始です！①「Untitle」を押すと、タイトル名を自由に変更できます。② 青い部分が現在使用しているツールです。左から「選択」「アートボード」「図形」「描画」「テキスト」「移動」「コメント」です。③ 左から「参加者のアイコン」「データのシェア」「データの全体表示」です。

アートボードの作成は「Flame」ツールを選択し、右のエリアから任意のサイズを選びます。特にこだわりがなければ、初めは「Desktop 1440×1024」で試してみてはいかがでしょうか。

アートボードができたら、あとは色々なツールを試して自由にデザインしてみてください！XD慣れしている人は、特に不自由なくデザインできると思います…たぶん笑

ワークショップでやったこと

Figmaを使ったワークショップに2回参加したんですが、やったことは

・テンプレ通りに素材をはめてみる

・「おうち時間を楽しくするアプリ」をつくってみる

の2点でした。どんなことをやったか実際に紹介します。制作データも公開しますので、気になった方は覗いてみてください！

左がテンプレの画像で、各パーツは運営さんが用意してくれました。この工程のおかげで、Figmaの操作にかなり慣れることができたので、初めはモックを作ってみるのが良いかもしれません。

制作データはこちら コメント残してもらえると嬉しいです！

「おうち時間を楽しくするアプリ」というテーマをもらい、参加者みんなで自由にアプリデザインしました。僕は「Spotify」や「LINE MUSIC」のUIを参考にしながら、それっぽいデザインに仕上げました。参加者の中には「動画での学習アプリ」や「他の視聴者と動画を見ながらリアルタイムで交流できるアプリ」など、ユーモアな発想が多くて刺激になりました。

制作データはこちら コメント残してもらえると嬉しいです！

ワークショップを終えて

オンライン形式のワークショップは初めてで、不安というか不思議な気持ちで参加したんですが、参加者全員の進行具合に合わせてワークショップを進めてくれていたので、とても良かったです！

わからないことはリアルタイムで質問できるし、自宅でリラックスしながら受講できたので、制作はとても捗りました！恐らく、最初から一人でFigmaを勉強してたら、英語ばかりで挫折してたかもしれないので、参加してみてホント良かったです…笑

今回のように、今後も学んだことをNOTEでアウトプットできればと思っていますので、よろしくおねがいします！