Figmaの基本的な使い方

本記事では、Figmaの基本的な使い方について詳しく解説します。

Figmaでできること

Figmaは、様々な側面をもったツールです。基本的な使い方を解説する前に、主な活用方法を確認しておきましょう。

Webデザイン

FigmaはレスポンシブなWebデザインの作成と編集が可能です。また、複数のデザインファイル内で再利用できるデザイン要素を登録できるコンポーネント機能が搭載されており、一貫性のあるデザインスタイルを容易に実現できます。

加えて、ブラウザ上でリアルタイムに共同作業が可能なのも大きな特徴の一つです。

UI/UXデザイン

FigmaはWebサイトやアプリケーションなどのUI/UXデザインにも特化したツールです。アニメーションやマイクロインタラクションの追加によってユーザーエクスペリエンスの向上も可能です。

プロトタイピング

Figmaはインタラクティブなプロトタイプの作成と共有が可能なツールです。画面遷移やユーザーのフローアクションのシミュレーションが可能なだけでなく、ユーザーテストやステークホルダーとのフィードバック収集することもできます。

ワイヤーフレームの作成

Figmaはワイヤフレームや画面遷移図の作成と共有が可能なツールです。そのためWebデザイナーだけでなく、Webディレクター、Webプロデューサー、エンジニアなどにも広く愛用されています。

その他

Figmaには、プレゼンテーションモードが搭載されており、デザインをクライアントにスライドショー形式でわかりやすくプレゼンテーションすることも可能です。

また、モックアップなどの画像素材を編集・加工することも可能です。こうした画像編集機能を利用して、（印刷業界的に決して推奨はされていることではありませんが）印刷用のデータを作成することも不可能ではありません。

このように、Figmaは様々な側面を持ったツールであり、多彩な機能が搭載されています。

Figmaの画面の各パーツ構成

使い方の説明で、Figmaの画面の各パーツの名称が出てきますので、これも確認しておきましょう。

基本的な操作方法として、各パーツ各メニューの機能を画像と表で簡単に説明します。

名称	説明
①ツールバー	フレームを作成・配置するツールなど、テキストを入力するツールなど、各ツールのアイコンボタンが配置されているバー。
②キャンバス	リアルプレビューで内容を確認しながらデザインを行なう作業スペースです。
③左サイドバー	レイヤーの設定、アセットの設定、ページの追加・削除などに関するパネルが表示されるエリアです。
④右サイドバー	デザイン、プロトタイプ、インスペクトの各設定パネルが表示されるエリアです。

ツールバーの内容についても以下の画像と表で簡単に説明します。

名称	説明
①メインメニュー	すべてのメニュー項目にアクセスできるメインメニューを表示されるアイコンです。
②移動ツール	「移動」「拡大・縮小」を行なう移動ツールです。
③リージョンツール	「フレーム」「セクション」「スライス」を行なうリージョンツールです。
④シェイプツール	「長方形」「直線」「矢印」「楕円」「多角形」「星」「画像/動画を配置…」を行なうシェイプツールです。
⑤作成ツール	「ペン」「鉛筆」など描画に関する作成ツールです。
⑥テキストツール	文字の入力、テキストフレームの作成を行なうテキストツールです。
⑦リソースツール	コンポーネントの作成、プラグインの設定、ウィジェットの作成・設定を行なうリソースツールです。
⑧手のひらツール	キャンバス全体の移動、キャンバス全体の拡大・縮小などを行なう手のひらツールです。
⑨コメントツール	コメントを入力するツールです。

Figmaの基本的な操作方法

ここからはFigmaの基本的な操作方法について解説します。操作の手順を確認する前に、Figmaは日本語に対応していますので、日本語化しておくことをおすすめします。その方法については本記事では割愛しますが以下の記事で解説しているので参考にしてください。

▷Figmaを日本語化する方法をマスターしよう!

ファイルを作成する

Figmaを起動すると表示されるホーム画面から、新規のファイル（アートボード）を作成する方法を説明します。

1.「デザインファイル」もしくは「FigJamボード」を新規作成

新規ファイルの作成は、画面上部にあるタブ右端にある＋マークをクリックするか、画面右上にある「＋デザインファイル」もしくは「＋FigJamボード」というボタンをクリックします。

