Figmaとは？基本的な使い方やリモートでの活用法などご紹介

UIデザインやワイヤーフレーム作成に利便性の高いツールは、AdobeXDやSketchなどがあります。
しかし数多く居るWebデザイナーの中には、もっと便利で操作性が高いツールを求めている方も、いるのではないでしょうか？
今回は「Figma」という、便利なWebデザインツールの使い方やリモートワークでのメリットなどを解説します。

Figmaとは

「Figma」はWebブラウザ上で簡単にデザインができるツールです。

ブラウザでデザインの閲覧・編集ができ、1つのファイルを複数人で共有することも可能なので、チーム内での作業に適しています。

Figmaには、Webデザインにおいてのチーム作業に必要な複数の機能がひとつに集約されており、以下の作業をFigmaだけを使っておこなうことができます。

• デザイン作成
• プロトタイプ作成
• デザイン共有
• アニメーション作成
• デザイン提案資料提示

また、Figmaは「Starter」プランであれば無料で使えるので、使用感を気軽に試せる点も魅力です。

Figmaのリモートワークにおけるメリット

Figmaの特徴として挙げられるのが、「ブラウザ上でデザインを閲覧・編集できる」点と「複数人でファイルを共有できる」という点です。

Figmaがもつこれらの特徴は、特にお互いに遠隔で業務をおこなうリモートワークにおいて、最大限発揮されます。

Figmaのデータ共有機能がリモートワークに便利な理由

Figmaのファイル共同編集、ファイル共有機能がリモートワークに便利な理由は、以下のとおりです。

• 環境に依存せずに使える
• リアルタイム共有が可能
• ファイルごとの履歴管理が可能
• 公開設定と権限管理がファイルごとに可能
• チーム作業の連携とコミュニケーションが簡単

環境に依存せずに使える

FigmaはWebブラウザ上でデザインの閲覧・編集が可能なツールです。

そのため、インターネット環境さえあれば誰でも使用できるという特徴があり、ローカル環境にアプリケーションをダウンロードする必要がないので、パソコンの容量を圧迫しないというメリットにもつながっています。

リアルタイム共有が可能

Figmaはファイルを複数人でリアルタイムに共有することが可能です。

共同編集時のタイムラグはほとんどなく、他ツールも併せて使っているときに起こりがちな、データ競合による編集内容の意図しない消去が起こりにくくなっています。

複数の機能がFigmaに集約されていることから、確認するツールもひとつだけで済みます。

デザイナーがオンライン会議で作業中の画面を見せつつ、リアルタイムでデザインをすることもできるので、新人を育成時のレクチャーにも使用することが可能です。

ファイルごとの履歴管理が可能

Figmaはファイルごとに履歴管理ができ、自動保存記録や、手動保存したデータへのタイトルとメモを残すこともできます。

そのためFigmaでは開発段階ごとの更新履歴の管理が簡単で、ローカルにデータを置く必要性も少なくなり、より快適な環境でデザイン作業をしやすくなっています。

公開設定と権限管理がファイルごとに可能

Figmaでは、プロジェクトやファイルごとの公開設定と権限管理をおこなえます。

ファイル公開の設定はリンクを知っている全員、または招待した相手から選択でき、権限管理も編集者と閲覧者の2種類から選択可能です。

権限設定を閲覧者にした場合、その参加人数は無制限なので、ディレクターやクライアントなどへデータを共有することもできます。

チーム作業の連携とコミュニケーションが簡単

Figmaにはチームでのデザイン作業に必要な機能が集約されていることから、チーム作業における効率アップが期待できます。

また、複数のツールを使う場合とは異なり、ひとつのツールを使用するだけで済むことから、データ更新にタイムラグが発生しません。

そのためFigmaでは、常にチーム内の誰もが最新のデータにアクセスできる環境が整っており、開発メンバー同士やディレクターと開発メンバー間などの連携向上につなげられます。

Figmaの使い方

ここからは、Figmaの具体的な使い方について解説していきます。

Figmaのアカウント取得

Figmaの公式ページにアクセスし、以下の手順でアカウントを作成します。

1. 画面左上のSign upをクリック
2. 2つの入力欄にメールアドレスとパスワードを入力
3. Create accountをクリックし、続けて表示されたYour name欄に名前を入力
4. Create accountをクリックする

アカウントを作成した後は、Figmaを使用できるようになります。

デザインの作成方法

ここでは、Figmaを使用してデザインを作成する方法について解説していきます。

ワイヤフレームやプロトタイプの作成などの基本から、データ共有方法やPDF化などについても解説します。

新規ファイルの作成

Figmaを使って新規デザインファイルを作成する場合、まずは画面メインカラム左上の「New design file」をクリックして新規ファイルを作成します。

ワイヤーフレーム、図形、テキストの作成

まずは、Figmaを使ったワイヤーフレームの作成です。

画面左上の＃マークを選択し、画面中央部でドラッグすることで、任意のサイズでワイヤーフレームを作成できます。

ワイヤーフレームをつくると、画面右側のサイドバーにデバイス名が表示されるので、ここから任意のデバイス名を選択することで画面サイズごとのワイヤーフレームをつくれます。

また、ワイヤーフレームにグリッドを設定するためには、フレームを選択した状態で画面右側の「Layout Grid」をクリックします。

四角形や円形といった各種図形を配置するには、画面上部の四角形のアイコンをクリックし、表示される図形から配置したいものクリックしてからフレーム内でドラッグします。

配置した図形は、画面右側のサイドバー内のプロパティ項目から、サイズ、位置、傾きや透明度などを設定可能です。

また、ページ上部のTマークを選択してフレーム内でクリックをすると、テキスト入力欄が表示され、テキストを入力できます。

こちらも画面右側のプロパティ項目から、フォント種類、サイズ、色などを設定可能です。

プロトタイプの作成

プロトタイプは、画面右側の「Prototype」を選択し、Figmaをプロトタイプモードに切り替えることで作成できます。

デバイスやスタート画面の設定はサイドバーからおこなうことができ、リンク設定などは矢印を使って視覚的におこなえます。

チームメンバーとデータを共有

Figmaでチームメンバーとデータを共有するには、画面右上の「Share」をクリックします。

Figmaのアカウントがある人と共有する場合は、閲覧だけか編集もできるようにするかを選択可能です。

アカウントがある人とデータを共有するには、登録メールアドレスを入力して「Send invite」を押すことで、招待ができます。

Figmaのアカウントがない相手に対しては、「Copy Link」を押してURLをメール等で伝えます。

データのPDF化

データをPDF化するには、右側のサイドメニューの「EXPORT」から「PDF」を選ぶことでできます。

また、「EXPORT」からPNG、JPG、SVGファイルなどの画像ファイルを選び、出力することもできます。

画面幅によるデザインのプレビュー切り替え

画面幅ごとのデザインを確認したい場合は、プレビューを切り替えます。

左側のサイドメニューの「Layers」内の「Pages」でPC、スマホのフレームを分けることができます。

また、「Prototype」を選ぶと、実際のデバイスごとの画面幅の場合を確認することが可能です。

プラグインを使う

Figmaはプラグインを使用して、さらなる機能を追加することができます。

公式サイトの「Community」からプラグインを選択し、Installをクリックすることでインストールできます。

Figmaにインストールしたプラグインは、画面右端の「メニュー」をクリックし、「plugin」を選択して、一覧の中から使用可能です。

まとめ

Figmaはリモートワークなど、複数での共同作業において便利なWebデザインツールで、UIデザイナーにとって利便性の高い機能を数多く備えています。

料金無料で使用できるので、興味のある方はお試しで使用してみてはいかがでしょうか。