【Figma】乗り換えを迷っている人向け、デザインツール別比較まとめ
当記事がfreelance hubへ掲載されました！
当記事がフリーランスエンジニア・クリエイター向けの案件情報を発信している「Freelance hub（運営会社：レバレジーズ株式会社）」さんのサイトの『注目度高めのデザインツール！「Figma」の魅力と疑問が解決できるブログ記事まとめ』という記事でご紹介いただきました。
Index
はじめに
数年前から話題になってたFigmaですが2022年にAdobeがFigmaを買収し、さらに今年に入ってAdobe Creative CloudのページからXDがなくなって、Figmaの注目度がさらに上がりました。周りのデザイナーやクライアントでもFigmaを使用・指定する機会が増えています。
そこでFigmaに乗り換えようか検討中の人に向けてデザインツール別にメリット・デメリットをまとめてみました。
この記事を書くにあたり以下の書籍を読みました。
普段Figmaを使っていても知らなかったことがあり、使いながら機能を見つけてくよりは、一度読んだ方が早いと感じました。とてもわかりやすく1日で読めるのでおすすめです。
この記事を読んでる人におすすめの書籍
※ちなみに記事は書籍の内容を転載するものではございません。
Figmaの特徴
FigmaはブラウザベースのUIデザインツールであり、最近では世界で最も人気のあるデザインツールの1つとなっています。
人気の理由として、以下の点が挙げられます。
Figamが人気の理由
① 無料で使える
② ブラウザベースである
③ 複数人によるリアルタイムの同時編集機能
④ デザインを再利用可能なパーツごとに管理できるコンポーネントとバリアント機能
⑤ プロトタイプ機能が充実している(状態管理・ページ遷移・アニメーション表現など)
それぞれ解説していきます。
① 無料で使える
アカウントを作るだけで誰でも無料で使えます。
有料版もありますがデザインを作るという点では無料版だから使えない機能という制限はないので、デザイン表現には困りません。
② ブラウザベース
ブラウザベースのツールなので、MacでもWindowsでもブラウザがあれば使えます。閲覧環境に影響されないのでMacとWindowsで全く同じデザインを閲覧・編集できるのがFigmaの特徴です。デスクトップ版のアプリもダウンロードして使うことも可能です。
| Figma | Illustraotr / Photoshop / XD | Sketch | |
|---|---|---|---|
| Mac | ◯ | ◯ | ◯ |
| Windows | ◯ | ◯ | X |
| WEB | ◯ | X | X |
③ 複数人によるリアルタイム編集機能
例えば、複数のデザイナーが同じFigmaのファイルを開いている場合、どちらも同じ画面を編集することができ、どちらかが編集した内容がすぐにもう一方の画面に反映されます。
これにより、作業効率を高めることができます。リアルタイム編集はFigma独自の機能で他のデザインツールにはない機能です。
また、デザインの特定のエリアに対してプロジェクト参加ユーザーがフィードバックやコメント、タグ付けすることもできます。
Adobe XDでもコメントを残すことは出来ますが、Figmaでは更にコメントにスレッドを持つことができます。
④ デザインを再利用可能なパーツごとに管理できるコンポーネントとバリアント機能
コンポーネント(Component)について
コンポーネントは、複数のページやフレーム内で使用される同じデザインのUI要素をまとめて管理する仕組みです。例えば、Webサイト内で使用されるボタンやテキストフィールドなどのUI要素をコンポーネントとして定義しておくことで、それらを再利用することができます。
バリアント(Variant)について
バリアントは、コンポーネントをさらに拡張する機能です。コンポーネントを基に、異なるスタイルや振る舞いを持つバリエーションを作成することができます。例えば、ボタンとして定義したコンポーネントに対して、複数の色(normalとhoverなど)やサイズの異なるバリアントを作成することで、同じコンポーネントを使用しつつも異なる状態別のデザインを用意することが出来ます。これが超絶便利！
⑤ プロトタイプ機能が充実している
Figmaのプロトタイプ機能は、デザインを作成した画面同士をページ遷移するようにすることができます。
これにより、開発前にページ遷移を再現することができ、クライアントや開発者へのイメージ共有が具体的に伝えることができます。ちなみに、Adobe XDとSketchにも同等の機能が備わっていますね。
また、ページ遷移に加え各要素のアニメーションや、マウスオーバー時のインタラクションなども設定することができデザイン時点でより具体的に実装した時の動きを再現することができます。
例えば、以下の表現が可能です。
プロトタイプの作り方も後々アップしていこうと思います。
- ハンバーガーメニュー
- イメージスライダー
- タブによるコンテンツ切り替え
など
Figmaにしかない特徴まとめ
- ブラウザさえあればすべてのOSで無料で使える
- ブラウザベースなので環境依存がなくデータに差異が出ない
- リアルタイム編集機能
Figmaが向いているケース
- ワイヤーフレームの作成
- ページ遷移が多いUIデザイン
- 複数のデザイナーで進めるプロジェクト
- デザインとフロントエンドを含む開発が分担されてるプロジェクト
Figmaちょっと良さそうかも🤔？と思った人はこちら👇
他のデザインツールとの比較
Figmaに移行する際に自分が一番悩んだのは、今自分が使っているツールとどこが違うのか？また、どういう点が使用ツールと比べて強みと弱みがどこか？が気になりました。
なので使用したことあるデザインツールと比較をまとめてみました。
Adobe Illustratorとの比較
Illustratorは印刷物のデザインやロゴ、イラスト作成でよく使用されていて、そもそもUIデザイン用のツールではありません。
ただ、最近ではグラフィックデザイナーがWEBデザインやバナーを作るといった作業も増えてきているので、そのままIllustratorでWEB関連のデザインするケースもあります。そのようなケースのときはIllustratorと操作感も似ているFigmaを使っても良いかと思います。
Figmaと比べた時の強み
- ベクターデータ(デザインの拡大・縮小に影響を受けづらい)
- 印刷物のデザインやロゴ、イラスト作成に向いている
- 印刷物のデザインの場合は入稿データはIllustratorから書き出したデータの方が無難(安全)
Figmaと比べた時の弱み
- 有料である(そこそこ高い)
- そもそもWEBやUIデザイン用のツールではない
- WEBやUIのデザインをするときは環境設定を変える必要がある
- 写真画像を多様すると重くなりがち
- ヘッダーの追従、ホバーの動き、画面遷移など動的なデザイン表現が出来ない
- 共同編集には不向き
Adobe Photoshopとの比較
Photoshopはもともとは写真画像をレタッチするソフトですが、後述するXDやSketchが出てくるまではWEBサイトのデザインはPhotoshopが主流でした。(たぶん)
Photoshopは画像編集が出来るので表現豊かなビジュアル作成が可能で、日本ではランディングページのデザインは今もPhotoshopを使用している人が多いのではないでしょうか。
また、他のデザインツールとの一番の違いはデザインと同時に画像も編集出来るので、ツール間の往復(PhotoshopでレタッチしてXDでレイアウトするなどの行き来)が無く効率的にデザインを作ることが出来ます。
Figmaと比べた時の強み
- 画像の高度な編集
- デザイン作成と同時に画像編集が可能
- 画像書き出し機能や、レイヤーカンプ機能、スライス機能などWEBサイト制作に便利な機能が豊富
Figmaと比べた時の弱み
- 有料である(そこそこ高い)
- アートボード数の増加によりデータが重くなる
- ヘッダーの追従、ホバーの動き、画面遷移など動的なデザイン表現が出来ない
- 共同編集には不向き
Adobe XDとの比較
Adobe XDはUIデザインに特化したプロトタイピングツールです。
WEBデザインに必要なワイヤーフレームからデザイン、プロトタイプまで一連の作業が可能です。
Photoshopの後に出てきたソフトで、よりUI(WEB)デザインに特化した機能が備わっています。
前述のIllustratorとPhotoshopと比べFigmaと似ています。
ちなみに、最初のところでXDがなくなったと書きましたが、まだダウンロードして使うことは可能です。
Figmaと比べた時の強み
- IllustratorやPhotoshopと操作が似ていてAdobeユーザーは学習コストが低い
- 他Adobe製品との連携して使うことで、かなりの表現が可能
Figmaと比べた時の弱み
- 共同で使う祭はメンバー全員がソフトをインストールする必要がある
- 共同編集する際にデザインの差分が発生し競合するケースがある
- 今後完全にサポートが終了する可能性が高い
Sketchとの比較
Sketchは、一番はじめにリリースされたUIデザインツールです。
FigmaやAdobeXDが登場するまでは、Sketch一強の時代が続いていました。使いやすいUIのためSketchにとどまる人も多いと思います。
ちなみに、FigmaはSketchユーザーからの移行を推しているのかSketchのデータをインポートする機能が備わっています。
Figmaと比べた時の強み
- 操作感は一番使いやすい
- 動作が軽量
- プラグインが豊富
Figmaと比べた時の弱み
- Macユーザーのみ
- 日本語非対応
- シンボル機能がFigmaの方がシンプル(Figmaだとコンポーネント機能)
- Figmaのバリアント機能(ボタンのnormal/hoverなどの管理)を表現するのに工夫が必要
Figmaの使い分け目安
使用メインツール別にFigmaを試すきっかけとなる目安を考えてみました。参考になれば幸いです。
- Illustratorメインの人 → WEB関連のデザインのときだけFigmaを使ってみる。
- Photoshopメインの人 → LP以外のWEB・UIデザインのときだけFigmaを使ってみる。
- XDメインの人 → XDの影が薄くなってきたので、ここは思い切ってFigmaを使ってみる。
- Sketchメインの人 → プロジェクトでMacとWindowsのデザイナーが混在するとき、Figmaを使ってみる。
もっとFigmaについて詳しく知りたい！という人はこちら👇
まとめ
今回はFigma推しっぽい記事になりましたがそれぞれ強み・弱みがあるのでFigma最強というわけではありません。また、各ツールの比較も細かい機能を見ればFigmaでは手の届かない箇所もあります。ただ、なれたツールばっかりで表現していると自身の可能性を狭めることにもなるのでぜひFigmaを使ってみてはいかがでしょうか。
この記事を読んだ人におすすめの書籍
