Figmaの使い方入門——Webデザインを始める前に知っておきたい基本

FigmaとCanvaの違い

どちらもブラウザで使えるデザインツールですが、用途と対象ユーザーが異なります。

Figmaでできること

• WebサイトやアプリのUIデザイン作成
• ワイヤーフレーム（画面の構成案）の作成
• プロトタイプ（クリックで画面遷移するデモ）の作成
• チームでのリアルタイム共同編集
• デザインデータの開発者への受け渡し

特にプロトタイプ機能は、クライアントに「完成イメージ」を見せるのに非常に有効です。静止画より格段に伝わりやすく、案件の受注率アップにもつながります。

まず覚えたい基本操作

フレームの作成

Figmaではデザインの「キャンバス」にあたるものを「フレーム」と呼びます。ショートカット「F」を押してドラッグするか、右パネルからスマホ・PCなどのプリセットサイズを選べます。まずフレームを作るところからすべてのデザインが始まります。

図形・テキストの配置

ツールバーから長方形（R）・テキスト（T）・画像などを選んでキャンバス上に配置します。配置した要素は右パネルでサイズ・位置・色などを細かく設定できます。

オートレイアウト

Figmaの強力な機能の一つです。複数の要素をまとめて「オートレイアウト」に設定すると、要素の数が増減しても自動で並び替えてくれます。ボタンやカードなどの繰り返し要素を扱うときに特に便利です。

コンポーネント

よく使うデザインパーツを「コンポーネント」として登録しておくと、複数箇所で使い回せます。コンポーネントを修正するとすべての箇所に反映されるため、大量のページがあるデザインでも効率よく作業できます。

無料プランでどこまでできるか

Figmaの無料プラン（Starterプラン）では、3つのFigmaファイルと3つのFigJamファイルまで作成できます。副業で始める段階では十分な範囲です。ファイル数が増えてきたり、チームでの本格的な共同作業が必要になった段階で有料プランへの移行を検討するといいでしょう。

まとめ

FigmaはCanvaより学習コストがかかりますが、Webデザイナーとしてステップアップするためにはいずれ必要になるツールです。まずCanvaで基本を身につけてから、Figmaに挑戦する流れがスムーズです。