Figmaの使い方とは？基本や始めるための5つのステップを初心者向けに解説

Figmaとは

Figma（フィグマ）とは、アメリカのFigma, Inc.が開発・提供しているデザインツールのことです。デザインツールとは、パソコン上でデザインを形にするためのソフトウェアを指します。

Figmaの大きな特徴は、「開発チームとデザインチームの連携」を想定して設計されている点です。つまり、開発に携わるエンジニアや、デザインを専門にするデザイナーが共同作業できる場を提供してくれます。

とくに、ブラウザを通して使える点が大きな強みです。インターネットを介して離れたエンジニアやデザイナーがリアルタイムに連携でき、高品質なデザインの制作が可能となります。開発チームやデザインチームの方は、ぜひ有効活用したいツールです。

デスクトップアプリ版もある

Figmaは基本的にはブラウザベースですが、パソコンにインストールして使えるデスクトップアプリ版もあります。

WindowsやmacOSのパソコンにインストールすれば、ブラウザ版と同等の基本機能をオフラインでも利用できるため便利です。また、インターネット通信が発生するブラウザ版と比べると、動作がよりスムーズで快適な傾向にあります。

オフラインでも快適に作業したい場合は、デスクトップアプリ版を併用するのがおすすめです。ただし、デスクトップアプリ版にはパソコンのリソースを圧迫するといったデメリットもあることは心に留めておきましょう。

無料版と有料版の違い

Figmaには、無料版（スタータープラン）と3つの有料版があります。各プランの料金や主な機能を下表にまとめました。

※2024年12月時点の公式サイト情報にもとづいて記載しています。

無料版でもデザインに必要な基本機能は使えるため、個人・小規模チームであれば十分といえます。中規模以上のチームの場合や、開発・管理系の機能を充実させたい場合は、有料版の利用もおすすめです。

Figmaの代表的な使い方

Figmaには具体的にどのような使い方があるのか、イメージできない方もいるでしょう。Figmaの代表的な使い方は、主に次の3つです。

• ワイヤーフレームの作成
  
• プロトタイプの作成
  
• プレゼン資料の作成

それぞれ詳しく見ていきましょう。

ワイヤーフレームの作成

Figmaは、Webサイト制作における「ワイヤーフレーム」の作成に広く使われています。ワイヤーフレームとは、Webページの大まかな構成やレイアウトを視覚的に表現したものです。Webサイトの制作スタッフやクライアントと完成イメージを共有するうえで欠かせません。

Figmaを使えば、ボタンやアイコンといった表示要素を簡単な操作で配置したり、それらのスタイルを専用画面で調整したりできます。役立つテンプレートも豊富にあり、ワイヤーフレーム作成の効率化が可能です。

プロトタイプの作成

Figmaを使うことで、ワイヤーフレームよりも具体的な「プロトタイプ」の作成も可能です。Webサイト制作におけるプロトタイプとは、クリックやページ遷移といった動的な要素も含めた、Webサイトの具体的な試作品を指します。

Figmaは、プロトタイプの作成に役立つ機能も豊富です。たとえば、ボタンにアクションを埋め込むことで、クリック時にページ遷移を再現できます。プロトタイプの作成を効率化しつつ、より具体的なWebサイトの完成イメージを関係者と共有可能です。

プレゼン資料の作成

FigmaはWebサイト制作だけでなく、さまざまなビジネスにおけるプレゼン資料の作成にも使えます。図形やテキストなどを直感的な操作で配置し、視覚的に美しいスライドを作成可能です。

また、プレゼン資料の作成に適したテンプレートも豊富にあり、効率的に高品質なスライドを作成できます。営業担当者やマーケティング担当者など、さまざまな社会人がプレゼン資料を作成するシーンで役立つでしょう。

なお、エンジニアが仕様や設計の情報を可視化する際に作成する「UML」も、簡易的であればFigmaで作成できます。ただし、より高度なUMLを作成したい場合は、UML作成に特化した「FigJam」がおすすめです。

