あなたは知っている？Web上で簡単にデザインを作れる「Figma（フィグマ）」の使い方

UI/UXのデザインにはAdobe XDやSketchなどのデザインツールがメジャーとなりつつありますが、「Figma」というツールがあるのはご存じでしょうか？

今回はブラウザ上で作業ができる便利なデザインツール「Figma」の使い方をご紹介いたします。

もくじ

Figmaとは、ブラウザ上でデザインを作成できるツールです。

複数人で同時に作業を行うことができ、フリープランでは無料で利用することができます。利便性が高くチームでの作業に向いています。

・複数人で同時に作業が出来る

先に述べたように、Figmaはファイルを共有されている人であれば誰でも修正を行うことができます。ブラウザ上で作業を行うのでメンバー全員で同じバージョンのファイルを閲覧できます。

・他の人の作業画面を追うことが出来る

作業者のアイコンをクリックすると、そのメンバーの作業画面を確認することができます。作業の進捗状況やデザインの確認がいつでもリアルタイムで行うことができます。

・コメントを残してフィードバックが出来る

修正や確認などがある場合に、そのデザインの上に直接コメントを残すことができます。

・ベクターデータの扱いが可能

FigmaはPhotoshopなどと異なり、ベクターデータでデザインを作成することができます。そのため画像サイズが変わった場合にいちいちファイルを書き出し直す必要がありません。

・レスポンシブデザインが作成できる

SketchやAdobe XDでは対応していませんが、Figmaではレスポンシブデザインも作成することができます。モバイルデバイスにも連携しており、スマートフィンでのデザイン確認も簡単です。

【Figma】

まずは上記URLで「Try Figma for Free」をクリックして試用アカウントを取得します。

次にUIデザインやワイヤーフレームなどのデザインを作成します。必要なフレームはあらかじめ登録されているので、選択するだけで簡単に設置することができ直感的に作業することができます。

デザインを作成したら右上のメニューから「T」のアイコンをクリックし、テキストを設置します。

次にプロトタイプモードに切り替えてプロトタイプを作成します。プロトタイプではリンクの設定も必要になります。

右上にある「Share」をクリックして他の人と共有します。

URLを伝えるだけで、簡単に制作したデザインをメンバーやクライアントに確認してもらうことができます。

FigmaはAdobe XDやSketchなどにも劣らない便利なデザインツールです。複数人で同時に作業ができるのでチームでの作業にも向いています。

直感的に、尚且つスピーディーに使うことができるのでワイヤーフレームの作成などに活かしてみてはいかがでしょうか。