【2026年最新版】Figmaの使い方・UIデザイン入門完全ガイド

公開日：2026/03/11　更新日：2026/03/11　

※本ページにはプロモーション(広告)が含まれています

「Figmaを始めてみたいけど、何から手をつければいいかわからない」「デザインツールを使ったことがないけど、UIデザインを学びたい」——そんな方に向けて、この記事ではFigmaの基本操作からUIデザインの入門的な考え方まで、丁寧に解説します。

Figmaは2026年現在、世界中のデザイナーに最も使われているUIデザインツールのひとつです。ブラウザで動作し、無料プランでも十分な機能が使えるため、デザイン初心者の方にも非常におすすめです。

この記事でわかること

Figmaとは何か・他のツールとの違い
Figmaアカウントの作成とプロジェクト開始方法
基本的な画面構成とツールの使い方
フレーム・図形・テキストの作成方法
コンポーネント・スタイルの活用法
プロトタイプ（画面遷移）の作り方
デザインを共有・書き出す方法

Figmaとは？なぜ人気なのか

Figmaは、ブラウザ上でUIデザインを作成・共有・プロトタイプを作れるデザインツールです。AdobeのXDやSketchと並ぶ代表的なUIデザインツールですが、以下の特徴から多くのチームに選ばれています。

Figmaが選ばれる理由

特徴	説明
ブラウザベース	インストール不要。ChromeなどのブラウザでURLにアクセスすれば使える
リアルタイム共同編集	複数人が同時に同じファイルを編集できる（Googleドキュメントのような感覚）
無料プランが充実	無料でも3プロジェクト・基本機能が使える。学習・個人利用には十分
豊富なプラグイン	コミュニティ製プラグインで機能を大幅に拡張できる
コミュニティが充実	Figma Community で多数の無料テンプレートやUIキットを入手できる
デベロッパーとの連携	デザイントークンやCSS値を自動生成し、エンジニアとの受け渡しがスムーズ

Figmaを始める準備

アカウントを作成する

ブラウザで figma.com にアクセスします
「Get started for free」 または 「無料で始める」 をクリックします
メールアドレスとパスワードを入力してアカウントを作成します（Googleアカウントでのサインアップも可能）
メール認証を完了するとFigmaにアクセスできます

デスクトップアプリとブラウザ版の違い

種類	メリット	デメリット
ブラウザ版	インストール不要、どのPCからでも使える	フォント周りに一部制限あり
デスクトップアプリ	ローカルフォントが使える、パフォーマンスが安定	インストールが必要

Figmaの画面構成と基本ツール

エディタ画面の構成

Figmaのエディタ（デザイン編集画面）は大きく4つのエリアに分かれています。

ツールバー（上部）: 描画ツール・テキスト・コンポーネント挿入などのアイコンが並ぶ
レイヤーパネル（左サイドバー）: ページ・フレーム・レイヤーの一覧を表示・管理する
キャンバス（中央）: デザインを実際に作業するメインエリア
プロパティパネル（右サイドバー）: 選択したオブジェクトのサイズ・色・スタイルなどを設定する

主要ツールの一覧

ショートカットキー	ツール名	用途
V	移動ツール	オブジェクトを選択して移動・変形する
F	フレームツール	フレーム（画面の枠）を作成する
R	長方形ツール	四角形を描く
O	楕円ツール	円・楕円を描く
T	テキストツール	テキストを入力する
P	ペンツール	自由な形のパスを描く
H	手のひらツール	キャンバスをスクロールして移動する
Z	ズームツール	キャンバスを拡大・縮小する

フレームを作成してUIデザインの基礎を作る

Figmaでのデザイン作業の第一歩は「フレーム」を作ることです。フレームはスマートフォンやPCの画面サイズを表すキャンバスのようなものです。

フレームを作成する手順

ツールバーの 「F」キー を押すか、フレームツールアイコンをクリックします
キャンバス上でドラッグして任意のフレームを作るか、右パネルから デバイスプリセット（iPhone・Androidなど）を選択します
プリセット選択で使えるサイズ例：
- iPhone 16 Pro: 393 x 852px
- Android: 360 x 800px
- Desktop: 1440 x 1024px
- Tablet: 768 x 1024px

フレーム内に要素を配置する

フレームを選択した状態で図形・テキストを追加すると、自動的にフレームの子要素として配置されます。フレーム内のオブジェクトはフレームに紐付けられ、フレームを移動するとまとめて動きます。

Auto Layout（オートレイアウト）で整列を自動化する

Figmaの「Auto Layout」は要素を自動的に整列・間隔調整してくれる非常に便利な機能です。

