[Figma] 01 Figmaってどんなデザインツールなの?

昔からデザイン制作では、Adobe系ソフトを中心にして様々なツールが使われてきました。
現在まで業界で主に利用されてきたのは、やはりAdobe社のPhotoshopやIllustratorです。

しかしながら近年、ウェブデザイン制作ツールとしてファーストチョイスに挙がるのが、今回紹介するFigmaです。
Figmaは、その使いやすさと強力な機能によりWebデザイナーを中心に多くのデザイナーに支持されています。
また、エンジニアやディレクターなど、デザインに関わる様々な職種の人々が、
Figmaを使って共同で作業することで、より効率的で質の高いデザインを生み出すことが可能になります。

今回はFigmaの特徴やウェブデザイナー視点でのメリット・デメリットを紹介します。

Figmaができること

まずは、具体的にFigmaを使うとどんなものを作ることが可能なのかを以下にまとめました。

• Webデザイン・UI/UXデザイン
  WebサイトやWeb広告、WebサービスやアプリのデザインやUI/UXデザイン、ワイヤーフレームの作成など。
• プロトタイピング
  画面遷移やインタラクションを考慮したプロトタイプの作成。
• プレゼンテーション資料
  スライド資料のデザイン。
• SNS投稿用画像
  SNSの投稿に合わせた画像作成。

Webデザインだけじゃなく、プレゼンテーション資料やSNS投稿用の画像など、その用途は多岐にわたっています。

Figmaの特徴

Webデザイン制作におけるFigmaの主な特徴を挙げると、以下のようになります。

1. クラウドベースのWebブラウザで動作するデザインツール
2. リアルタイム共同編集が可能でバージョン管理ができる
3. プロトタイピング機能でWebサイトの動作プレビューができる
4. 無料で機能を試せる

01. クラウドベースのWebブラウザで動作するデザインツール

Figmaはクラウドベースであり、最大の特徴はWebブラウザで動作するデザインツールであることです。
インターネット環境があれば、どこからでもアクセス可能であり、OSやデバイスに依存しません。
またコンポーネント機能やオートレイアウト機能などUI/UXデザインに必要な機能が、そしてプラグインが豊富で非常に充実しています。

02. リアルタイム共同編集が可能でバージョン管理ができる

Figmaは複数のユーザーが同時に同一デザインファイルを共同編集できるためチームでのデザイン作業を効率化できます。
「編集→保存→共有」の流れが存在しないため、複数人で同一ファイルを同時作業で進めることができます。
以下のリンク先の複数のカーソルが動いているような画像がとても分かりやすいと思います。

参考:ウェブデザインやプロダクトデザインのための無料デザインツール| Figma

またFigmaのデータは変更履歴が自動的に保存されるため、過去のバージョンに戻したり、変更内容の確認が容易です。

03. プロトタイピング機能でWebサイトの動作プレビューができる

Webサイトのページデザインが完成したら、次に進む工程はデザイン確認です。
PhotoshopやIlustratorで作った場合は基本的にデザインを画像として書き出して扱うことになりますが、
Figmaの場合、デザインを元として、クリック操作などでインタラクティブなプロトタイプを作成できます。

参考:無料プロトタイプ作成ツール: インタラクティブなプロトタイプデザインをビルド | Figma

実際にウェブサイトのコーディングを行ったプレビューができるため完成形を伝えやすいというメリットがあります。

04. 無料で機能を試せる

個人や小規模チームでも気軽に利用できる「スタータープラン」という無料プランが提供されています。
当学科で皆さんが使用するのは「Figmaエデュケーションプラン」という教育機関向けの無料プランです。
こちらは有料の「プロフェッショナルプラン」と同様の機能があり、無制限でファイルを作ることができます。
運営がどれだけFigmaのユーザーを増やそうとしているかがよくわかりますね。

