Figma（フィグマ）とは？初心者でも分かるWebデザインツールの使い方

ウェブサイトのUIデザインやワイヤーフレームの作成するツールには無料・有料含め便利なツールがたくさん提供されています。
有名どころだと「Adobe XD」や「Sketch」などがありますが、Adobe XDの無期限無料プランは終了し、Sketchは有料プランしかありません。

今回紹介する「Figma（フィグマ）」は、「Adobe XD」や「Sketch」に引けを取らず、さらに便利な機能も備えたツールです。
Figmaがどのように役立つものなのか、使い方を初心者にもわかりやすいようにまとめてみました。

Figma（フィグマ）とは

Figma（フィグマ）とは、ブラウザ上で簡単にデザインができるツールです。
PCとネット環境さえ確保できれば、場所を選ばずに利用できるため、利便性が高くチーム体制での作業にも向いていて、
ハイスキルなデザイナーだけが使えるツールではなく、様々な役割の人が感性をアウトプットし共有できる仕組みが備わっています。
何より無料で利用できることが最大の特徴と言っても良いでしょう。

Figma（フィグマ）のメリット

フリープラン（無料）で利用できる

「Adobe XD」や「Sketch」といったデザインツールは有料プランしかありませんが、Figmaは無料で利用することができます。
それでいて、「Adobe XD」や「Sketch」と遜色ない機能を備えています。むしろ機能によってはFigmaの方が便利だったりします。

無料でも利用できるコンポーネント機能やプロトタイピング機能

Figmaの「コンポーネント機能」を使えば、ボタンやメニューなど頻繁に使う部品を簡単に配置できます。コンポーネントは一斉更新も可能であるため、チームで行う作業であっても、トンマナをそろえることができます。

ブラウザ上で利用できる

Figmaは、アカウントさえ取得していれば、ブラウザ上で利用することができるため、作成したデザインを制作時に使用したPCでなくとも、ログインすることで呼び起こすことができるため、オフィスや自宅で作業をスムーズに継続できます。

OS環境を選ばない

ブラウザ上で利用できるので端末にソフトウェアをインストールする必要がなく、データの受け渡しも簡単に行えます。また、MacやWindowsなどのOS環境を選ばずに使えます。

バージョン管理の手間が省ける

Figmaで制作したデータは、ブラウザ上で利用で擦るので常に最新バージョンが自動保存されます。そのため、誤って古いバージョンのデータを扱ってしまうなどのトラブルが起こりません。また、以前のバージョンからやり直したい場合は、変更日時を指定して戻ることも可能です。

共有して作業できる

1つのファイルを複数のメンバーで編集することができます。また、デザイナーのほか、ディレクターやクライアントなどの制作に関わる様々な役割の人とデータを共有し、相談しながら制作物を仕上げることができます。

複数人でリアルタイム編集が可能

Figmaは複数人によるリアルタイム編集が可能です。チーム内で画面を共有しながら、同時に編集を行うことができます。また、デザインした部品を使いまわすことのできる「コンポーネント」を用いて、複数のデザイナーで作業を分担し、作業のスピードを高められることもFigmaのメリットです。

コメント機能で情報共有ができる

Figmaのアカウントを持っているユーザーは、コメント機能が使用できます。デザインに対する意見や要望をコメントとして書き込めば、チーム内でスムーズな情報共有が可能です。コメントはデザイン制作の途中でも追加できます。

データを送付する必要がない

FigmaはWeb上のファイルにアクセスすれば内容が確認できるため、データファイルを送付する必要がありません。デザインを修正するたびに毎回、容量の大きいデータを送受信する手間を省くことができます。

Figma（フィグマ）の利用開始方法

Figmaは先のとおり、ブラウザ上で操作できるので、アカウントの開設をすれば利用できます。そのため、インストールせずに使うことも可能です。

Figmaのアカウント取得方法

まずは、Figmaのアカウントを取得しましょう。

1. 下記のサイトにアクセスしてください。

Figmaの公式ページはこちら

2. 画面右上の「Sign up」をクリック。
3. 入力フォームにメールアドレス、パスワードを入力し、「Create account」をクリック。
4. 名前（ニックネーム可）と職種を入力し、「Create Account」をクリック。

これでアカウント取得完了です。