整列したい要素を複数選択します（Shiftを押しながらクリック）
右パネルの 「Auto Layout」 の「+」ボタンをクリックします（またはショートカット Shift + A）
縦方向・横方向・間隔・パディングを設定します

コンポーネントとスタイルでデザインを効率化する

コンポーネントとは

コンポーネントは「再利用可能なデザインパーツ」です。ボタン・入力フォーム・カードなどを一度作ってコンポーネント化すると、同じデザインを何度も繰り返し使えます。元のコンポーネント（マスターコンポーネント）を変更すると、コピーしたインスタンス全てに変更が反映されるため、デザインの一貫性を保てます。

コンポーネントを作成する方法

コンポーネントにしたいオブジェクト・グループを選択します
右クリック → 「コンポーネントの作成」 を選択します（またはCtrl/Command + Alt + K）
コンポーネントアイコン（菱形の中に◆）が付いたことを確認します

コンポーネントを使う（インスタンスを作成する）方法

コンポーネントを選択してCtrl/Command + D でコピーします（このコピーが「インスタンス」）
または左パネルの「アセット」タブからコンポーネントを探して、キャンバスにドラッグします

スタイルでカラー・フォントを一元管理する

スタイルは色・フォント・エフェクトを名前付きで保存する機能です。ブランドカラーや見出しフォントをスタイルとして登録することで、デザイン全体に一貫性が生まれます。

カラースタイルを作成する方法

色を適用したいオブジェクトを選択します
右パネルの「Fill（塗り）」の横の 「スタイルアイコン（四角が4つ）」 をクリックします
「+」 をクリックして新しいスタイルを作成します
スタイル名（例：「Primary Blue」「Text/Primary」）を入力して保存します

プロトタイプで画面遷移を作る

Figmaのプロトタイプ機能を使うと、ボタンをクリックすると次の画面に移動するといった画面遷移のシミュレーションを作れます。クライアントへのプレゼンや、ユーザーテストに非常に役立ちます。

プロトタイプを作成する基本手順

右パネルの上部で 「Prototype（プロトタイプ）」 タブに切り替えます
遷移元となる要素（例：ボタン）を選択します
要素の右端に表示される 丸いアイコン（接続ポイント） をドラッグして、遷移先のフレームに接続します
接続後、遷移の トリガー（On Click・On Hover など）と アニメーション（Dissolve・Slide In など）を設定します

プロトタイプをプレビューする

右上の 「▶ プレビュー」 ボタンをクリックします
設定したデバイスサイズでプレビュー画面が表示されます
実際にクリックしながら画面遷移を確認できます

デザインの書き出し（エクスポート）と共有

画像として書き出す

書き出したいオブジェクトまたはフレームを選択します
右パネル下部の 「Export」 セクションの「+」をクリックします
形式（PNG・JPG・SVG・PDF）と倍率（1x・2x・3x）を選択します
「Export」 ボタンをクリックしてファイルを保存します

デザインを共有する

右上の 「Share（共有）」 ボタンをクリックします
閲覧専用リンクを作成するか、特定のメールアドレスに共有します
コメント機能を使うと、デザイン上に直接フィードバックをもらえます

開発者向けにスペックを確認する

エンジニアにデザインを渡す際、Figmaの 「Dev Mode（開発モード）」 を使うと、CSS値・余白・フォントサイズなどを自動で確認できます。コードの受け渡しが大幅に効率化します。

Figma初心者におすすめのリソース

リソース	説明
Figma Community	無料テンプレート・UIキット・プラグインが多数。figma.com/communityでアクセス
Figma公式チュートリアル	figma.com/resources/learn-designで公式の入門コンテンツを学べる
YouTube	「Figma 初心者」「Figma チュートリアル」で多数の日本語解説動画が見つかる
Material Design / Apple HIG	GoogleのMD3、AppleのHuman Interface Guidelinesで良いUIデザインの原則を学べる

よくある質問（FAQ）

Q1. Figmaは日本語で使えますか？

A. Figmaのインターフェース自体は英語ですが、テキスト入力や日本語フォントの使用は問題なく行えます。2024年以降、一部の設定メニューなどが日本語化されているバージョンもあります。基本的なUIは英語ですが、主要な機能は短期間で慣れることができます。

Q2. 無料プランと有料プランの違いは何ですか？

A. 無料の「Starter」プランでは最大3つのドラフト（プロジェクト）を作成でき、個人学習や小規模プロジェクトには十分です。有料の「Professional」プランや「Organization」プランでは、プロジェクト数の制限なし・バージョン履歴の無制限保存・高度なチーム管理機能などが使えます。