WebデザインツールFigmaはチーム制作におすすめ！メリットや使い方を紹介！

Figma（フィグマ）とは　

➡️ Figma　

Figmaとはブラウザ上でデザインやプロトタイプの制作し、Webで共有できるツールです。　

Adobe XDやSketchとは違い、デスクトップアプリをインストールしていなくても利用できます。

そのためスマホやタブレット、パソコンといった環境を問わず利用できる、非常に便利なツールです。　

無料プランから有料プランまで提供されており、導入しやすいのもポイント。　

デザイン制作からチームやクライアントとのデータ共有ができる、デザイン制作とレビュー効率化ツールの機能を併せもったオンラインツールです。　

Figmaのメリット　

人気のUIデザインツールAdobe XD・Sketch・Figmaの3つを比較すると、以下のような共通機能があります。　

• UIデザインの制作
• プロトタイプの作成
• Web上でのデザイン共有
• 機能拡張追加
• スマホでのデザイン確認　

3つのツールは機能面ではあまり大きな違いがありません。　 その中でもチームでのデザイン制作におすすめしたいのがFigmaです！　

それでは、Figmaのメリットを5つご紹介します。　

1.ブラウザで利用できる　

Figmaはアカウント登録さえすれば、パソコンやスマホといったデバイス環境、Windowsやmacのosを問わず利用できます。　

そのため場所を選ばず、オフィスでも出先でもデザインの確認や編集が可能になります。　

ディレクターやエンジニアなど、デザイナー以外の方でもデザインを確認しやすく、チームでの制作において使い勝手のいいツールです。　

2.リアルタイムで共同編集できる　

Figmaは複数人によるリアルタイム共同編集できるのがポイントです！　

同じデザインファイルをブラウザ上でそれぞれが編集できます。　

アクセスしているユーザーの名前が画面上のカーソルに表示されるため、誰がどの作業をしているかが一目でわかり混乱しません。　

離れた場所にいても同時に編集できることにより、ディレクターとデザイナーの確認や、クライアントとのチェックをスムーズにしてくれます。　

3.無料プランでもチームで利用できる　

Figmaは無料で3プロジェクト・編集者2人まで利用できるため、他のツールに比べると無料で利用できる範囲が広いのが魅力です。　

Adobe XDは無料プランも提供されていますが、チームで利用するなら制限のない月額1,180円〜のプランが必要となるでしょう。　

またSketchは無料プランが提供されていません。　

コストを抑えながらチームで利用したい場合は、Figmaをおすすめします！　

4.コメント機能でレビューツールとして使える　

Figmaはコメント機能が提供されており、デザインにコメントや要望を書き込んで情報共有ができます。　

共同編集でも書き込めるため、リモートでコメントを入れながらの編集も可能です。　

クライアントに直接デザインに修正希望を書き込んでもらえば、効率的なデザイン修正も可能になります。　

5.バージョン管理ができる　

Figmaには保存ボタンがなく、常に最新状態が自動で保存される仕組みになっています。　

そして古いバージョンも自動保存しているため、「〇〇月〇〇日のバージョン」という指定をして以前のバージョンからやり直すこともできるのです！　

無料プランでも30日間のバージョンを保存してくれるので安心ですね。　

Figma導入の超簡単2ステップ　

それでは、Figma導入の超簡単な2ステップをご紹介します。　

1.アカウント登録　

• 1.公式サイトにアクセスし、右上のSign upボタンをクリックしてください。
• 2.メールアドレスとパスワードを入力し、「Create account」をクリック。

• 3.確認メールが届くので、メールアドレス確認してください。　 　

• 4.チーム情報やプランを選択。

• 5.登録完了です！　

2.デスクトップアプリが必要な場合はインストール　

ブラウザ上で利用できるツールなのですが、デスクトップアプリも無料でダウンロードできます。　

オフラインでも安定した状態でデザイン制作をしたい場合は、ぜひダウンロードしてご利用ください。　

➡️ Figma デスクトップアプリ　ダウンロードページ　