Figmaを活用するメリット

Figmaを活用するメリットは、主に次の3つです。

• ブラウザから手軽に使える
  
• 複数人での共同作業が可能
  
• バージョン管理が行える

それぞれ詳しく見ていきましょう。

ブラウザから手軽に使える

Figmaは主にブラウザベースのデザインツールであり、一般的なWebアプリと同じようにブラウザから手軽に使えます。パソコンにインストールする手間が発生せず、インターネットを介して最新の機能をいつでも利用できるのが強みです。

インターネット接続さえできれば、自宅やオフィス、コワーキングスペースなど、利用場所を問いません。また前述のように、デスクトップアプリ版でのオフライン作業も可能です。シーン・用途に応じて使い分けが可能な点もFigmaの魅力といえます。

複数人での共同作業が可能

Figmaは、複数人での共同作業を大きな強みとするデザインツールです。関係者間でのコミュニケーションやフィードバックを円滑に行えるため、開発チームやデザインチームの連携強化につながります。

たとえば、複数のデザイナーが1つのデザインを同時に編集することで、デザイン制作を効率化できます。また、デザイナーの制作物をエンジニアが手軽に閲覧し、必要に応じてコメントによるやり取りを行うことも可能です。

バージョン管理が行える

バージョン管理が行えることもFigmaの強みといえます。これにより、デザインファイルの変更履歴を正確に把握・管理することが可能です。

Figmaでは、デザインファイルの状態が30分ごとにチェックポイントとして記録されます。このチェックポイントは、各デザインファイルのバージョン履歴から参照でき、当時のデザイン状態を確認したり元の状態に復元したりすることも可能です。

このバージョン管理機能はFigma独自のもので、「Git」のようなバージョン管理ツールに依存しません。デザイン向けに最適化されたバージョン管理機能を使うことで、より効率的にチームでデザインを磨き上げていけます。

Figmaを始める3つのステップ

Figmaを使い始めるためには、アカウントの作成が必要です。ここでは、Figmaの始め方を3つのステップで簡単に紹介します。

1. アカウントの作成
   
2. メール認証の手続き
   
3. Figmaへのログインと初期設定

各ステップについて順番に見ていきましょう。

1.アカウントの作成

Figmaのトップページにアクセスし、「無料で始める」をクリックしましょう。

続いて、「Googleアカウントを使う方法」と「メールアドレスを使う方法」のいずれかを選択します。Googleアカウントを使う場合は、「Googleで続行」からGoogleアカウントでログインすればOKです。

メールアドレスを使う場合は、メールアドレスを入力して「メールアドレスで続行」をクリックしましょう。パスワードの入力を求められるため、Figma用のパスワードを設定・入力して「アカウントを作成」をクリックします。

2.メール認証の手続き

アカウント作成にメールアドレスを用いる場合は、メール認証の手続きも必要です。設定したメールアドレス宛にFigmaから送られたメールを開き、確認ボタンを押しましょう。

3.Figmaへのログインと初期設定

メール認証が完了すると、Figmaのログイン画面が表示されます。設定したメールアドレスとパスワードを用いてログインしましょう。

Figmaへのログインに成功すれば、基本的な開始手続きは完了です。初回ログイン後は初期設定として以下の質問に答えていきます。

• チーム名
  
• チームプランの選択
  
• 使用するテンプレートの選択

「チーム名」は共同で作業するメンバーがいる場合は入力します。共同で作業するメンバーがいない場合は「後で」をクリックしましょう。続いて「チームプランの選択」では、無料版と有料版のどちらを使用するのかを選びます。変更することも可能なため一旦無料版を選択しておくと無難です。

最後の「使用するテンプレートの選択」では、「Figma」「FigJam」「テンプレートを使用しない」から選ぶことが可能です。迷った場合はテンプレートを使用しないを選択しましょう。全ての選択が終了するとホーム画面に遷移します。

