デザインツールFigmaとは?Figmaでできることを解説

David
Peter Martinez 更新日 : 2020-09-25 17:19:49

Webデザインを行う際長く親しまれているものといえば、Photoshopやillustratorでしたが、近年Webデザイナーの作業を少しでも楽にすることができるツールを紹介したいと思います。
今回このデザインソフト「Figma」を紹介させていただきたいと思います。


Figmaとは

FigmaはDylan FieldとEvan Wallaceが、共同開発したリアルタイムコラボレーションができるデザインツールです。といってもなんともイメージしにくいと思いますが、簡単に説明すると、デザイン版のGITHUBです。
ユーザーインターフェース(UI)のデザインをブラウザ上で作成できます。よって、アプリのインストールが不要なのでインターネット環境さえあればどこからでも操作できます。
作成したデザインをURLを送るだけで公開することも可能です。よく複数人での作業で「どのファイルが最新かわからない…」「バージョン管理が大変…」と悩んだことがある人、いますよね。その長年の問題をバッチリ解決してくれるのがFigmaです。
リアルタイム同時編集機能を使ってリモートワーク中でも画面越しの説明がスムーズに行えることや、作業履歴を残せる機能、プロジェクトの進捗状況が管理できる機能など、チーム作業に便利な機能が多数搭載されています。エディターが2名までなら無料で使うことができるので1人での利用だけでなくチームでの利用にも始めやすいツールです。

figma

Figmaで出来ること

Figmaで出来ることとはいったいどういうものなのでしょうか。下記で説明いたします。

1.Figmaは、チームが一緒にデザインすることができます。ブラウザ上で作業を行うため、複数の開発者がURLにアクセスして作業をすることができます。

2.OSによらず作業ができる。特別にインストールしなくても、ブラウザさえあればどこでも使えるため専用端末を用意しなくてもよいことはまさにメリットです。

3.履歴管理もできる。過去のデザインに戻りたいときはどうしても複数ファイルをパソコンに管理する必要がありますが、このツールはWebで管理されるため過去のある時点に戻りたい時に簡単に戻れることがありがたいです。さらにコメント等も入れておけばどういった点が変更が必要なのか、何に使用したのかも管理できます。

4.プラグインが複数あることで。全ての機能を入れるようなことをせず自分が必要な機能のみをプラグインで取り込めるためユーザカスタマイズ性が高く、作業性が良いことがあります。さらに細心の機能も開発されていくので、常にアップデートしていけることが良い点です。

5.リアルタイム同時編集機能を使えば、リモートワーク中でも画面越しの説明がスムーズに行えることや、作業履歴を残せる機能、プロジェクトの進捗状況が管理できる機能など、チーム作業に便利な機能が多数搭載されています。個人PCで作業してしまうと、その人の仕事が終わるまで別の人が作業ができないが、リアルタイムで作業ができるのは非常にありがたいです。

6.HTMLとFigma間でインポートができる点があります。今までのツールはHTMLのコーティングとデザインはバラバラで作業が行われておりましたが、これをつなぐプラグインがあるため、無駄なコーティング作業を減らすことができます。

7.デザイン確認が簡単です。Sketch Mirrorという機能を使えば、Sketchで作成したデザインをリアルタイムでiPhoneに表示可能です。 Photoshopは画像編集が大得意であるけれどもベクター描画に弱いし、Illustratorはベクター描画に強いけど簡単な画像の編集ですら難しいというところをSketchではまとめて作業ができます。ツールを使い分けるとなると、複数のソフトを立ち上げる必要があり動作が重くなります。こういったボトルネックをSketchは解決してくれます。

上記のメリットはあるものの、GITHUBは少し使いづらい部分があります。全員が同じ使い方をしてくれるとは限りません。よって、メンバである程度ルールを徹底する必要があります。その部分は時間がかかると思います。


Figmaの代替品: Wondershare Mockitt

 Figmaと同様動作が早くて作業できるツールとして、Wondershare Mockittというものがあります。MockittはWondershareが開発したプロトタイピングを作成し、リアルのユーザー体験をプレビューで再現できるオンラインのチームコラボレーションツールです。 このツールも非常に簡単なので、習得までの時間がかかりません。3時間かけてツールを勉強すればすべてを使うことができます。 またオンラインで作業ができるので、場所やパソコンにとらわれず作業ができることも非常に良いです。またツールを使いこなすのにかかる時間はたったの3時間です。3時間で使用できるようになるのならば、使いたいと思いませんか。

adobe xd map

今便利なツールほとんどがオンラインで使用できるツールになってきております。最新のツールをチェックすることもデザイナーには求められるようになっております。確かに今までのツールを使うほうが新たに覚えなくてもよいという点はありますが、若い世代はオンラインで、年配の方はローカルソフトとなると全く効率化ができません。ぜひ最新のツールを覚えていただき作業効率を上げていただければと思います。 自分に合ったツールを見つけていただき作業効率が上がればと思います。

製品に関する質問がありますか? サポートチームへお問い合わせ >