WEBベースのデザインツール「Figma」

最近、Daily UIでデザインを作る際にはFigmaをよく使用しています。

XDやSketch、InVision Studioなどもたまに使っているのですが、その中でもFigmaが特にお気に入りです。

Figmaとは

そもそも皆さんFigmaというツールをご存知でしょうか？XDやSketchに比べてFigmaはまだ認知度が低く、利用ユーザーも少なめです。

Figmaとは、Webベースのデザインツールです。

XDやSketchでデザインを作る際は、専用のアプリやアカウントが必要です。しかし、FigmaはブラウザとGoogleアカウントさえあれば誰でもすぐにデザイン制作を行うことができます。

機能面からみてもXDやSketchに並ぶデザインツールです。

まずFigmaの良い点は、Webベースなので、環境に左右されません。

例えばXDの場合、私用PCで作成したデザインデータを会社用PCで手を加えたい場合は、クラウドストレージ内に元データを格納しておかなければなりません。

しかしFigmaの場合、Web上で全てのファイルが管理されているのでどのPCからアクセスしても、いつでもデータに触ることができます。

そして他のツールには無いFigmaの1番の特徴が、複数ユーザーで同時に1つのファイルを編集可能なことです。

編集したデザインデータは、URLさえ知っていれば、誰でも閲覧することができます。さらにコメントも付けることが出来るので、どこを修正して欲しいのかディレクターやデザイナー、クライアントと話す時にもかなり役立ちます。

編集権限さえあれば作った本人でなくても、デザインを変更することができます。ちょっとした変更をすぐに適用することができるのです。

もし、誤った変更をしてしまった場合でも、自動保存&バージョン管理がされている為、誰がいつどこのデザインをいじったのかが分かり、編集前の状態に戻すことが可能です。(無料版は最初の30日間のみ利用可能)

簡単な画像編集もFigma上でできてしまうので、露出やコントラスト、彩度などを弄る程度であればいちいちPhotoshopを立ち上げる必要がありません。

ちなみにWebベースだからChromeなどでしか使えないの？と思うかもしれませんが、ちゃんとデスクトップアプリもあります。

Figmaのメリットでもあり、デメリットでもあるのがWebベースの為、オンライン時でしか動作しないことです。

先日、帰省の際に新幹線内でDaily UIでも作ろうかとFigmaを開いたのですが、アプリを立ち上げることさえできませんでした。普段の生活でオフライン環境になることは中々無いとは思いますが、オフライン環境でも動作し、ネットに繋がった状態で最新のバージョンに反映してくれたらもっと便利になりそうです。

Figmaは全て英語UIです。しかし、ショートカットキーがアイコンと共に表示されているので、キーさえ覚えてしまえばそこまで作業時の支障にはなりません。

また、Figmaは英字フォントで日本語を入力しても何も表示されません。日本語を入力する際は、フォントの切り替えを忘れないように気をつけてください。

Figmaの使い方を学ぼうと思っても、実は日本語で説明されている教材はほとんどありません。

なので、僕はUdemyを使ってFigmaの使い方を一通り学びました。

字幕も英語のみですが、映像を見ながら一緒に操作をすればなんとなく何をやっているのかが分かるので、Figmaの使い方を学ぶのに最適です。

僕はセール時に1,200円でFigmaの動画教材を購入しました。Udemyは頻繁にセールを行っているので、欲しい動画がある際はセール時まで待って購入することをオススメします。

XDやSketchなども様々なアップデートを繰り返している中、Figmaも急速にアップデートを繰り返しています。

環境に左右されず、デザインの共有が簡単なFigmaはデザイナーに限らず幅広いユーザーにオススメできるツールかと思います。

個人利用程度であれば無料プランで全く問題なく使用できるので、是非試してみてはいかがでしょうか。