【初学まとめ】Figma操作の基本の「き」

はじめに

Webアプリ開発の学習を進める中で、

「機能は決まったけれど、画面が頭の中でしかイメージできない」
「とりあえず作り始めたら、どんどん崩れてしまった」
「作りたいものの具体的なイメージが湧かない」

という経験はありませんか？

本記事は、「デザインやfigmaを極める」ためのものではありません。
初学者がアプリを作る際に、最低限知っておくと開発がスムーズになるであろう操作をまとめています。

特に、以下のような方を想定しています。

・カリキュラムにFigmaがないので独学で触れたい
・デザインの経験はないけど、画面を整理したい
・ノートでメモすると実装時に迷子になる

Figmaとは？

一言で言うと、
アイデアを素早く形にし、共有できるオンラインの画面設計ツール　です。

デザインツールというイメージが強いですが、プログラミング学習者にとっての役割はもっとシンプルで実用的です。

• コードを書く前に画面の流れを整理できる
• チームメンバーや講師に仕様を共有しやすい
• 変更があっても即修正できる（消しゴム不要）
• URLひとつでレビューしてもらえる

具体的な用途例

初学者がfigmaを使用するシーンとしては主に以下のような場面で、
アプリ制作の流れに沿って、Figmaを活用するシーンを整理すると以下の順になります。

フェーズ	活用内容	目的
アイディアスケッチ	とりあえず思いついた画面や機能を“箱と文字”でスケッチしておく	発想を可視化し、方向性を掴む
ユースケース図	使う人とアクションの整理	誰が何をするのか明確にする
サイトマップ	ページ階層の整理	必要な画面と構成を把握する
画面遷移図	各ページ間の動線を整理	操作フローを確認し、迷いをなくす
ER図	テーブルと関係を整理（図だけ作る場合）	データ構造とつながりを整理
ワイヤーフレーム	UI構造だけ決める（色不要）	画面の骨組みと情報配置を決める
モック（簡易デザイン）	シンプルな見た目を作る	イメージを共有し、仕様精度を高める

ポイント:
上から順に進めると「思いつき → 構造 → 動線 → データ → 画面」へ自然に設計が進み、手戻りが少なくなりそうです。

また、Webブラウザで動くため、PCがあればすぐ使える点も初心者向きです。
（アプリ版もあります）

Figmaのファイル構造

Figmaでは、プロダクトやデザインデータを階層的に管理できます。
※仕様変更やUI変更がある可能性があるため、最新の挙動は実際に触ってみてください。

■ 無料プランについて
無料プランでは以下の利用が可能です。
・チーム：1つまで
・チーム内のプロジェクト：1つまで
・プロジェクト内のファイル：3つまで
・ファイル内のページ：3つまで

＊Drafts（下書き領域）ではファイルを無制限に作成できるようです👀

Figmaの基本画面と機能説明

ホーム画面は以下のようになっています。

まずは 【チーム】 を作成後、右上の 【＋プロジェクト】 を選択し、　
【デザイン】　を選択しましょう。

次に、figmaの基本画面と機能の説明です。

Figmaは大きく分けて以下の4つのエリアで構成されています。

• 左：ファイル・ページ管理エリア
• 中央：キャンバス（作業スペース）
• 右：プロパティパネル
• 下：ツールバー（操作ボタン）

左：ファイル・ページ管理

■ 役割
プロジェクト、ファイル、ページ、レイヤーの管理を行うエリアです。
主に以下を確認・操作します。

• Project：アプリ / チーム / 開発単位でのフォルダ管理
• File：プロダクトごとの設計ファイル
• Page：同ファイル内で作業内容を分ける（遷移図 / ワイヤー / コンポーネントなど）
• Layer：オブジェクト階層（UIパーツ）

（使用例）

• project：アプリごと/チームごと/プロジェクトごと　等
• file：ひとつのプロダクトの設計書/1つのデザインテーマごと　等
• page：同じアプリの中で作業内容を分ける

Project：卒業制作
 └ File：アプリ設計
     ├ Page：画面遷移図
     ├ Page：ワイヤーフレーム
     └ Page：コンポーネント

Project：個人開発
 └ File：全部まとめ（1ファイル）
     ├ 画面遷移図
     ├ ワイヤー
     └ UIパーツ

中央：キャンバス

• 実際に画面（Frame）を置いてUIを作る場所です。
• ドラッグで移動しながら画面を横に並べて遷移を確認できます。

右：プロパティパネル

• Design：サイズ、余白、色、文字、Auto Layoutなど
• Prototype：画面遷移の設定
• Code：スタイル確認（TailwindやCSSの参考に）

下部：ツールバー