「デザインファイル」は、UI/UXデザイン、ワイヤーフレーム、プロトタイピングなど、Figmaのメインとなるデザイン用のアートボードのファイルです。一方で「FigJamボード」とは、Figmaに搭載されているホワイトボード機能のファイルです。

本記事では、「デザインファイル」のアートボードを使って作業する方法をメインに紹介します。

画面上部にある＋マークをクリックした場合は、上の画像のような画面に遷移します。この画面にある「デザインファイルを新規作成」もしくは「FigJamファイルを新規作成」をクリックします。

2.新規のデザインファイル

上の画像は、新規に作成されたデザインファイルの画面です。

3.新規のFigJamファイル

上の画像は、新規に作成されたFigJamファイル（FigJamボード）の画面です。

4.Figmaのアイコンからファイルを新規作成

画面上部ツールバー左端にあるFigmaのアイコンをクリックし、表示されるメニューの中から、「ファイル」にある任意の項目を選択することでもファイルの新規作成ができます。

ここでは「デザインファイルの新規作成」を選択しておきましょう。

フレームを選択する

デザインファイルを作成できたら、アートボード上にフレームを追加して各種デザイン設定作業を行っていきます。以下がフレームの選択方法です。

1.フレームのアイコンをクリック

画面上部のツールバーにあるフレームのアイコン（井桁型のマーク）をクリックします。

2.フレームを選択

フレームのアイコンをクリックすると、右サイドバーにフレームの種類を選択するパネルが表示されます。このパネルに表示されているフレームの種類の中から、任意のものを選択します。

スマホ・タブレット・デスクトップなど端末の機種別にフレームが分類されていますので、プロジェクト内容に合わせて、必要なフレームを決定していきます。

ここでは、「iPhone１４」のフレームを選択してみましょう。

3.フレーム内にオブジェクトやテキストをレイアウトする

上の画像のように「iPhone１４」のサイズでフレームが作成できました。このフレーム内に、オブジェクトやテキストをレイアウトしていきます。

オブジェクト（図形）を作成する

フレームの準備できたので、次にオブジェクトを作成する方法を解説します。

1.シェイプツールから任意の図形ツールを選択

画面上部のツールバーから、シェイプツールのアイコンをクリックし、図形を作成するシェイプツール（長方形ツール、直線ツール、矢印ツール、楕円ツール、多角形ツール、星ツール、画像/動画を配置…がある）から任意のツールを選択します。

ここでは、長方形ツールを選択してみます。

2.オブジェクトを配置

長方形ツールでオブジェクトを描画し、フレームに配置します。

3.オブジェクトの調整・編集

作成した長方形のオブジェクトは、辺や角をクリックしてドラッグすることで形やサイズを変更できます。

また、オブジェクトを選択している状態では、ツールバーの中央にオブジェクト関連のアイコンが表示されます。この中からオブジェクトの編集（四角形の四つ角に小さな◯が組み合わされているマーク）をクリックします。

オブジェクトの編集のアイコンをクリックすると、左側ツールバーの項目が切り替わります。

このオブジェクトの編集で表示されるペイントバケツのメニューアイコンや、右サイドバーに表示されている「塗り」や「線」のパネルなどから、オブジェクトのカラーを変更できます。

また、シェイプツールにあるにある「画像/動画を配置…」を選択すると、オブジェクトに画像を配置することも可能です。

テキストを入力する

次にテキストを作成する方法を解説します。

1.テキストツールを選択

画面上部にあるツールバーからテキストツールのアイコン（Tのマーク）をクリックしてテキストツールを選択します。

2.作成したテキストフレームにテキストを流し込む

テキストツールでテキストフレームを作成します。作成したテキストフレームにテキストを入力もしくは予め用意したテキストをコピー＆ペーストで流し込むことで、テキストを配置していきます。

3.テキストの調整・編集

テキストの調整・編集は、右サイドバーに表示されるテキストパネルで、フォントの種類や、フォントのサイズなどの詳細な設定ができます。

その他のオブジェクト編集機能

Figmaには他にも、様々なオブジェクト編集機能が搭載されています。以下に主なオブジェクト編集機能を紹介します。

オブジェクトの移動

上の動画のように、画面上部ツールバーにある移動のアイコン（三角のカーソルのマーク）をクリックして、移動ツールを選択した状態でオブジェクトをクリックし、クリックしたまま動かすことでオブジェクトを移動することができます。

