Figma

Figmaのここが好き!!Figmaを使うメリット13選。

Figmaのここが好き!!Figmaを使うメリット13選。XDでは実現できない便利な機能が盛りだくさん
記事内に商品プロモーションを含む場合があります

近年どんどん勢いに乗っているFigma。

私自身、XDからFigmaに乗り換えて、生産性爆上がりしたデザイナーの1人です。

 

そんなFigma大好き現役デザイナーが、

Figmaを使う13のメリットをご紹介します。

 

この記事は、こんな方におすすめです。

・Figmaが気になっている

・すでにFigmaを使い始めているが、まだ使いこなせていない

・別のプロトタイプツールで不便さを感じている

※この記事では、ツールの使い方の解説はしません。

 

Figmaのここが好き!

私なりの、Figma推しポイントをひとつずつご紹介していきます。

 

ブラウザで動く

デスクトップアプリを開かなくていいので、PCの画面が散らかりません。

 

当然、同じファイルを複数画面で開くことも可能なので、

モニターで全体像を映しておいて、手元のPCで細部の作業をする、なんてことも可能に。

 

そして動作も軽い。サックサク。

 

 

デザインファイルの管理・アクセスが楽

Figmaのデータは、

・チーム

・プロジェクト

・ファイル

・ページ

という4つの階層で管理することができます。

Figmaの階層

赤枠がチーム。緑枠がプロジェクト。青枠がファイル。

 

ファイルの中は、さらにページで分けることができます。

Figmaのページ

 

これによって、

・複数プロジェクトの管理

・過去のデータへのアクセス

が圧倒的に楽に、スムーズになります。

 

 

メモやアイデアも同一ツールで完結

階層を細かく分けられるので、

デザインファイルだけでなく、ワイヤーやメモなどもFigmaで作成すれば、

すべて一つのツール内で管理することができます。

 

ひとつのファイル内に、「メモ」「ワイヤー」「デザイン」の3つのページを作ってしまうのも便利です。

ページの切り替えは一瞬でできます。

 

2021年に発表されたFigjamで、ホワイトボードも使えるようになりました。

 

 

ファイルの全体像を共有できる

URLでプロトタイプの共有が可能なのはもちろんですが、

デザインファイル全体像も共有することができます。

Figmaの共有

 

そのため、枠外にメモを残しておくこともできますし、

確認する側も、全体像を見れた方が便利ですよね。

 

コメント機能を活用すれば、複数人での議論も簡単です。

Figmaコメント機能

Figmaを触ったことのない人に共有する際も、

ブラウザからアクセスできるので、手軽に確認・編集してもらえます。

 

 

エンジニアへの共有も簡単

ハンドオフ機能が付いているので、エンジニアとの連携もスムーズです。

オブジェクトを選択した状態で右側のInspectタブを開くと、このように表示されます。

FigmaInspectタブでエンジニアとの共有も簡単

編集権限不要・閲覧権限のみで、書き出しや、ボタンの状態の切り替え(コンポーネントが用意されている場合)なども可能です。

 

 

共同編集でサクッと相談できる

共同編集者の様子をリアルタイムで確認することができます。

Figmaの共同編集

わざわざ画面共有をしなくても、

Figma上で、複数人で相談しながら進めることが可能です。

 

リモートワーク中、

チャットでやりとりするより、実際に作りながら話した方が速いな〜なんて時、

Figmaだとサクサク相談が進みます。

 

 

プロトタイプのアニメーションも簡単

iPhoneやAndroid、iPadなど、デバイスの型を当てはめることができます。

例えばこんな風に。

Figmaプロトタイプ

よりユーザー体験を想像しやすいですよね。

 

また、ハンバーガーメニューや、ボタンのhoverやtap時の挙動など、

アニメーションも簡単に追加できます。

(早送りされてしまってますが、実際はスムーズなアニメーションです。)

Figmaプロトタイプアニメーション

イージングも自在に調節可能です。

 

 

スマホアプリでリアルタイムプレビュー可能

Figma Mirrorという公式のアプリを使えば、

変更がリアルタイムで反映されるので、実機確認が超絶楽です!!

有線コードで繋ぐ必要もありません。

 

SPデザインを作るときは、常にFigma Mirrorを見ながら作っています。

 

 

ライブラリ活用で、コンポーネントを複数ファイルに展開

Figmaにはライブラリという機能があり、コンポーネントを登録しておくことができます。

パーツだけでなく、色やテキスト、シャドウなどのエフェクト、グリッドも登録可能。

 

ライブラリを呼び出せば、複数ファイルをまたいで使用可能に。

インスタンスの切り替えもワンクリックで簡単です。

 

また、コンポーネントやスタイルの名称を