よく使う操作とショートカット

機能	ショートカット
画面（Frame）作成	F
四角形作成	R
テキスト	T
移動	V
コメント	C
Prototype	P または右側タブ

最初は F → R → T の流れを覚えるとスムーズではないでしょうか！

使い方イメージ

Step1：Frameで画面を置く

• F で画面枠
• iPhoneサイズを選択
• 例：ログイン → ホーム → 詳細

Step2：Rで四角、Tで文字

• ボタン、ヘッダー、テキストは四角＋文字でOK
• 色は後で。まずは構造！

Step3：Prototypeで矢印（遷移）を引く

ログイン → ホーム
ホーム → 詳細
詳細 → 戻る

セクション分け例
・フローごとに画面をまとめたいとき

[Section: 会員登録フロー]
 ├ Frame：メール入力画面
 ├ Frame：認証コード入力画面
 └ Frame：基本情報入力画面

・ひとつの機能の「状態違い」をまとめたいとき

[Section: 投稿画面]
 ├ Frame：入力前
 ├ Frame：入力中
 └ Frame：投稿完了メッセージ

・モバイル × PC 並置のとき

[Section: ホーム画面]
 ├ Frame：Smartphone
 └ Frame：Desktop

・バージョン・案比較のとき

[Section: ホーム案比較]
 ├ Frame：案A
 └ Frame：案B

・開発工程と紐づけて管理する時

[Section: MVP版]
 ├ Frame：ホーム
 └ Frame：詳細

[Section: 2ndリリース]
 ├ Frame：ホーム改善版
 └ Frame：詳細改善版

キャンバス上に作成したアイテムの修正をする

Figmaでは、キャンバス上に置いたフレーム、四角（Rectangle）、テキストなどのアイテムを、後から自由に編集できます。
ここでは、基本的な修正方法をまとめます。

■ 位置を変更する（ドラッグで移動）

• アイテムをクリック → ドラッグ
  Shift を押しながらドラッグすると、真横・真上へまっすぐ移動できます

ショートカット

操作	キー
移動ツール	V
1pxずつ移動	矢印キー
10px移動	Shift + 矢印

■ サイズ変更（枠を引っ張る）

• アイテムの端をドラッグして拡大縮小
• Alt 押しながらドラッグ：中心から広がる
• Shift 押しながら：縦横比を固定
• よく使う場面
• ボタンの横幅を伸ばす
• ページ枠（Frame）の高さ調整

■ テキスト編集

• テキストをダブルクリック
• 文字を入力／修正
• ショートカット
• 操作 キー
• テキストモード T
• 確定して選択モードへ戻る Esc
• 文字は文章ではなくラベルを書くイメージ（例：”Login” “投稿ボタン”）

■ スタイル変更（右メニュー）

右側のプロパティパネルから編集できます。

項目	内容
Fill	色
Stroke	線（枠線）
Corner radius	角丸
Text	フォントサイズ／太さ／行間
Auto Layout（推奨）	余白・揃え方

ワイヤーフレーム段階では、色はグレー1〜2色で十分
迷うより、まず形にすることが大事です。

■ 削除・複製

操作	ショートカット
削除	Delete
コピー	Cmd/Ctrl + C
ペースト	Cmd/Ctrl + V
複製	Cmd/Ctrl + D or Alt + ドラッグ

ボタンや画面は複製して使い回すのがおすすめです！

■ レイヤー順（前後関係）を変更

オブジェクトを前面／背面に移動できます。

操作	ショートカット
前面に移動	] or Cmd/Ctrl + ]
背面に移動	[ or Cmd/Ctrl + [

画像の上にテキストを載せるときなどに使います。

小技

「8px単位で作ると崩れにくい」のがFRONT/UI界隈の定番ルールがあるようです。

理由

• 偶数は割れにくく、レイアウトが安定する
• Tailwind / Bootstrap などCSSフレームワークと相性が良い
• “迷いが減る”＝設計スピードが上がる

よく使うとされているサイズ例

用途	推奨値
余白	8 / 16 / 24 / 32 px
ボタン高さ	48px（= 6×8）
アイコン	24px
角丸	8px or 4px

まとめ

Figmaには多くの機能がありますが、
まずは

• 画面（Frame）を置く
• 四角とテキストで構成する
• 簡単に遷移を繋ぐ

この3つだけで十分スタートできます。

Figmaを使う一番の目的は、
UIを「考え」、そして「正しく伝える」ことではないかと思います。

「綺麗にデザインする」ことがゴールではなく、
自分の頭の中のアイデアや仕様を視覚化して整理し、共有するためのツールとして使ってみてはいかがでしょうか。