ガイドが表示されるので、パラメータ値を設定しなくても、感覚的な操作で整列されたレイアウトができるようになっています。

オブジェクトの複製

上の動画のように、オブジェクトをコピー＆ペーストすることで、オブジェクトを簡単に複製することができます。

また、オブジェクトをControlキーを押したままオブジェクトをクリック（右クリック）すると、オプションのメニュー項目が表示されるので、この中にあるコピーを選択することでもオブジェクトの複製ができます。

オブジェクトのグループ化

上の動画のように、複数のオブジェクトを選択した状態で、画面上部メニューバーにあるオブジェクトという項目をクリックし、表示されるメニューの中から「選択範囲をグループ化」を選択するとオブジェクトをグループ化できます。

オブジェクトとテキストをグループ化することも可能です。

コンポーネントの作成

コンポーネントとは、ボタンやヘッダー画像など、複数のデザイン間で再利用する構成要素のことを指します。

コンポーネントを作成・登録することで、デザイン作業の効率をアップできます。以下がコンポーネントの作成方法です。

1.コンポーネント化したいオブジェクトを選択

コンポーネント化したいオブジェクトやテキストを選択します。

2.メニューから「コンポーネントの作成」を選択

コンポーネント化したいオブジェクトやテキストを選択した状態で、画面上部にあるメニューバーからオブジェクトをクリックし、表示されたメニュー項目の中から「コンポーネントの作成」を選択します。

3.コンポーネントの追加

作成したコンポーネントを再利用するために、新たなフレームを追加しておきましょう。

画面上部ツールバーにあるリソースのアイコン（▢+◇▢が組み合わさったマーク）をクリックします。

リソースのアイコンをクリックすると、上の画像のようにリソースのメニューパネルが表示されます。このパネル上にあるタブメニューから「コンポーネント」を選択します。

「コンポーネント」を選択すると、ローカルコンポーネントという欄に、さきほど作成したコンポーネントが表示されますので、これを選択します。

アートボードの中央に、作成したコンポーネントが追加されます。

新しく作成したフレーム内に、コンポーネントを移動させて最初のフレームと同じ位置に配置できるように微調整します。

ページの追加

Figmaは同じアートボード内に、いくつかのフレームを組み合わせてワイヤーフレームやプロトタイプを作成することも可能ですが、対応機種が多い場合などはページ機能を使って機種別にページを分けてデザインするといった対応も可能です。

もちろん、機種別にページを分けるのは一例で、プロジェクトに合わせてプレゼンテーション用のページ、別バーションのデザイン用のページいったように、目的にあった使い方ができます。

以下がページの追加方法です。

1.ページにある＋マークをクリック

左サイドバーの上部に「レイヤー」と「アセット」というタブメニューがあります。このタブメニューと同じ欄に「Page（数字）」という項目があります。

この「Page（数字）」をクリックすると、折りたたまれていたページのパネルが表示されます。

ページを追加する場合は、ページパネル右上にある+マークをクリックします。

2.追加されたページを新たに作成

上の画像のようにページが追加されました。

様々なデザインバリエーションを展開するなど、用途別にページを分けることができます。

Figmaの便利な機能

オブジェクトの作成、テキストの作成など基本の使い方が確認できたところで、Figmaに搭載された便利な機能を解説します。

プレビュー機能

Figmaには、作成したデザインをライブプレビューできる機能が搭載されています。以下にその使い方を説明します。

1.プレビューのアイコンをクリック

画面上部にあるツールバー右端にあるプレビューのアイコン（▷マークもしくは▢に小さな▷マーク）をクリックします。

プレビューのアイコンをクリックすると、「新しいタブに表示」と「プレビュー」という項目が表示されるので、任意の項目を選択します。

2.「プレビュー」の表示

上の画像は、Webブラウザでどのように表示されるのかを確認できる「プレビュー」によるライブレビューです。

3.「新しいタブで表示」のプレビュー表示

上の画像は、各端末でどのように表示されるのかを確認できる「新しいタブで表示」によるプロトタイププレビューです。

コメント機能

Figmaは、作成したワイヤーフレームやプロトタイプを、エンジニアやWebディレクターといったデザイナーの協業者と共有するのにも役立つツールです。

