FigmaはWebブラウザ上で動作する人気のデザインツールで、UI/UXデザインやWebサイト制作、アプリ開発など幅広く活用されています。特に複数人でのリアルタイム共同編集ができることがメリットとして広がりました。
しかし、初めてFigmaを使う人にとっては「基本操作がわからない」「チームでの活用方法がわかりにくい」と感じられるかもしれません。本記事では、Figmaの基本操作から共同編集の方法まで、初心者でも理解できるようにステップごとに解説します。
Figmaとは
Figma（フィグマ） とは、ブラウザ上で動作するクラウド型デザインツールです。UI/UXデザイン、Webサイト、アプリのプロトタイプ作成などに使われ、複数人でリアルタイムに共同編集できるのが大きな特徴です。
【Figmaの主な特徴】
- クラウドベース
インストール不要で、どの端末からでもアクセス可能 - リアルタイム共同編集
Googleドキュメントのように、複数人で同時にデザイン作業が可能 - プラットフォーム非依存
Windows、Mac、Linux、スマホでも利用できる - 豊富なデザイン機能
ベクター編集、コンポーネント作成、プロトタイピング、プラグイン対応など
Figmaは、誰でも簡単にデザイン作業ができ、チームでの共同制作にも強いクラウド型デザインツールとして人気を集めました。ブラウザだけで使えるため、場所や端末を問わず効率的にデザイン作業を進められます。
Figmaの始め方
ここでは、Figmaをこれから使い始めたい人向けに基本的な登録フローを解説します。Figmaを始めるときに押さえておきたい、基本の考え方や準備を中心に紹介していくのでご参考ください。
アカウント作成
Figmaを使い始めるには、まずアカウントを作成する必要があります。アカウントがあれば、ブラウザやアプリからログインしてデザインを作成・保存したりチームで共有したりできます。
- Figma公式サイトにアクセス
- 「Sign up」または「アカウント作成」をクリック
- メールアドレスまたはGoogleアカウントで登録
- 必要情報を入力して登録完了
- 名前やパスワードを設定し、利用規約に同意
- メールで本人確認
- 登録確認メールが届く場合は、リンクをクリックしてアカウントを有効化
基本機能は無料で利用できるので、まずはお試しで始めてみてもよいでしょう。
ログイン
- Figma公式サイトにアクセス
- 「Log in」または「ログイン」をクリック
- 登録済みのメールアドレスとパスワードを入力
- ログイン完了
- ダッシュボードが表示され、作成済みファイルやチームプロジェクトにアクセスできる
GoogleアカウントやSlackアカウントで登録した場合は、アカウントでのログインも可能です。また、Webブラウザ版、Windows/Macアプリ、モバイルアプリすべて同じアカウントでログインできるので複数のデバイスで使いたいときにも便利です。
日本語化の設定
Figmaは英語表示がデフォルトですが、日本語に設定することでメニューや操作ガイドを日本語にできます。特に初心者や英語に不慣れな方は、日本語に設定しておきましょう。
- Figmaにログイン
- 右上のプロフィールアイコンをクリック
- 「Settings（設定）」を選択
- 「Language（言語）」の項目を探す
- 「日本語」を選択
- 変更を保存すると、日本語表示に切り替わる
設定後すぐにメニューや操作ガイドが日本語表示になり、英語表示に戻すことも可能です。操作メニューやツールチップが日本語で表示されるため、初心者でも迷わず操作できます。
Figmaの基本的な使い方
ここでは、Figmaを初めて使う人向けに、基本的な操作や機能の使い方を解説します。具体的なデザイン作業に入る前に、新規ファイルの作成、フレーム（Frame）の作り方などをおさえておきましょう。
新規ファイルの作成
Figmaでデザインを始めるには、まず新規ファイルを作成する必要があります。新規ファイルは、個人作業でもチーム作業でも基本となる単位です。
- Figmaにログイン
- ダッシュボードから「新規ファイル（New File）」をクリック
- ファイル名を設定
「Templates」から既存のデザイン構成を活用して効率的に作成することも可能です。チームプロジェクト内で作成すると共有が簡単になるので活用してみましょう。
フレーム（Frame）の作り方
フレーム（Frame）は、Figmaで デザインの土台となる領域です。画面全体やセクション、コンポーネントの背景として使うことが多く、レイアウト管理やオブジェクト整理に欠かせません。
- Figmaでファイルを開く
- 左上のツールバーから「Frameツール（ショートカット：F）」を選択
- キャンバス上でドラッグしてフレームを作成
- 右側のプロパティパネルでサイズや位置を調整
フレームはコンテナとして働き、配置した図形やテキストをまとめる役割を果たします。フレームのサイズや自動レイアウト機能を活用すると、画面サイズに応じたデザイン調整がしやすくなるので活用しましょう。
ショートカット「F」を使えば素早くフレームを作成でき、デザイン整理やレイアウト調整に役立ちます。
図形を描画する
Figmaでは、四角形・円・線などの基本図形を自由に描画できます。図形はUIパーツやアイコン、背景要素などさまざまなデザインに活用できます。
- Figmaでファイルを開く
- 左上のツールバーから「図形ツール」を選択
- キャンバス上でドラッグして図形を作成
- 右側のプロパティパネルでサイズや色、境界線（Stroke）を調整
四角形（R）、円（O）、直線（L）などのツールがあるので、デザインに合わせて使い分けましょう。ドラッグ中にShiftキーを押すと、正方形や正円など比率を固定できます。
描いた図形はサイズや色を自在に変更でき、他の図形やフレームと組み合わせることで効率よくデザインを構築できます。
テキストを配置する
Figmaでは、見出し・本文・ボタンラベルなどのテキスト要素を自由に配置して、デザインに組み込めます。テキストはUIデザインの重要な要素で、読みやすさやデザインの統一感に直結します。
- Figmaでファイルを開く
- 左上のツールバーから「Textツール（ショートカット：T）」を選択
- キャンバス上をクリックしてテキスト入力
- 右側のプロパティパネルでフォント、サイズ、色、行間などを調整
キャンバス上をクリックする際、ドラッグすると複数行のテキストボックスが作成できます。テキストスタイル（Text Style）を作ると、フォントや色の統一が簡単です。
まとめ
Figmaはブラウザ上で使えるクラウド型デザインツールで、個人でもチームでも効率的にデザイン作業を進められるのが大きな特徴です。本記事では、Figmaの基本操作としてアカウント作成やログイン、日本語化設定、新規ファイル作成、フレームや図形の作成、テキスト配置などを解説しました。
また、Figmaの強みであるリアルタイム共同編集を活用することで、チームでのデザインレビューや修正作業がスムーズに行えます。基本操作を押さえ、効率的なデザイン作業を始めてみましょう。
Figma使い方に関する重要用語
| 用語 | 説明 |
| Figma | 無料で使えるデザインツール。クラウドベースで動作するUI/UXデザインツールとしても有名。 |
| フレーム（Frame） | Figmaで デザインの土台となる領域。画面全体やセクション、コンポーネントの背景として使うことが多い。 |
