近年注目を集めている、ブラウザ上で使える『Figma（フィグマ）』というUIデザインツールはご存知でしょうか？
これまでUIデザインのツールといえば、主にAdobe XDやSketchが使われてきました。
どちらも非常に高機能なツールとはいえ、もっとチームで利用しやすいツールがあれば…と感じることはありませんか？
そんな方におすすめしたいのが、非デザイナーでも手軽に導入できてチームでの制作にとても便利なFigmaなのです！
そこでこの記事ではFigmaの魅力やメリット、基本的な使い方をご紹介します！
ぜひ最後まで読んでくださいね。
➡️ Figma
Figmaとはブラウザ上でデザインやプロトタイプの制作し、Webで共有できるツールです。
Adobe XDやSketchとは違い、デスクトップアプリをインストールしていなくても利用できます。
そのためスマホやタブレット、パソコンといった環境を問わず利用できる、非常に便利なツールです。
無料プランから有料プランまで提供されており、導入しやすいのもポイント。
デザイン制作からチームやクライアントとのデータ共有ができる、デザイン制作とレビュー効率化ツールの機能を併せもったオンラインツールです。
人気のUIデザインツールAdobe XD・Sketch・Figmaの3つを比較すると、以下のような共通機能があります。
3つのツールは機能面ではあまり大きな違いがありません。 その中でもチームでのデザイン制作におすすめしたいのがFigmaです！
それでは、Figmaのメリットを5つご紹介します。
Figmaはアカウント登録さえすれば、パソコンやスマホといったデバイス環境、Windowsやmacのosを問わず利用できます。
そのため場所を選ばず、オフィスでも出先でもデザインの確認や編集が可能になります。
ディレクターやエンジニアなど、デザイナー以外の方でもデザインを確認しやすく、チームでの制作において使い勝手のいいツールです。
Figmaは複数人によるリアルタイム共同編集できるのがポイントです！
同じデザインファイルをブラウザ上でそれぞれが編集できます。
アクセスしているユーザーの名前が画面上のカーソルに表示されるため、誰がどの作業をしているかが一目でわかり混乱しません。
離れた場所にいても同時に編集できることにより、ディレクターとデザイナーの確認や、クライアントとのチェックをスムーズにしてくれます。
Figmaは無料で3プロジェクト・編集者2人まで利用できるため、他のツールに比べると無料で利用できる範囲が広いのが魅力です。
Adobe XDは無料プランも提供されていますが、チームで利用するなら制限のない月額1,180円〜のプランが必要となるでしょう。
またSketchは無料プランが提供されていません。
コストを抑えながらチームで利用したい場合は、Figmaをおすすめします！
Figmaはコメント機能が提供されており、デザインにコメントや要望を書き込んで情報共有ができます。
共同編集でも書き込めるため、リモートでコメントを入れながらの編集も可能です。
クライアントに直接デザインに修正希望を書き込んでもらえば、効率的なデザイン修正も可能になります。
Figmaには保存ボタンがなく、常に最新状態が自動で保存される仕組みになっています。
そして古いバージョンも自動保存しているため、「〇〇月〇〇日のバージョン」という指定をして以前のバージョンからやり直すこともできるのです！
無料プランでも30日間のバージョンを保存してくれるので安心ですね。
それでは、Figma導入の超簡単な2ステップをご紹介します。
3.確認メールが届くので、メールアドレス確認してください。
4.チーム情報やプランを選択。
5.登録完了です！
ブラウザ上で利用できるツールなのですが、デスクトップアプリも無料でダウンロードできます。
オフラインでも安定した状態でデザイン制作をしたい場合は、ぜひダウンロードしてご利用ください。
Windows版とmac版が提供されていますので、環境に合わせて選択してくださいね。
デスクトップ版で編集した内容は、パソコンがネットにつながっていればリアルタイムでブラウザ版と共有できます。
Figmaを使う準備ができれば、続いてデザイン制作です。
ここではデザイン制作時の基本操作を解説します。
Figmaの管理画面の右上に「＋」のアイコンが表示されています。
このアイコンをクリックすれば新規ファイルが作成され、デザイン作成がスタートできます。
編集画面の上部メニューバーの中央に表示されている「Untitled」がファイル名です。
ファイル名をクリックすれば変更できますので、お好きな名前に変更してください。
作成するデザインに合わせてデザインのフレームを選びます。
編集画面左上の「＃」アイコンをクリックすると、画面右側にiPhone11・iPhone8・Androidといったスマホやタブレット、デスクトップといったフレーム一覧が表示されます。
複数のフレームを並べて編集できるため、必要なフレームをすべて選んで表示することも可能です。
デザインを効率的に制作するため、先ほど準備したフレームにグリッドを表示しましょう。
グリッド表示したいフレームを選択し、画面右メニューの「Layout Grid」の「＋」アイコンをクリックするだけでOKです。
グリッドの色や間隔は簡単に変更できますので、使いやすい状態に変更してください。
さあデザイン制作スタートです！
編集画面左上の「□」アイコン右側の矢印をクリックすれば、シェイプを選択できます。
Figmaで利用できるシェイプは以下の6つです。
すべて位置・サイズを数値で設定できるため、コーディングの際に正確な数値を確認できます。
文字は編集画面左上の「T」アイコンをクリックし、続いてテキストを入力したい箇所でクリックして文字を入力してください。
デザインにコメントを入れたいときは、編集画面左上の吹き出しのアイコンをクリックしてください。
その後、コメントを入れたい部分をクリックするとコメント入力窓が表示されます。
文章を入力して「Post」をクリックすれば、他のアカウントでもリアルタイムでコメントを確認・返信が可能です。
作成したデザインが実際の利用シーンでどう動作するかを確認できるのが、プロトタイプです。
Figmaではプロトタイプを作成できます。
デザイン制作後、編集画面右側のメニューで「Prototype」を選択します。
アクションを起こしたいボタンや画面をクリックし、そこから変異する先の画面に矢印を結びます。
アクションの種類や動作も豊富に選択できますので、実現したい動作を選んで設定してください。
設定が完了、編集画面右上の三角の再生マークをクリックすることで動作再生画面に切り替わります。
先ほど設定したアクションにより画面遷移などの動作を、視覚的に確認可能です。
もちろんプロトタイプもブラウザ上で共有できる機能になります。
Web制作に慣れていないクライアントでも直感的に確認してもらえるため、スムーズにレビューが完了しますね！
＼一流デザイナーのスキルが身に付く／
Figmaはデザイン制作ツール・デザインレビューツール・プロトタイプ制作ツールと、1つで幅広くカバーしてくれる高機能ツールです。
むずかしい表記がなく感覚的に操作できる編集画面ですので、ぜひ色々な機能をさわってみて、デザインを制作してみてください。
デザイナーだけでなく、ディレクターやエンジニア、クライアントと手軽にコミュニケーションを取りながら制作を進められます。
Figmaを導入すればデザイン制作とデザインレビューの手間を省き、プロジェクトの進行がスムーズになるでしょう。
まずは無料プランを利用して、あなたのプロジェクトに導入してみてください！