共有機能の中でも、コメント機能は修正の指示や備考などを、他のユーザーと共有できる便利な機能です。以下がコメント機能の使い方です。

1.コメントの追加のアイコンをクリック

ツールバーにあるコメントの追加のアイコン（吹き出しのマーク）をクリックします。

2.コメントを追加・送信

コメントの追加のアイコンをクリック　すると、コメントツールにカーソル表示に切り替わるので、コメントを挿入したい箇所をクリックします。

挿入したい箇所をクリックすると、コメント入力欄が表示されるのでコメントを入力します。コメントの入力が完了したら、欄の右下にある矢印のアイコンをクリックしてコメントを送信します。

3.コメントの共有・確認

コメントを送信すると、他のユーザーにもコメントが共有され、共有されたアカウント側でコメントを確認することができます。

プロトタイピング機能

Figmaでできることのメイン項目の一つであるプロトタイピング機能についても、使い方を簡単に確認しておきましょう。

1.プロトタイプをクリック

右サイドバーの上部にあるタブから「プロトタイプ」のタブをクリックします。

2.オブジェクトやコンポーネントを選択して＋マークをクリック

「プロトタイプ」のタブクリックすると、プロトタイプのモードに切り替わります。モードが切り替わった状態で、オブジェクトやコンポーネントを選択すると、オブジェクトのフレーム上に青色の＋マークが表示されます。

この＋マークをクリックします。

3.矢印を任意の箇所にドラッグ＆ドロップ

＋マークをクリックした状態で、ドラッグするとインタラクションをつなぐ青い線で矢印が表示されます。

インタラクションとはユーザーが起こしたアクション（ボタンをタップするなど）に対して動作するリアクション（画面の遷移やメニューの表示など）全般のことを指します。

4.インタラクションの設定

インタラクションの次の移動先をドラッグ＆ドロップで設定すると、インタラクションの設定パネルが表示されます。このパネルで、インタラクションの詳細な設定が可能です。

例えば、画面を遷移する方法（アニメーション）の種類を選択できます。デフォルトは「即時」という種類になっているので、ここでは「スマートアニメート」という種類に変更してみます。

「スマートアニメート」には、さらに詳細なアニメーションの設定項目があるので、これを設定します。

画面が遷移したらホーム画面にもどるインタラクションも必要になるので、ここではヘッダー部分のコンポーネントをタップすると、ホーム画面に戻るインタラクションも追加しておきましょう。

5.「新しいタブに表示」でプレビュー表示

画面上部ツールバーの右端にあるプレビューのアイコン（▷マーク）をクリックし、「新しいタブに表示」という項目を選択します。

上の動画のように、インタラクションの設定をアニメーションのプレビューで確認できます。

Figmaの拡張機能

Figmaにはさまざまな拡張機能が搭載されています。以下に主な拡張機能を紹介します。

Figmaのプラグイン

Figmaはプラグインを追加することで、様々な機能拡張が可能となっています。

ワイヤーフレーム用のコンポーネントがセットになっているプラグインや、顔文字のプラグインなど便利なプラグインが多数開発・提供されています。

Figmaのライブラリ

Figmaにはライブラリ機能が搭載されています。ライブラリ機能を利用すれば、サイトのテーマカラー、フォントやボタンなどの各パーツデザインといった、デザインテーマ一式をライブラリとして登録・共有できるようになります。

Figmaのテンプレート

Figmaでは公式サイトから、予め用意されたデザインテンプレートをダウンロードして利用することができます。

FigJamボード

Figmaにはデザインファイル以外に、FigJamボードというファイルを作成することができます。このFigJamボードはホワイトボード機能です。

FigJamボードは、メンバーとのブレインストーミング、ミーティングの議事録、スケジュール管理など、デザイン工程で必要なコミュニケーションツールとして活用できます。

まとめ

ここで紹介した以外にも、Figmaには様々な機能が搭載されています。Adobeの傘下となったことで、今後益々、Webデザイン・アプリデザイン用のツールのにおいてデファクトスタンダードとなると予想されます。

まずは、本記事で紹介したメイン機能の使い方を参考にして、Figmaの基礎知識・基本スキルをマスターして行きましょう！

<a href="https://digitor.jp/textbook/figma_usage/">Figmaの基本的な使い方</a>