Figma初心者ガイド｜デザインツールを使いこなしてUIを作る基本

こんにちは、暮らしとお金のカフェへようこそ。日々の暮らしをちょっとよくするためのヒントを紹介します。

「ウェブサイトやアプリのデザインをしてみたい」「エンジニアとデザイナーの間でコミュニケーションを取りたい」「副業でウェブデザインを始めたい」——Figmaはこれらのニーズに応える、現在最も広く使われているUIデザインツールです。無料から始められ、インストール不要でブラウザで動作するため、今日からすぐに始められます。

Figmaとは：デザインのスタンダードツール

FigmaはブラウザとデスクトップアプリのどちらでもUIデザインができるツールです。2020年代に入って世界中のデザイナー・エンジニア・プロダクトマネージャーに爆発的に普及しました。

Figmaが選ばれる理由

特徴	内容
ブラウザで動作	インストール不要。MacでもWindowsでもすぐ使える
リアルタイムコラボ	複数人が同時に同じファイルを編集できる（Google Docsのデザイン版）
コンポーネント管理	一度作ったデザイン要素を繰り返し使えて一括変更も簡単
プロトタイプ機能	画面遷移のインタラクションをデザインだけで作れる
開発者向け機能	エンジニアがCSSコードを参照できるInspect機能

価格プラン

無料プラン: ドラフトファイル無制限・3つのプロジェクトまで
Professionalプラン: 月額12ドル・コラボ機能フル活用
個人利用であれば無料プランで十分

Figmaの基本インターフェースを把握する

Figmaを開くと3つのエリアが表示されます。まずここを覚えましょう。

3つのパネル

左パネル（Layers / Assets）

Layers: 画面上の全要素が階層構造で表示。要素の選択・表示切り替えができる
Assets: 作成したコンポーネント・カラーやスタイルのライブラリ

中央（Canvas）

実際にデザインを作業する場所。フレームや図形を配置して画面を作ります。

右パネル（Design / Prototype / Inspect）

Design: 選択した要素のサイズ・色・フォントなどを編集
Prototype: 画面遷移のインタラクションを設定
Inspect: エンジニアがコード（CSS等）を確認するための情報表示

基本のショートカットキー

操作	Mac	Windows
選択ツール	V	V
フレーム作成	F	F
矩形作成	R	R
テキスト	T	T
全体表示	Cmd Shift H	Ctrl Shift H
ズームイン	Cmd +	Ctrl +
ズームアウト	Cmd -	Ctrl -
手のひらツール	H（またはSpace押しながら）	同様

ショートカットを覚えることで、作業スピードが格段に上がります。まずV・F・R・Tの4つを優先して覚えましょう。

フレームと図形の基本操作

フレーム（F）：画面の枠を作る

Figmaでは「画面」をフレームとして作成します。

Fキーを押してフレームツールを選択
右パネルに表示されるプリセット（「iPhone 14」「Desktop 1920×1080」など）を選択
またはCanvasにドラッグして任意サイズで作成

矩形・テキストの追加

矩形（R）: ボタン・カード・背景など、基本的な四角形
楕円（O）: 円形の要素・アイコン・アバター
テキスト（T）: クリックして文字入力。右パネルでフォント・サイズ・色を設定

色の設定方法

要素を選択して右パネルの「Fill（塗り）」をクリック。カラーピッカーで選択するか、HEX値（例：#3B82F6）を直接入力します。

オートレイアウト：要素を自動で整列させる

Figmaの最も強力な機能のひとつが**オートレイアウト（Auto Layout）**です。要素を縦または横に並べ、間隔・パディングを自動管理します。

オートレイアウトが便利な場面

ボタン: テキストの長さに応じて幅が自動調整される
カードリスト: アイテム数に応じて自動伸縮する
ナビゲーションメニュー: 項目を追加・削除しても自動で整列

設定方法

整列させたい複数の要素を選択（Shift+クリック）
右クリック→「Add Auto Layout」、またはShift+Aで適用
右パネルで「間隔」「パディング」「並び方向」を設定

レスポンシブデザインに対応したUIを作るときに特に役立ちます。

コンポーネント：繰り返し使えるデザインパーツ

コンポーネントは「一度作ったデザイン要素を繰り返し使えるようにする」機能です。

なぜコンポーネントが重要か

例えばボタンを100か所使ったデザインを作ったとします。後からボタンの色を変えたいとき、コンポーネントなら「メインコンポーネント」を1か所変更するだけで、100か所すべてが自動更新されます。

コンポーネントの作り方

ボタンなど繰り返し使う要素を作成
右クリック →「Create Component」
または要素を選択してCmd+Alt+K（Mac）/ Ctrl+Alt+K（Win）

コンポーネントの使い方

左パネルの「Assets」タブから作成したコンポーネントをドラッグしてCanvasに配置するだけ。これが「インスタンス」です。インスタンスを変更してもメインコンポーネントには影響しません。

プロトタイプ：インタラクションを追加する

Figmaのプロトタイプ機能で、「ボタンをクリックしたら次の画面に移動する」というインタラクションを追加できます。コードなしでアプリの動作を疑似体験できます。

プロトタイプの設定手順

右パネルの「Prototype」タブを選択
画面遷移を設定したいボタン等を選択
青い円を次の画面（フレーム）にドラッグしてつなぐ
インタラクションの種類（クリック・ホバー等）を設定
右上の「Present（▶）」ボタンでプレビュー確認

クライアントへのプレゼンや、チームでのUI確認に非常に便利です。

エンジニアへのデザイン受け渡し

Figmaの「Inspect」機能で、エンジニアがデザインを実装するのに必要な情報（サイズ・色・フォント・CSS）を確認できます。

Inspectの使い方

エンジニアにFigmaファイルのURLを共有（閲覧権限を与える）
エンジニアがブラウザでファイルを開き、要素をクリック
右パネルの「Inspect」タブに実装に必要なCSSコードが表示される

デザインと実装のギャップを大きく減らせる機能で、エンジニアとデザイナーの協力が格段にスムーズになります。

実際に始めるためのリソース

無料の素材・アイコン

Iconify: 10万以上のアイコン（Figmaプラグインで使用可。Plugins→Iconifyで検索）
Unsplash: 商用利用可能な高品質写真（Figmaプラグインで直接挿入可）
Figma Community: Figma公式コミュニティでデザインテンプレートを無料で入手可

学習リソース

Figma公式チュートリアル: figma.com/resourcesにある動画チュートリアル
YouTube「Figma 初心者」: 日本語の実践動画が多数
Figma Community File: 他のデザイナーのファイルを開いて構造を学べる

まとめ

Figmaは無料・インストール不要で今日からすぐ始められるUIデザインツール
**3パネル（左：要素一覧、中央：作業エリア、右：プロパティ）**の構造を覚えるのが最初のステップ
オートレイアウトで要素を整列・自動調整し、コンポーネントで一括変更できる再利用部品を作る
プロトタイプ機能でコードなしに画面遷移のデモが作れる
Inspect機能でエンジニアとのデザイン受け渡しがスムーズになる

まずFigmaの無料アカウントを作成し、「架空のアプリのログイン画面」を1つ作ることから始めてみましょう。実際に作ることで、基本操作が自然に身についていきます。

暮らしとお金のカフェでは、生活のあらゆる場面で役立つ情報をやさしくお届けしています。ぜひ他の記事もご覧ください。