こういったツールは以前から大半が「無料版には大した機能がなく実用には至らない」ものが一般的でした。
しかしFigmaのスタータープランではプロジェクト数の制限はあるものの、機能は制限なく使えます。
教育機関以外の個人や少規模チームならスタータープランで事足りてしまうのではないでしょうか。

なお各プランの料金などは以下のページを確認してください。

プランと料金 | Figma

なお、個人的にはこういったツールは有償であるべきだと思っているので、
お試しをスターターで使い、本格的に使用し始める時はプロフェッショナルプランをご検討ください。

Webデザイナー視点のFigma

ここで長くWebデザイン作業に従事してきた私から見たFigmaのメリットとデメリットを紹介します。

Figmaのメリット

インストールやアップデートが不要で、時間的導入コストなし

前述したようにFigmaはクラウドベースであるため、アプリをインストールする必要がなく、アップデートも不要です。
アカウント開設は必要ですが、特に時間的な導入コストがほぼゼロです。

一応アプリ版のFigmaもあるのですが、機能としてブラウザ版が劣っている点はほぼなく、
むしろブラウザ版の方が手軽に使用できるツールです。

また基本的にPCを選ばないので、WindowsやMacなどのOSを選ばないのも大きなメリットです。

Webデザインに必要な機能だけが搭載されていてわかりやすい

PhotoshopやIllustratorは多機能で、非常に優れたツールであることは間違いありませんが、
Adobe系ツールが多機能であるがゆえに、逆にわかりづらさを招く原因になってしまっています。
デザイン制作の際に実際に使用するツールは限られており、全ての機能を使うわけではありません。

Figmaではツールバーに用意されたツールはWebサイトデザインに必要なものに限られていて、
非常にシンプルに、どの場合にどのツールを使えばよいかをすぐに覚えることができます。

Google Fontsをインストール不要で使える

個人的に最大のメリットだと思っているのが、インストール不要でGoogle Fontsを使える点です。

みなさんが演習室のPCで課題を行っている時に直面して特に困ったのは、
おそらくデザイン制作のためにインストールしたフォントが再起動で消えることではないでしょうか。

演習室のPCは、起動中に行ったインストールや設定の変更は再起動によってリセットされるため、
アプリやフォントのインストールや設定の変更などは、再起動によりPC起動前の状態に戻ってしまいます。

しかしFigmaの場合はインストール不要でGoogle Fontsを使用できます。
そもそもインストールしていないので消えることもありません。

Figmaのデメリット

パスを使った編集が困難

例えば多くのWebデザイナーは、電話アイコンやメールアイコンなどのアイコンは自分で作って編集をしています。
具体的には、ページデザインの方向性によってアイコンの形状や丸みや太さを変えることがとても多いのです。
その時に効率的に編集するのはアンカーポイントを使ってパスを編集するやり方です。

Figmaはこのアンカーポイントを使ったパスの編集がかなり使いづらい印象を受けました。
この作業を最も効率的にこなすには、Illustratorでアイコンを作ってFigmaに読み込む方法がベストだち感じました。
これだとやはり、少し本末転倒に感じてしまいますね。

難しい表現は苦手

パスと同様に、Photoshopで作るような複雑で難しい表現は作ることができず、高度な画像編集や複雑なイラスト作成には不向きです。
シェイプの話ではありませんが、どうしても(デザイン表現的な意味で)直線的な表現にしかなりません。

私の場合、龍弥デザインが求められるデザインの方向性がPhotoshopやIllustratorを使わなければ難しいこともあり、
この点を最大のデメリットに感じました。

まとめ

今回紹介したFigmaのメリット・デメリットを元に使い方を考えると、難しい表現が必要な場合はAdobe系ツールで作り、
Figmaのデザインデータに読み込んで制作する、といった使い分けが実用的だと思います。

参考

大手企業が相次ぎ採用のデザインソフト 注目の理由は?(2024年3月13日) – YouTube
Figma(フィグマ)の使い方!初心者でも分かるWebデザインツール | マーケトランク
【基本編】Figmaの使い方と基本機能 | 株式会社ニジボックス