Figmaの基本的な使い方

Figmaを使い始める準備が済んだ後は、実際に使ってみましょう。ここでは、Figmaの基本的な使い方を、次の4つに分けて紹介します。

• デザインファイルの作成
  
• フレームの作成
  
• オブジェクトの配置
  
• スタイルの調整

今回は、ワイヤーフレームを作成する場合を想定して解説していきます。

デザインファイルの作成

まずは、デザインファイルを作成しましょう。Figma画面右上の「Create new」→「Design file」を選択すると、デザインファイルを作成できます。

デザインファイルを作成すると、以下のような画面が表示されます。この画面で、デザインファイル内にデザインを追加していくわけです。

なお、作成時点のファイルは自分にしか見えません。チームメンバーに公開したい場合は、画面右上の「Share」から共有しましょう。

フレームの作成

Figmaでワイヤーフレームなどのデザインを作成する際には、「フレーム」を作成します。フレームは、Webページやアプリ画面の大枠となるものです。ワイヤーフレームを作成する場合、フレームの上にボタンやアイコンなどを配置していきます。

フレームは、「♯」のようなマークを選択することで作成可能です。マウスボタンを押しながらドラッグすると、以下のようにフレームが作成されます。

オブジェクトの配置

作成したフレームの上に、ボタンやアイコンといったオブジェクトを配置していきます。ワイヤーフレームを作成する場合、さまざまなオブジェクトを配置し、Webページの構成やレイアウトを可視化します。

Figmaでオブジェクトを配置する際には、ツールバーを使うのが基本です。配置したいオブジェクトを選択して、フレームと同様の操作を行うことで配置できます。

オブジェクト配置に役立つツールバーの基本的な機能は以下のとおりです。配置前に確認しておきましょう。

スタイルの調整

配置した各オブジェクトに対して、スタイルの調整を行います。オブジェクトの配色やフォント、位置などを整え、よりデザインを洗練させます。ワイヤーフレームの作成では厳格な調整は行わないことも多いものの、基本的なスタイルは設定しておきましょう。

Figmaではオブジェクトを選択し、右に表示されるプロパティパネルからスタイル調整が可能です。設定項目は多岐にわたるため、さまざまなスタイルを試してみてください。

Figmaを有効活用するためのポイント

Figmaを有効活用するために、次のポイントを2つ押さえておきましょう。

• プラグインを活用する
  

• ショートカットキーを覚える

   

プラグインを活用する

Figmaにはさまざまなプラグイン（拡張機能）があります。用途に合わせたプラグインを活用することで、Figmaをより快適に使うことが可能です。Figmaで使える代表的なプラグインを下表にまとめました。

導入したいプラグインがある場合は、各プラグインの詳細ページからインストール可能です。プラグイン導入後にFigma画面左部の「Plugins」から利用できます。

多くのプラグインは無料で利用できるため、さまざまなものを試してみましょう。

ショートカットキーを覚える

Figmaにはショートカットキーも多数用意されています。よく使うショートカットキーを覚えることで、より作業スピードを高めることが可能です。代表的なショートカットキーを下表にまとめました。

Figmaのショートカットキーは非常に多く、上記はごく一部にすぎません。ショートカットキーを調べたい場合は、Ctrl + Shift + ?（またはCmd + Shift + ?）を押して一覧で調べてみましょう。

まとめ

Figmaとは、開発チームやデザインチームの共同作業に適したデザインツールです。ワイヤーフレームやプロトタイプ、プレゼン資料など、さまざまなものを作成できます。ブラウザから手軽に使えてバージョン管理機能もあり、とても便利なツールといえます。

Figmaには非常に多くの機能があり、すべてを最初から使いこなすことはできません。デザインのなかで積極的にFigmaを使いながら慣れていきましょう。まだFigmaを使い始めていない方は、今回の内容をぜひ参考にしてください。