「button/cv/default」のように「/」スラッシュで区切るとことで、

グループを分けて管理することも可能です。

 

 

オートレイアウトが神すぎる

Figmaの醍醐味はオートレイアウト!!

オートレイアウトを活用すれば、例えばこんなことが可能に。

中身のテキストの長さに応じて、背景サイズが自動で変化します。

Figmaオートレイアウト

 

paddingの設定で、余白も調節可能。

Figmaオートレイアウトpadding設定

 

複数カセットにオートレイアウトを適用すると、marginも設定できます。

これを応用すれば、こんな風に。

後から要素を追加・削除しても、下に続く要素も自動で調節されます。

Figmaオートレイアウト

修正作業が一瞬で終わる感動…。

 

 

プラグイン活用でグラフィックデザインも

Figmaにこの機能ほしいな〜と思ったときは、大体プラグインが存在しています。

 

プラグインを活用すれば、メインビジュアルなどのグラフィカルなデザインもFigma上で完結。

複数のツールを行き来しないで済むので、作業時短大幅短縮に繋がります。

 

プラグインについてはこちらの記事で紹介しています。

【2021年】実務で本当に使えるFigmaプラグイン18選。プラグイン活用で業務効率大幅改善!

 

 

余白の数値確認が一瞬でできる

オブジェクトを選択して、optionキーを押すだけ。

余白の数値をデザインしながら気軽に確認できます。

 

早送りになってしまってますが、オレンジ色で余白の数値が表示されています。

Figma余白の数値確認

デザイン中に余白のpxも考慮しながら作成できるので、

エンジニアにとっても実装しやすいデザインに。

XDにも同じ機能がついていますが、意外と知らない方も多い。(私もずっと知らなかった)

 

 

オブジェクトの入れ替えが一瞬

2つの要素の位置を入れ替えたいな、なんてとき。

複数選択すると真ん中にピンクの丸が出てくるので、そこを選択してドラッグするだけ。

Figmaオブジェクトの入れ替え

一瞬で入れ替えが完了します。

 

Figmaのデメリット

Figmaの推しポイントを紹介してきましたが、そんなFigmaにもデメリットはあります。

日本語対応していない

すべて英語のため、英語にアレルギーのある方には難しいツール。

また、日本語で解説されている記事もまだ少ないので、

わからない時に、日本語で調べても情報が出てこない…なんてことも。

 

今はまだ日本では少数派のFigmaですが、確実に勢いを伸ばしてきているので、

これからどんどん情報も増えていくことが予想されます。

 

Adobeとの互換性は期待できない

Adobeソフトをガッツリ使い込んでいて、

AdobeCCライブラリをフル活用している方にとっては、XDの方が使いやすいかも。

 

当然Adobeソフトではないので、互換性の期待はできません。

Illustratorのパスは、Figma上でもそのまま維持されます。

 

Figmaはこんな人・チームにおすすめ

こんな場面では、Figmaが他のツールに圧倒的な差をつけています。

・大規模なプロジェクト

・自社サービスの開発、運用、保守

・複数人で作業や議論をする機会が多い

・過去のデザインファイルを整理して管理したい

 

逆に言えば、小規模で、ファイルの整理も不要な単発案件が多い場合は、

XDなどの他のツールでも充分かもしれません。

 

まとめ

以上、私なりのFigmaの推しポイントをご紹介してきました。

 

ツールを乗り換える際のヒントや、

作業効率アップのためのヒントになれば嬉しいです。

 

【2021年】実務で本当に使えるFigmaプラグイン18選。プラグイン活用で業務効率大幅改善!
【2021年】実務で本当に使えるFigmaプラグイン18選。プラグイン活用で業務効率大幅改善!UIデザインのためのプロトタイプツールとして近年大注目のFigma。 そのままでも充分画期的で魅力的なFigmaですが、 プ...
新人デザイナーにもベテランデザイナーにも知っておいて欲しい、デザインレビューの観点と気をつけたいポイント
新人デザイナーにもベテランデザイナーにも知っておいて欲しい、デザインレビューの観点と気をつけたいポイントデザイナーなら誰しもが経験したことのある、「デザインを添削される」という経験。 この記事では、デザイン添削、すなわちデザイ...
未経験からwebデザイナーになるためのロードマップ

これからwebデザインを学び始める方はもちろん、すでに学習を始めている方にも向けて、再現性高く、未経験から確実に、現場で通用するwebデザイナーになるための方法を紹介しています!

なんちゃってwebデザイナーではなく、市場価値の高い、仕事に困らないデザイナーになるためのロードマップです!

 

ブログランキングを見る

ブログランキングに参加中です。

記事を気に入っていただけたら、猫様をぽちっとしていただけると嬉しいです!