[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は1人でも使えますが、複数のユーザーが同一デザインファイルを同時に編集可能という特徴があります。
同時に編集することで「編集→保存→共有」の流れが存在せず、チームでのデザイン作業を効率化できます。
以下のリンク先の複数のカーソルが動いているような動画(実は画像)がとても分かりやすいと思います。

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

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

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

Webサイトのページデザインが完成したら、次に進む工程はデザイン確認です。
PhotoshopやIlustratorでデザイン制作であれば、書き出した画像をWebページに貼り付けてアップロードし、
「ページに表示された画像」の状態で確認していましたが、これだと動きなどは確認できません。

Figmaの場合、デザインを元として、実際のクリック操作などが行えるインタラクティブなプロトタイプを作成できます。
プロトタイプとは、実際にコーディングされたウェブサイトのプレビューです。
完成形を伝えやすいというメリットがあります。

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

04. 無料で機能を試せる

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

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

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

プランと料金 | Figma

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

Webデザイナー視点のFigma

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

Figmaのメリット

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

前述したようにFigmaはクラウドベースであるため、アプリをインストールする必要がなく、アップデートも不要です。
アカウント開設は必要ですが、特に時間的な導入コストがほぼゼロです。
一応アプリ版も存在しますが、インストールの手間を考えればブラウザ版の方が手軽に使用できます。

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

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

Webデザイン制作の仕事を何件かこなすことでようやく気づくことがあるのですが、
それはデザイン制作で実際に使用するツールは限られており、全ての機能を使うわけではないということです。
(個人的には全機能の5%も使っていません。

「機能」というものは、備わっていないよりは備わっている方がよいことには変わりありませんし、
PhotoshopやIllustratorは多機能で非常に優れたツールであることにも間違いはありませんが、
多機能であるがゆえに、ユーザーに逆にわかりづらさを招く原因になってしまっています。

その点、Figmaではツールバーに用意されたツールはWebサイトデザインに最低限必要なものに限られていて、
非常にシンプルに、どの場合にどのツールを使えばよいかをすぐに覚えることができます。
教員として、もっとシンプルに、実際に現場で使う機能だけを重点的に覚えてほしいとの思いを実現したツールです。

今回、Webデザイン制作の授業のためのツールをPhotoshopからFigmaに切り替えた最大の理由がこれです。

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

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

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

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

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

Figmaのデメリット

パスを使った編集が困難

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

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

難しい表現は苦手

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

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

オフラインだと機能制限がかかる

Figmaは基本的にオンラインで動作するツールであるため、オフラインだと機能制限がかかります。
オフラインで作業するには、事前にオンラインでファイルを開いておく必要があり、
行った変更を保存するには、再度オンラインに接続する必要があります。

なおオフライン時に開いているファイルへの他のユーザーの更新の取得や、
ライブラリからのコンポーネントの検索、新しいプラグインのインストールなどはできません。

つまりオフラインの場合、Figmaの最もよいポイントである複数人による同一ファイル同時作業ができないということです。

まとめ

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

参考

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