Figma（フィグマ）の使い方

Figmaを使ってできることを、実際にいくつかの使い方を説明しながら紹介します。

Figmaでワイヤーフレームを作る

Figmaでは、UIデザインやワイヤーフレームを手軽に作成することができます。専用のツールを持っていない方の場合、ワイヤーフレームをパワーポイントやエクセルを使って作っている人も多いと思いますが、Figmaを使え流用雨になれば、図名の描写から配置揃えなどもスムーズに行えるようになります。多少の慣れは必要ですが、直感的な操作で使える部分が多いので、操作方法を習得するのに多くの時間は必要ありません。

一般的なデザイン作成のために必要なフレームは、すでにツール内で準備されているので選択のみで設置できます。例えば、iPhone Xのサイズのフレームを利用したい場合は、左上の赤枠で囲っているマークのメニューからFrameを選び、右側のメニューの「DESIGN」のタブから選ぶだけで設置することが可能です。

iPhone X以外に、Androidにも対応できます。当然、デスクトップPCのフレームも表示できますが、Apple Watchなどのフレームにも対応できる部分は対応幅の広さを感じます。

では、Figmaを使ったデザインの基本操作として、フレーム、グリッドの扱い方を解説します。

サイズを指定してフレームを作成

まずは、作成したいWebサイトやアプリの画面の大きさに合わせて、フレームを作成します。

画面左上にある＃マークを選択してから、画面中央部でドラッグすると、好きなサイズでフレームが作成できます。

また、画面右側に表示されるデバイス名を選択すれば、各デバイスの画面サイズでフレームを作ることが可能です。

フレームにグリッドを設定する

グリッドは、フレームを一定の間隔で分割する線を引き、要素を配置するための機能です。グリッドに沿って画像やテキストを配置することで、整ったデザインが簡単に作成できます。

先ほど作成したフレームを選択した状態で、画面右側の「Layout Grid」を選択すると、グリッドの追加が可能です。

追加したグリッドの左にある■が並んだマークを選択すると、グリッドの幅や線の色、透明度を変えられます。

また、1つのフレームに複数のグリッドを追加することも可能です。より複雑なデザインを制作する場合は、複数のグリッドを設定して作業を進めましょう。

次は、Figmaを使ったデザインの基本操作として、シェイプ、テキストの扱い方を解説します。

図形の配置もツールを選択するだけで可能です。図形にテキストを配置してレイアウト調整をすれば、それらしいデザインに見えてくることでしょう。図形は右上にあるメニューから四角図形アイコンをクリックすると、以下のように四角形や直線、矢印など色々な形状のオブジェクトを設置できます。

また、テキストの設置は右上のメニューから「T」のアイコンをクリックすると入力できるようになります。右側にあるメニューでフォントの種類やサイズ、センタリングなどの配置を調整可能です。

シェイプを配置する

Figmaでは、四角形や円形、線などの形をシェイプとして配置することができます。画面上部にある四角形マークのアイコンが、シェイプを配置するためのものです。右側にある矢印マークを選択すると、さまざまなシェイプが表示されます。

例えば、四角形を配置したい場合は「Rectangle」を選択してから、先ほど作成したフレーム内でドラッグします。画面右側のプロパティでサイズや位置、傾きを数値によって指定することも可能です。

プロパティ画面から、シェイプの塗り色や透明度、輪郭線も変更できます。

テキストを配置する

テキストを配置したい場合は、ページ上部のTマークを選択して下さい。この状態でフレーム内をクリックすると、テキストを入力できます。

フォントの種類や文字の大きさ、文字揃え、色などはプロパティで変更可能です。

このほか、写真やイラストなどの画像データを読み込みや、クリックに反応するアニメーションを設定することで、より高度なデザインの作成ができます。

複数のオブジェクトを選択してグループ化することや、コピー＆ペーストも可能です。ショートカットが充実しているので、慣れるほど使いやすく感じるでしょう。使い心地としては、パワーポイントをもっとデザイン制作寄りにした感覚です。

以下のような簡単なワイヤーフレームなら3分程度で作れるでしょう。右上にある三角マーク（カーソルを重ねるとPresentと表示されるボタン）をクリックすると、iPhone Xのフレームにあてはめたプレビュー画面を表示できます。

