Figmaの使い方を初心者向けに解説！無料で始めるWebデザイン

Webデザインを始めるなら、まず覚えておきたいのがFigmaです。ブラウザ上で動くデザインツールで、インストール不要、しかも無料プランで十分な機能が使えます。

Figmaは記事執筆時点で最も人気のあるデザインツールと言われており、フリーランスから大手企業のデザインチームまで幅広く採用されています。UIデザインはもちろん、Webサイトのデザインカンプ制作にも活用されています。

この記事では、Figmaを触ったことがない方でもすぐに使い始められるよう、基本的な使い方をステップごとに解説します。実際に手を動かしながら読み進めてみてください。

ナビ助

Figmaは無料でここまで使えるのがすごいところだよ。インストールも不要だから、今すぐブラウザで始められるんだ。効率的だね。

Figmaとは？特徴を整理

Figmaはブラウザ上で動作するデザインツールです。インストール不要で、Googleアカウントがあればすぐに使い始められます。

チームでリアルタイム共同編集できるのがFigma最大の特徴です。Googleドキュメントのように、同じファイルを複数人で同時に編集できます。デザイナー同士のコラボレーションはもちろん、クライアントにリアルタイムでデザインを見せながらフィードバックをもらうことも可能です。

Figma公式サイトにアクセスし、「Sign up for free」からアカウントを作成します。Googleアカウントでの登録も可能です。

アカウント作成後、用途（個人利用 / チーム利用）を選択し、チュートリアルの案内が表示されます。初めての方はチュートリアルに沿って基本操作を確認してみましょう。5分程度で完了します。

デザインの「キャンバス」にあたるのがフレームです。画面上部のツールバーからフレームツール（ショートカット：F）を選び、プリセットからサイズを選択します。

ポイント

よく使うフレームサイズ

まずはPC用の1440px幅のフレームを作成して、デザインを始めるのが一般的です。レスポンシブ対応が必要な場合は、PC用・スマホ用の両方のフレームを並べて作業します。

テキストツール（ショートカット：T）で文字を入力できます。画像はドラッグ＆ドロップで直接Figmaに配置可能です。サイズ変更や位置調整は直感的に操作でき、ガイドラインが自動表示されるので要素同士の間隔を揃えるのも簡単です。

テキストのフォント・サイズ・色は右側のプロパティパネルで変更できます。Googleフォントが標準で利用可能なので、日本語フォントの選択肢も豊富です。

ナビ助

ショートカットキーを覚えると作業スピードが段違いだよ。最初はF（フレーム）、T（テキスト）、R（四角形）の3つだけ覚えればOK。

ボタンやカードなど繰り返し使う要素を「コンポーネント」として登録できます。一箇所を変更すれば、そのコンポーネントを使っている全箇所に変更が反映されます。

コンポーネントは効率的なデザインの要です。たとえば、ナビゲーションバーをコンポーネント化しておけば、全ページ共通のヘッダーを一度の修正で統一できます。デザインの一貫性を保ちながら、修正の手間を大幅に削減できます。

FigmaのAuto Layout機能は、CSSのFlexboxに似た考え方でレイアウトを組める機能です。要素を追加・削除しても自動で間隔が調整されるため、効率的なデザイン作業には必須の機能と言えます。

ボタンのテキストを変更しても、パディングが自動で調整されてボタンサイズが追従する。カード一覧に新しいカードを追加しても、自動で等間隔に並ぶ。こうした動的なレイアウト調整がAuto Layoutで実現できます。

ナビ助

Auto Layoutは最初はちょっと難しく感じるかもしれないけど、覚えたら手放せなくなるよ。作業効率が劇的に変わるんだ。

Figmaにはプロトタイプ機能が搭載されており、画面遷移やアニメーションを設定できます。デザインを実際のサイトのように操作できるため、クライアントへのプレゼンやユーザーテストに活用できます。

設定方法は簡単で、要素同士をドラッグで接続するだけです。「ボタンをクリックしたら次の画面に遷移する」といった動きが、コードを書かずに実現できます。

Figmaの学習には、以下のリソースが役立ちます。