Windows版とmac版が提供されていますので、環境に合わせて選択してくださいね。　

デスクトップ版で編集した内容は、パソコンがネットにつながっていればリアルタイムでブラウザ版と共有できます。　

Figmaのデザイン製作時の基本操作を初心者にもわかりやすく解説！　

Figmaを使う準備ができれば、続いてデザイン制作です。　

ここではデザイン制作時の基本操作を解説します。　

1.新規ファイル作成　

Figmaの管理画面の右上に「＋」のアイコンが表示されています。　

このアイコンをクリックすれば新規ファイルが作成され、デザイン作成がスタートできます。　

編集画面の上部メニューバーの中央に表示されている「Untitled」がファイル名です。　

ファイル名をクリックすれば変更できますので、お好きな名前に変更してください。　

2.フレームを作成　

作成するデザインに合わせてデザインのフレームを選びます。　

編集画面左上の「＃」アイコンをクリックすると、画面右側にiPhone11・iPhone8・Androidといったスマホやタブレット、デスクトップといったフレーム一覧が表示されます。　

複数のフレームを並べて編集できるため、必要なフレームをすべて選んで表示することも可能です。　

3.グリッドを表示する　

デザインを効率的に制作するため、先ほど準備したフレームにグリッドを表示しましょう。　

グリッド表示したいフレームを選択し、画面右メニューの「Layout Grid」の「＋」アイコンをクリックするだけでOKです。　

グリッドの色や間隔は簡単に変更できますので、使いやすい状態に変更してください。　

4.文字やシェイプを配置する　

さあデザイン制作スタートです！　

編集画面左上の「□」アイコン右側の矢印をクリックすれば、シェイプを選択できます。　

Figmaで利用できるシェイプは以下の6つです。　

• 四角形
• ライン
• 矢印
• 三角形
• 円形
• 星型　

すべて位置・サイズを数値で設定できるため、コーディングの際に正確な数値を確認できます。　

文字は編集画面左上の「T」アイコンをクリックし、続いてテキストを入力したい箇所でクリックして文字を入力してください。　

5.コメントを入れる　

デザインにコメントを入れたいときは、編集画面左上の吹き出しのアイコンをクリックしてください。　

その後、コメントを入れたい部分をクリックするとコメント入力窓が表示されます。　

文章を入力して「Post」をクリックすれば、他のアカウントでもリアルタイムでコメントを確認・返信が可能です。　

6.プロトタイプをつくる　

作成したデザインが実際の利用シーンでどう動作するかを確認できるのが、プロトタイプです。　

Figmaではプロトタイプを作成できます。　

デザイン制作後、編集画面右側のメニューで「Prototype」を選択します。　

アクションを起こしたいボタンや画面をクリックし、そこから変異する先の画面に矢印を結びます。　

アクションの種類や動作も豊富に選択できますので、実現したい動作を選んで設定してください。　

設定が完了、編集画面右上の三角の再生マークをクリックすることで動作再生画面に切り替わります。　

先ほど設定したアクションにより画面遷移などの動作を、視覚的に確認可能です。　

もちろんプロトタイプもブラウザ上で共有できる機能になります。　

Web制作に慣れていないクライアントでも直感的に確認してもらえるため、スムーズにレビューが完了しますね！　

Figmaはデザイン・プロトタイプ制作＋レビュー効率化ができる高機能ツール！　

Figmaはデザイン制作ツール・デザインレビューツール・プロトタイプ制作ツールと、1つで幅広くカバーしてくれる高機能ツールです。　

むずかしい表記がなく感覚的に操作できる編集画面ですので、ぜひ色々な機能をさわってみて、デザインを制作してみてください。　

デザイナーだけでなく、ディレクターやエンジニア、クライアントと手軽にコミュニケーションを取りながら制作を進められます。　

Figmaを導入すればデザイン制作とデザインレビューの手間を省き、プロジェクトの進行がスムーズになるでしょう。　

まずは無料プランを利用して、あなたのプロジェクトに導入してみてください！