Figmaでプロトタイプ（カンプ）をつくる

デザインをよりWebらしく伝えられるようにできるのがプロトタイプです。プロトタイプは「試作品」といった意味であり、「カンプ」「デザインカンプ」とも呼ばれますが、ワイヤーフレームは各ページのレイアウトですが、プロトタイプでは完成時のイメージをより具体的にデザインにおこします。例えば、各ページデザインのイメージのほか、ページの遷移を確認できるようになるので、完成のイメージができる状態で確認作業ができるため、詳細を作り込んだ後に手直しが発生するリスクを減少させることができます。

プロトタイプの作成は、プロトタイプモードに切り替えて設定し、閲覧するデバイスの設定やスタートする画面の選択を行います。

各ページのボタンのリンク設定も可能なので、矢印をつかって視覚的にわかりやすくリンクをつなぐことができます。

また、各ページの中の細かなアクションも設定できるので、完成イメージをさらに具体化できます。アニメーションの挙動を確認できれば、実装時の伝達ミスなどを避けられます。

プロトタイプを動作させるには、前述したデザインの作成時のプレビューと同じように、画面の右上にある三角マーク（カーソルを重ねるとPresentと表示されるボタン）をクリックします。ボタンを押すとブラウザの別画面が起動し、プレビュー状態になります。プロトタイプをスムーズに確認することで、補正しなければいけない部分があれば、すぐに修正したりメモに残すことが可能です。

チームメンバーやクライアントと共有する

URLを伝えるだけで、制作したデザインを他の人に確認したもらうことができます。ファイルを書き出して、メールなどで送信するのは、手間がかかるものです。何より、何回も添付ファイルのやりとりをするのは、双方にとって面倒に感じるだけではなく確認ミスが生じることもあるでしょう。

Figmaの場合、URLを相手に伝えるだけの方が、圧倒的にスムーズなコミュニケーションが可能になります。デザインを見せるだけなら、アプリケーションに依存せず、アカウントの有無も関係ないので、クライアントに余分な作業をしてもらうこともありません。

共有するには、右上にある「Share」をクリックします。Figmaのアカウントを持っている人と共有する場合は、閲覧のみを許可するのか、編集も可能にするのかを選択します。Figmaに登録しているメールアドレスを入力して「Send invite」を押せば招待完了です。アカウントを持っていない人には、「Copy Link」を押してURLをメールやチャットなどで伝えましょう。

なお、Figmaで作成したデザインは、画面右上の「Share」ボタンからほかの人と共有できます。

Shareボタンを選択して表示される画面で、共有先のメールアドレスを入力してから「Send Invite」を選択してください。アドレス入力欄の右にある「can view」を「can edit」に変更すると、共有先からもデザインを編集できるようになります。

または、左下の「Copy link」をクリックすることでURLを取得し、チャットツールなどで相手に知らせることも可能です。

そして、他の人にデザインをチェックしてもらう際に大変役立つのがコメントツールです。*デザインの必要箇所に対して、コメントを付与できるので、イメージに書き込む必要もなければ、メールなどで説明することもありません。

データをPDF化する

UIやワイヤーフレームを作成し、それをクライアントに確認してもらう場合、データをPDF化すると便利です。メール添付やChatworkなどの手段ですぐに渡せるからです。FigmaにはPDFで出力する機能があります。PDF化いまや一般的な機能と思われがちですが、かなり使えます。ビジネス上、柔軟なコミュニケーションには、様々な人が使いやすい状態にファイルを変換することが欠かせないからです。

PDFファイルをエクスポートする方法は簡単です。PDFだけではなく、PNG、JPG、SVGファイルとして出力することもできます。以下の画面のように、右側のメニューの「EXPORT」から「PDF」を選択します。出力するページを指定して、保存場所を選択しましょう。

まとめ

今回はブラウザ上で使えるWebデザインツール「Figma」について詳しく紹介しました。

Figmaは無料で利用できるため、デザイナー以外の方でも取り組みやすいデザインツールです。また、ブラウザ上で操作できるため、PCの容量を消費しないことも魅力です。

デザインツールとしての制作機能、そしてチームで作業や確認が可能な共有機能、完成イメージが具体化するプロトタイプ機能を搭載しつつ、フリープランでスタートできるので、ぜひ活用してみてください。