話題のUIデザインツール「Figma」に入門してみた

42Tokyoのチーム課題で、「ピンポン」のゲームと「チャット」の機能を持ったプログラムを作成中だ。

その課題で、フロントエンドを担当することになった。

フロントエンドとは、ユーザーが直接的に操作できるWebサイトの部分のこと。

ユーザーが見たり、触れたり、体験したりできるすべての部分が含まれている。

具体的には、ナビゲーションのメニューや目立つボタン、カラフルな画像のような、グラフィカルユーザーインターフェースといった、Webサイトで表示される機能を指している。

いままでの課題で作ったプログラムでは、ユーザーは、MacやLinuxのTerminal上でコマンドラインだけで操作をしていれば良かった。

今回の課題では、ユーザーはマウスのクリックで操作をすることになり、こういったグラフィカルなユーザーインターフェースを実装するのは初めてだ。

そこで触るようになったのが、最近話題の「Figma」というサービス。

Figmaとは？

Figmaとは、ホームページをはじめとしたUIデザインの設計ツール。

無料で手軽に、誰でもブラウザ上でUIデザイン作成ができ、初心者でも手軽に始められることがポイントだ。

そして、「Figma」は「ワイヤーフレーム」の制作にも使用できる。

「ワイヤーフレーム」とは、Webのデザイン制作の工程の一つで、ページのレイアウトを定めるもの。

実際のデザインやコーディングといった作業に入る前の段階で作成し、完成イメージを「見える化」することが目的で作られる。

ワイヤーフレームを作っておくことで、実際の作業に入ってから「あの項目が足りていなかった」といったトラブルを防ぐことができる。

本格的な絵を描く前のクロッキーやデッサンのようなもの。

通常、ワイヤーフレーム制作時にはMicrosoftのPowerPoint（パワーポイント）を利用するケースが多いようだが、Figmaはよりデザイン制作に特化している。

そんな「Figma」は、ブラウザ上で動き、共同編集ができることもポイントだ

つまり、WindowsパソコンであろうがMacであろうが、ウェブブラウザがあれば、パソコンの機種を選ばずにだれでも共同編集に参加することができる。

これにより作業内容の認識のすりあわせを容易に行うことができ、のちの修正作業を大幅に減らすことが可能。

そして、Figmaのインターフェースはとても分かりやすく、サクサク動き操作性も良いため、利便性の高いツールとして注目を集めている。

Figmaの良さをまとめると、以下のようになる。

● 無料プランがある
● デザイン制作に必要なツールはほとんど搭載
● ワイヤーフレーム制作にも使える
● ブラウザ上で手軽に利用できる
● 一つのファイルを複数人で編集できる

逆にデメリットを挙げておくと、出力形式が少ないこと。

2023年7月6日時点でのFigmaのファイル出力形式は「PNG」「JPG」「SVG」「PDF」の4種類となっている。

つまり、多くの企業で採用されているPhotoshop形式では書き出すことができない。

実際に触ってみた

公式のチュートリアルが出ていたので、それに従ってさわってみた。

印象としては、とても使いやすく感じた。

PowerPointに慣れている人であれば、「ctrl + c」でコピー、「ctrl + v」でペーストといったコマンドや、altキーを押しながら複製したいものをマウスでドラッグすると複製が作れるといった、操作が同じ部分があり直観的にわかりやすい。

そして「レイヤー」という概念は、Photoshopやクリスタ、iPadのProcreateに慣れている人にはすぐになじめるはず。

それに加えて、Figma自体のUIデザインが優れており、画面に映っている機能ボタンやツールバーでは厳選された最小限のものが並べられており分かりやすい。

ということでFigmaを使いはじめてまだ１日目だが、操作にストレスを感じたことはない。

プレゼン資料の作成にも

UIデザインやワイヤーフレームの作成だけではなく、プレゼン資料の作成にも使用できると思った。

というのも、UIデザインツールであるが故に、オブジェクト同士の距離の調整や、文字の書式を一斉に変更できる「スタイル」が便利だと感じたからだ。

Windowsパソコンを新調したタイミングで、PowerPointは入れておらず、図解が必要なものはいままでGoogle Slidesを使用していた。

しかし今後は、少し凝ったデザインを作るときは「Figma」を使用しようと思う。