【Figma入門】Figmaの使い方と基本機能を初心者でもわかりやすく解説！

Figmaの概要

Figmaがどのようなツールなのか、基本的な特徴から見ていきましょう。

Figmaとは

FigmaはFigma社が提供するクラウドベースのデザインツールです。ブラウザ上で動作するためインストール不要で利用を始められます。またダウンロードして使用するデスクトップアプリ版もあり、オフライン作業や動作の安定性を重視する場合はこちらを選ぶ人もいます。

Web、UI、モバイルアプリなど幅広い制作に対応し、個人から企業まで活用されています。

Figmaの特長

大きな特長は、複数人が同時に同じファイルを編集できるリアルタイム共同編集機能です。クラウド上にデータが保存されるため、端末を選ばず作業を継続できる点も評価されています。

近年はAI機能の実装が進み、テキストからのレイアウト生成など作業を効率化する仕組みがさらに増えています。

Figmaで作成できるもの

Figmaは一つのツールで複数の用途に対応できる汎用性が魅力です。

ワイヤーフレームの作成

サイトやアプリの骨組みとなるワイヤーフレームは、Figmaの基本用途の一つです。シンプルな要素を組み合わせるだけで情報設計の全体像を素早く可視化できます。

プロトタイプの作成

作成した画面同士をつなぎ、実際にクリックして遷移を確認できるプロトタイプも作成可能です。開発前に操作感を検証でき、手戻りを減らせます。

ホームページやWeb広告用のグラフィックデザインの作成

Web広告やランディングページ用のビジュアル制作にもFigmaは使われます。Figma 画像の扱いに慣れると、バナーなどの制作も効率化できます。

SNSへの投稿画像の作成

InstagramやXなどのSNS用画像制作にも向いています。テンプレート機能を使えば統一感のあるビジュアルを継続的に作りやすくなります。

プレゼン資料の作成

近年はプレゼン資料の作成にFigmaを活用するケースも増えています。デザインの自由度が高く、ブランドイメージに沿った資料を作りやすい点が支持されています。

Figmaの料金・プラン

Figmaには無料プランと有料プランがあります。無料プランでも基本的なデザイン作成や数ファイル程度の管理が可能で、個人利用や学習目的には十分です。チームでの本格運用やプロジェクト管理を求める場合は有料プランが選択肢になります。

2026年7月時点での料金表は以下の通りですが、料金体系は変更されることがあるため、最新情報は公式サイトで確認してください。

Figmaの使い方

ここからは実際にFigmaを使い始めるための具体的な手順を解説します。Figma 使い方の基本を押さえれば、初めてでも迷わず操作できます。

1.アカウントの作成とログイン

まずは公式サイトにアクセスし、アカウントを作成します。

• トップページで「無料で始める」を選択

• メールアドレスまたはGoogleアカウントで登録を進めます

• 登録完了後、ログイン画面からダッシュボードに進みます

  

2.画面構成を理解する

操作前に画面構成を把握しておくと迷いにくくなります。

• 左側にレイヤーパネルとファイル一覧が表示されます
• 中央のキャンバスエリアでデザイン作業を行います
• 右側のデザインパネルで選択要素のサイズや色を調整します

3.デザインを作る

基本的な図形やテキストを組み合わせてデザインを作成します。

• ツールバーから四角形やテキストを選択

• キャンバス上でドラッグして配置

• 右側パネルで色やフォントを調整し、必要に応じてFigma画像を挿入

  

4.Prototype（プロトタイプ）を作る

作成した画面同士をつなげ、実際の遷移を確認します。

• 「Prototype」タブに切り替えます。

• 遷移元の要素を選択し、矢印アイコンをドラッグして接続します。

• 再生ボタンから動作確認を行います。

  

5.出力する

完成したデザインは目的に応じた形式で出力できます。

• 出力したい要素を選択

• 右側デザインパネルで「エクスポート」の右の「+」ボタンから保存形式を選択

• 「エクスポート」ボタンで保存

  

6.共有する

作成したデザインはリンク一つで関係者と共有できます。

