WebデザインツールFigma(フィグマ)の特徴とAdobe XDとの違い

インフォコネクトWebの豆知識

こんにちは、WebデザイナーのAYAです。

デザインツールといえばAdobeが有名ですが、最近では世界や国内でFigma(フィグマ)のユーザー数が増えています。Figmaでなにができるのか、Figmaの特徴や機能を紹介していきます!

Figmaの特徴

Figmaはブラウザ上でデザインできるデザインツールとなっているので、パソコンにインストールする必要がありません

WebデザインツールFigma(フィグマ)の特徴とAdobe XDとの違い参照:Figma公式サイト 

デザイン制作、プロトタイプ制作、デザインのURL共有などなど、Webデザインに特化した制作ができ、アカウントを作成するだけで誰でも無料で使用可能となっています。(Googleのアカウントを持っている人であればそのままサインイン可能です。)

また、複数人が同時にデザインや編集をすることができ、その場ですぐ編集結果が反映されるのでコラボレーションに特化したツールとなっています。

私が初めて使用したとき、表記が英語だったのでその時点で少し戸惑いました笑。
ですが、安心してください!

日本語表記にしたいときはChromeの拡張機能を入れることで解決します。
『Figma 日本語化』と検索し、追加するだけで完了です。

WebデザインツールFigma(フィグマ)の特徴とAdobe XDとの違い


費用

基本的にFigmaは無料で使用できます。Figmaには有料プランもありますが、無料プランであってもツールの制限とかは特にないので個人利用するならば無料プランで十分だと思います!

ちなみに無料と有料プランの主な違いは、『編集権限を付与できる人数の制限』です。無料プランでは同時に編集できる人が2人までとなっています。
 

Adobe XDとの違い(機能)

基本的な使い方はXDとあまり変わりませんが、私がまず嬉しい!と思った機能は、画像の色補正ができるところです。結構細かく調整できるので簡単な色調整であれば、Figma上で編集できます。

WebデザインツールFigma(フィグマ)の特徴とAdobe XDとの違い

また、画像の要素自体に塗りのレイヤーを入れることができるところも魅力的だと思います。
人物を切り抜くなどの加工はできないので、そのような加工はPhotoshopが必要ですね。

次に機能面としてモックアップを紹介します。

Figmaでは、PCやiPhoneなどのデバイスプレビューができます。
機種も色々と選べるので提案する時も便利ですよね。

WebデザインツールFigma(フィグマ)の特徴とAdobe XDとの違い

その他、Figmaにはコメント機能もあります。

コメント機能には編集権限のない人も使用可能なので、ディレクターやエンジニアが直接デザインにフィードバックをすることが可能です。こちらも作業効率化に貢献しそうな機能ですよね。
 

まとめ

以上、Figmaについての紹介でした!

Figmaは今年、日本法人が設立されて日本語化に向けて動いているみたいなので、今後さらに使いやすくなって来そうな予感がしますね。
 

Webの豆知識」の関連記事

インフォコネクトに
相談してみませんか?

経営コンサルティングやITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。