Figmaに触れて感じたメリットとデメリットについて

2024.09.13

みなさんはFigmaとXDどちらを使っていますか?今やサイトデザイン制作ツールはこの2つのどちらかを使用している方が多いかと思います。

私は長年XDを愛用してきましたが、ここ最近Figmaに触れてみて、Figmaの素晴らしさを実感しました。ただし一部使いづらい部分もありましたので、今回はXDと比較して感じたFigmaのメリット、そしてデメリットについてご紹介していきたいと思います。

Figmaとは

「Figma」とは、ブラウザ上で簡単にデザインができるUI/UXデザインツールです。Figmaは2016年にアメリカで一般公開され、その後急速にユーザー数を増やしてきました。2022年7月には、待望の日本語版がリリースされ、同年9月にはAdobe社がFigmaを買収する話が上がる（2023年12月破断の結果に）など今最も注目を集めるデザインツールです。

Figmaのメリット

実際に触れてみて感じたFigmaのメリット6つご紹介します。

一つのファイル内でページ分けが可能

Figmaでは一つの同じファイル内でいくつもページを分けることができます。そのため下記のようにワイヤーフレーム、コンポーネント、TOPデザインといったようにアートボードがちらかずに整理でき、とても管理がしやすくなります。※無料プランの場合はページは3つまで作成できます。

グラフィックデザインを作成できる

XDは基本1pxごとにスナップする仕様ですが、FigmaはUI/UXデザインツールなので下記設定をすることでピクセルに関係無くオブジェクトを自由に動かすこともできます。そのためイラストレーターに近い感覚でFgimaでバナーなどを作成をすることが可能です。

[基本設定]>[ピクセルグリッドにスナップ]のチェックを外す

私はできるだけ少ないソフトで作業したいため、凝ったデザインでなければイラストレーターを介さずにFgimaで完結できる点は大変魅力的だと感じてます。

モックを使ったプレビュー表示が可能

デザインをプレビュー表示する際、MacbookPro 16やiPhone15など、様々なモックを選んでより実際の雰囲気に近いかたちでイメージを共有することが可能です。スマホデザインもパソコン上で確認してもらうことが多かったためXDのプレビューよりもイメージが湧きやすくなります。

プラグインが豊富

文字を立体、アーチ状にするなど、イラストレーターのように変形を加えることが可能なプラグインから1クリックで簡単にスタイルシートを作成してくれるプラグインまで、XDと比べより高品質、かつ種類も豊富です。こちらについては次回の記事でいくつかオススメのプラグインをご紹介したいと思います。

Variants（バリアント）機能

XD のコンポーネントのステートと同等の「Variants」という機能があります。XDでは一つのコンポーネントに対してステートは2、3種類しか設定できませんが、Figmaでは一つのコンポーネントに対して色、大きさ、ステートなどより細分化して一つにまとめることが可能です。こちらを活用することで下記メリットがあります。

アセットパネルで見つけやすくなる
使いやすくなる
バリエーションの発見を向上させる

オブジェクト移動時の数値（ナッジ）を調整できる

下記設定から十字キーでの移動数値（ナッジ）を調整することが可能です。私は８の倍数ルールに基づいて「大きな調整」を10px→８pxに変更しています。

上部バーの「Figma」＞「基本設定」＞「ナッジ」

Figmaのデメリット

Figmaは素晴らしいツールですが、XDと比較してデメリットを感じる部分もありましたので、そちらについてもご紹介いたします。

ガイドのロックができない

XDではガイドのロックが可能でしたが、Figmaではなぜか未だにロックができません。作業に集中しすぎていつの間にかズレているということも。。今後のアップデートに期待したいですね。

プラグイン「Singari」のショートカットが使えない

こちらのデメリットは私だけかもしれませんが、XDで一番愛用している整列用のプラグイン「Singari」のショートカットがFigmaでは効かないです。こちらのプラグインはオブジェクトを複数選択し、最後に選択したオブジェクトをキーオブジェクトとさせ、選択したすべてのオブジェクトをキーオブジェクトに合わせて「垂直方向中央，水平方向中央へ整列」といった具合に整列・分布させることができます。

Adobe製品との互換性が弱い

画像を少し明るくしたいなど簡易的な補正であればFigma上で可能ですが、細かい補正する場合は一般的にPhotoshopで補正する方が多いかと思います。XDでは配置した画像を選択し、そのままPhotoshopを開きすぐに反映可能ですが、Figmaではそのような互換性がないため別で開く必要性があり少し手間だと感じました。またAdobe Fontを使用する際に通常通りにフォントを追加してもFigmaでは使用できません。使用するにはAdobe Fontもデバイスにいちいちダウンロードする必要があります。