• 右上の「Share」ボタンをクリック

• 共有相手のメールアドレスを入力するかリンクを発行

• 閲覧のみか編集可能かの権限を設定

  

7.コメントを付ける

デザインへのフィードバックはコメント機能でやり取りします。

• ツールバーからコメントアイコンを選択

• コメントしたい箇所をクリック

• テキストを入力して送信

  

Figmaの便利な機能

基本操作に慣れたら、作業効率を高める機能も活用しましょう。

コメント機能

リモートワーク下でのフィードバックのやり取りに有効です。修正指示を該当箇所に直接残せるため、認識のズレを防ぎやすくなります。

コンポーネント機能

繰り返し使うパーツをコンポーネント化すると、一箇所の修正が全体に反映されます。ボタンやアイコンなど汎用性の高い要素の管理に役立ちます。

バリアブル機能

色やサイズを変数として管理できる機能です。デザインシステム構築時、一貫性を保ちながら効率的に調整できます。

開発モード（Dev Mode）

デザインからコードへの橋渡しを担う機能です。エンジニアがCSSの値やアセットを直接確認できるため、デザイナーとの連携がスムーズになります。

おすすめのプラグイン

プラグインによる機能拡張もFigmaの強みです。作業内容に応じて導入を検討してください。

Iconify

さまざまなアイコンセットを検索し、そのまま挿入できるプラグインです。アイコン探しの時間を大きく削減できます。

Find component

プロジェクト内のコンポーネントを検索できるプラグインです。大規模ファイルで特定要素を探す際に役立ちます。

LottieFiles

アニメーションを扱う際に使われるプラグインです。プロトタイプに動きを加えたい場合の選択肢になります。

他のツールとの違い

デザインツールにはFigma以外にも複数の選択肢があります。

1.AdobeXD

UI/UXデザイン向けですが、開発が縮小傾向にあります。また共同編集機能ではFigmaの方が充実しています。

2.Adobe Photoshop

写真編集に強みがある一方、UIデザインやプロトタイピングでは使い方が複雑になりがちで、Figmaの方が作業効率に優れる場面が多いです。

3.Adobe Illustrator

ベクターグラフィック制作に強い一方、Web・アプリUIに特化した機能はFigmaほど充実していません。

4.Sketch

Mac専用で、機能面ではFigmaと近いです。ただ、クラウド共同編集の手軽さではFigmaに軍配が上がります。

5.Canva

テンプレートを使った手軽な制作に強く、SNS画像などに適しています。しかしUIデザインの自由度ではFigmaの方が本格的です。

【豆知識】Figmaで作成できたデザインを復元する方法

Figmaはクラウド保存が基本ですが、ローカルにファイルをエクスポートすることもあります。このようなファイルを誤って削除してしまったとき、役に立つのがデータ復元ソフトのTenorshare 4DDiGです。

誤削除やフォーマットによって失われたPNGやPDFなどのファイルを、専門知識がなくても比較的簡単な操作で復元できる点が特徴です。

具体的な使い方は次のとおりです。

• Tenorshare 4DDiG を起動し、Figmaからエクスポートしたファイルが存在するハードディスクやパーティションを選択し、スキャンします。

  

• しばらく待つと、消してしまったファイルが表示されます。復元前に、画像、動画、ドキュメントなどのファイルをダブルクリックすることによりプレビューが可能です。

  

• 復元したいファイルを選択し、保存場所を選択します。例えばOneDriveまたはGoogle Driveなどのクラウドディスクに保存することを検討してください。

  

注意:

※データの上書きを防ぐため、元の保存場所とは異なるドライブや、OneDrive・Googleドライブなどのクラウドストレージを保存先に選ぶことを推奨します。

まとめ

Figmaは使い方が習得しやすく、無料プランでも本格的なデザイン制作が可能なツールです。

もしエクスポートしたファイルを誤って削除してしまった場合は、Tenorshare 4DDiGのようなデータ復元ソフトが助けになります。まずは実際にFigmaを開き、小さなデザインから触れてみることをおすすめします。