Figmaの使い方｜初心者向け完全ガイド【基本操作・共同編集】

「Figmaを使ってみたいけれど、画面を開いた瞬間にボタンが多すぎて固まってしまった」。Webデザインを学び始めた人や、自社サイトの制作を内製しようとする担当者から、当社はこの声をよく聞きます。確かにFigmaは多機能で、はじめて触ると何から手をつければいいのか分かりません。ですが、実際に毎日の制作で使う機能は、全体のごく一部です。順番を間違えずに覚えれば、初心者でも数時間で「自分でデザインを作れる」状態にたどり着けます。

この記事は、アカウントの作成から、フレームやオートレイアウトといった基本操作、効率を一気に上げるショートカット、そしてチームでの共同編集までを、初心者が迷わない順番で解説します。当社は業界別担当制で年間250サイト以上の制作に関わっており、その現場で「最初に教えると伸びる順番」が見えてきました。本記事はその実務知をベースに、つまずきやすいポイントを先回りして潰しながら進めます。読み終わるころには、白紙のキャンバスを前にしても手が止まらなくなっているはずです。

Figmaを始める前に：アカウント作成と画面の全体像

Figmaはブラウザだけで動くため、難しいインストール作業は不要です。まずは公式サイトでアカウントを作り、画面のどこに何があるのかという「地図」を頭に入れるところから始めましょう。最初に全体像をつかんでおくと、後の操作で迷子になりません。

多くの初心者は、いきなりデザインを作ろうとして手が止まります。順番としては、まず環境を整え、画面構成を理解し、それから簡単な図形を置いてみる。この階段を一段ずつ上るのが、結局いちばん速い学び方です。

アカウント作成は3分で終わる

Figmaの公式サイトにアクセスし、メールアドレスかGoogleアカウントでサインアップします。利用目的を聞かれますが、個人利用なら無料プランで十分始められます。登録が終わると、最初のデザインファイルを作る画面に進めます。

ブラウザ版とデスクトップアプリ版がありますが、機能はほぼ同じです。まずはブラウザ版で気軽に触り、本格的に使うようになったらアプリ版を入れる、という順番で問題ありません。日本語表示にも対応しているので、英語が苦手でも安心です。

登録後にチームやプロジェクトを作る画面が出ますが、最初は深く考えず「個人用」で進めて構いません。慣れてきてから、用途に応じてチームを整理すればよいだけです。まずは触り始めることを優先しましょう。

画面の4つのエリアを覚える

デザインファイルを開くと、画面は大きく4つのエリアに分かれています。中央が実際にデザインを描く「キャンバス」、左が要素の一覧が並ぶ「レイヤーパネル」です。この2つが作業の中心になります。

右側は、選択した要素の色やサイズを設定する「プロパティパネル」。上部には、移動や図形描画などの道具が並ぶ「ツールバー」があります。どこを触れば何が変わるのかは、この4分割を意識すれば一気に整理されます。

最初は左のレイヤーパネルと右のプロパティパネルの違いに戸惑いますが、「左は何があるか、右はそれをどうするか」と覚えると混乱しません。この役割分担が腹落ちすると、操作の見通しが一気に良くなります。

画面の拡大・縮小と移動を先に体に入れる

デザイン作業は、拡大して細部を整え、縮小して全体を眺める、の繰り返しです。Ctrl/Cmd＋マウスホイールで拡大縮小、スペースキーを押しながらドラッグでキャンバス移動。この2つを先に覚えると、作業が一気に快適になります。

意外と見落とされがちですが、この基本移動が身についていないと、細部を直すたびにストレスがたまります。最初の30分はあえて、空のキャンバスでズームと移動だけを練習するのもおすすめです。土台の操作ほど、後で効いてきます。

最初に覚えるべき基本操作：フレーム・図形・テキスト

画面の地図を頭に入れたら、いよいよデザインを作ります。ここで覚えるのは、ページの土台になるフレーム、装飾や区切りに使う図形、そして文字を置くテキストの3つです。この3点がデザインの最小単位になります。

フレームはデザインの「枠」

フレームは、Webページやスマホ画面の「枠」にあたるものです。ツールバーのフレームツールを選ぶと、右側にPCやスマホの定番サイズが一覧で出てきます。まずは作りたいデバイスのサイズを選んで、土台を置きましょう。

フレームの中に図形やテキストを置いていくのが、Figmaの基本的な作り方です。フレームは入れ子にもでき、ボタンやカードといった部品も小さなフレームとして作れます。この「枠の中に枠」という考え方が、後で効いてきます。

Webデザインなら、PC用は幅1440px前後、スマホ用は幅375px前後が定番です。最初は深く悩まず、用意されたプリセットから選べば十分。両方のフレームを並べて作るのが、レスポンシブ設計の第一歩になります。

図形とテキストの置き方

四角形（R）や円（O）といった図形は、ツールバーから選んでドラッグするだけで描けます。描いた後に、右のプロパティパネルで色や角丸、影を調整します。ボタンや背景の帯は、ほぼ四角形だけで作れます。

テキストはTキーで配置できます。クリックして文字を打ち、フォントやサイズ、行間を右パネルで整えます。Webデザインでは、見出し・本文・注釈でサイズと太さを変えると、ぐっと読みやすくなります。

色は、要素を選んでプロパティパネルの塗り（Fill）から指定します。カラーコードを直接入力できるので、ブランドカラーが決まっていれば数値で正確に揃えられます。最初は使う色を3〜4色に絞ると、まとまりのある画面になります。

整列と配置の基本

複数の要素を選ぶと、右パネルに整列ボタンが出ます。左揃え・中央揃え・等間隔などをワンクリックで実行でき、手作業のズレを一掃できます。ボタンやアイコンを横一列に並べるときに重宝します。

また、要素をドラッグすると、他の要素との位置関係を示す赤いガイド線が自動で表示されます。これに沿って合わせるだけで、感覚的にきれいな配置ができます。まずはこのガイドを信じて動かすのがコツです。

オートレイアウト：整列と余白を自動化する最重要機能

Figmaを「速く・きれいに」使う鍵が、オートレイアウトです。これは、要素を自動で整列させ、余白を均等に保ってくれる機能。ボタンやリスト、カードなど、Webデザインのほとんどの部品はこれで作ります。最初は難しく感じますが、一度わかると手放せません。

オートレイアウトでできること

複数の要素を選んでShift+Aを押すと、それらがひとまとまりになり、間隔が自動で揃います。要素を追加したり消したりしても、余白は崩れません。ボタンの中の文字とアイコンの間隔も、これで一発です。

さらに、中の文字を増やすとボタンの幅が自動で伸びる、といった「中身に応じて伸縮する」動きも設定できます。これはCSSのFlexboxという考え方に近く、実際のWeb実装ともつながりやすい作り方です。

たとえばメニューの項目を1つ増やしても、間隔が自動で保たれたまま全体が広がります。手作業なら全項目を動かし直すところを、Figmaが面倒を見てくれる。この「崩れない」感覚が、作業の安心感につながります。

なぜオートレイアウトが重要なのか

手で揃えたデザインは、後から1要素足すだけで全体がズレ、直しに時間がかかります。オートレイアウトなら、足しても消しても整列が保たれるため、修正のストレスが激減します。これが制作スピードの差になります。

当社の現場でも、内製を始めたばかりの担当者には、まずオートレイアウトを徹底して教えます。ここを使いこなせるかどうかで、その後の作業効率が大きく変わるからです。最初の山ですが、越える価値は十分にあります。

つまずきやすいポイントと対処

初心者がよく混乱するのが、「要素の幅を固定にするか、伸縮にするか」の設定です。右パネルで、幅を「固定」「内容に合わせる」「親に合わせる」から選べます。迷ったら、まず「内容に合わせる」で試すと挙動が理解しやすいです。

もう一つは、間違えて深い入れ子になってしまうケース。レイヤーパネルで階層を確認し、不要な入れ子は解除すれば整理できます。慌てずに左パネルの階層を見る癖をつけると、迷子になりません。

コンポーネント：一度作った部品を使い回す

同じボタンやヘッダーをページごとに作り直していては、時間がいくらあっても足りません。そこで使うのがコンポーネントです。これは「部品の元データ」を作り、それを各所にコピーして使う仕組み。元を直すと、コピー先がすべて連動して直ります。

コンポーネントの作り方と使い方

部品にしたい要素を選び、Ctrl/Cmd+Alt+Kでコンポーネント化します。これが「マスター（親）」になります。あとはCtrl/Cmd+Dなどで複製すると、複製先は「インスタンス（子）」として親とつながります。

ボタンの色をサイト全体で変えたいとき、親を1か所直せば、全ページのボタンが一斉に変わります。修正漏れがなくなり、デザインの一貫性も自動で保たれる。Webサイトのように同じ部品が何度も出るデザインには必須の機能です。

子（インスタンス）の側では、親を保ちつつ中の文字だけを差し替えられます。たとえば「お問い合わせ」ボタンを複製して「資料請求」に文字だけ変える、といった使い方ができます。形は揃え、中身だけ変える、が基本の発想です。

スタイル登録でさらに一貫性を高める

色や文字設定は「スタイル」として名前を付けて登録できます。ブランドカラーや見出しのフォント設定を登録しておけば、どの要素にも同じ設定をワンクリックで適用できます。後から色を変えても、登録元を直すだけで全体に反映されます。

コンポーネントが「部品」の管理なら、スタイルは「色や文字」の管理です。この2つを併用すると、サイト全体の見た目を中央から一括でコントロールでき、修正の手間が大きく減ります。規模が大きいほど効果は絶大です。

作業を一気に速くするショートカット集

Figmaの習熟度は、ショートカットを何個体に入れているかでほぼ決まります。マウスでメニューを探す時間が消えるため、同じ作業が何倍も速くなります。ここでは、現場で実際に多用するキーを用途別にまとめました。一度に全部覚える必要はなく、よく使うものから手になじませてください。

まず覚えたい必須ショートカット

下の表は、当社が内製担当者に「これだけは最初に」と渡すリストです。フレーム作成、複製、整列の3系統を押さえるだけで、操作の体感速度がはっきり変わります。Windowsは Ctrl、Macは Cmd に読み替えてください。

覚える順番のコツ

すべてを暗記しようとすると挫折します。まずはV・F・R・T・Ctrl/Cmd+Dの5つだけを意識的に使い、無意識に手が動くようになってから次を足す。これが定着の早道です。1日3つ、と決めて増やすのもおすすめです。

ショートカットは、メニューの横にも表示されています。マウスで操作したときに「このキーだったのか」と確認する癖をつけると、自然と覚えていきます。無理に丸暗記せず、使いながら身につけるのが現実的です。

Figmaには全ショートカット一覧を表示するパネルもあり、使ったキーが光って覚えやすくなっています。最初のうちは、このパネルを開いたまま作業するのも良い方法です。手と頭の両方で覚えると、定着が速まります。

共同編集：チームと発注者を巻き込む使い方

Figma最大の強みは、複数人が同じファイルを同時に編集できることです。デザイナー、エンジニア、そして発注者が、同じURLを開いて同じ画面を見ながら作業できます。これがメールやスクリーンショットの往復をなくし、認識のズレを大きく減らします。

共有とコメントの基本

画面右上の共有ボタンから、URLを発行したりメンバーを招待したりできます。相手に「閲覧のみ」か「編集可」かの権限を渡せるため、発注者には閲覧＋コメント権限を渡すのが定番です。アカウントがなくても、閲覧だけなら相手はリンクから見られます。

コメント機能（C）を使えば、デザインの特定の場所に直接「ここをもう少し大きく」と書き込めます。どの要素についての指摘か一目で分かるので、口頭やメールでの「あの部分」というあいまいなやり取りが消えます。

誰がいま画面のどこを見ているかも、相手のカーソルとして表示されます。オンライン会議をしながら同じ画面を指し示せるため、離れた場所にいても、隣で一緒に見ているような感覚で進められます。

バージョン履歴で「戻れる」安心感

Figmaは編集内容を自動で記録しており、過去の状態にいつでも戻せます。「直したけど前のほうが良かった」というときも安心です。大きな変更の前に名前付きで履歴を残しておくと、後から探しやすくなります。

複数人で同時にいじっても、誰がいつ何を変えたかが残るため、混乱しにくい設計です。一人で使うときも、こまめに区切りの履歴を残しておくと、試行錯誤がしやすくなります。失敗を恐れず大胆に試せるのは、この履歴があるからです。

開発者への受け渡しもスムーズ

エンジニアは、デザインの各要素をクリックするだけで、色・サイズ・余白の数値や、対応するCSSのヒントを確認できます。デザイナーが細かい仕様書を別途作らなくても、画面そのものが仕様書になります。

これにより、デザインと実装のズレが起きにくくなり、確認の往復も減ります。オートレイアウトで整然と作っておくほど、この受け渡しは正確になります。作る側と実装する側の橋渡しを、Figmaが自動で担ってくれるわけです。

Webデザイン制作での実践的な進め方

基本操作を覚えたら、実際のWebサイトをどう組み立てるかが次の課題です。いきなり細部を作り込むのではなく、大きな構成から決めていくのが失敗しないコツ。Figmaは、その「大きく作って細かく詰める」流れと相性が良い道具です。

ワイヤーフレームから始める

色や写真を入れる前に、まずは要素の配置だけを決める「ワイヤーフレーム」を作ります。どこに見出しを置き、どこに問い合わせボタンを置くか。この骨組みを先に固めると、後の装飾作業で迷いません。

Figmaはグレーの四角とテキストだけで素早くワイヤーフレームを描けるため、この工程ととても相性が良いです。骨組みが固まってから色や写真を載せれば、手戻りが減ります。最近はAIで初期案を自動生成する方法も広がっています。

装飾とブランドの作り込み

骨組みが固まったら、色・フォント・写真を載せて見た目を仕上げます。ここでスタイルとコンポーネントが効いてきます。色や書式を登録しておけば、ページ全体の印象を一括で調整でき、トーンのブレを防げます。

写真は仮置きでも構わないので、早めに雰囲気を確認するのがコツです。文字だけのときと、写真が入ったときでは印象が大きく変わります。実物に近い状態で確認しながら詰めると、完成後の「思っていたのと違う」を防げます。

デザインからコードへの橋渡し

完成したデザインは、各要素の色やサイズ、余白の数値をその場で確認できます。エンジニアはこの数値を見ながら実装するため、デザインと実装のズレが起きにくくなります。オートレイアウトで作っておくと、この受け渡しがさらにスムーズです。

つまり、最初からオートレイアウトとコンポーネントで整然と作っておくことが、実装段階の手戻りも減らします。きれいに作ることは、見た目だけでなく後工程の効率にも直結する。ここを意識すると、デザインの質が一段上がります。

Figma学習でやりがちな失敗と上達のコツ

最後に、初心者が遠回りしやすいポイントと、効率よく上達するための考え方を整理します。道具の使い方そのものより、どう学ぶかのほうが、習得スピードを左右することも多いのです。

機能を全部覚えようとしない

Figmaには高度な機能が数多くありますが、最初から全部を理解する必要はありません。使う機能だけを覚え、必要になったときに調べる。この割り切りが、挫折せずに続けるコツです。完璧を目指すほど、手が止まります。

むしろ、簡単なバナーやLPを1つ完成させるほうが、機能を10個暗記するより学びになります。手を動かして「作り切る」経験が、断片的な知識をつなげてくれます。小さな完成を積み重ねましょう。

既存デザインを真似て分解する

上達の近道は、よくできたWebサイトの一部をFigmaで再現してみることです。プロがどう余白を取り、どう色を使っているかを、手を動かしながら盗めます。真似は、立派な学習法です。

再現するうちに、「ここはオートレイアウトだな」「これは同じ部品の繰り返しだな」と構造が見えてきます。見る目が育つと、自分のデザインの質も自然と上がっていきます。インプットとアウトプットを往復させましょう。

プラグインとテンプレートで作業を加速する

Figmaには、機能を拡張する「プラグイン」と、ひな形として使える「テンプレート」があります。基本操作に慣れてきたら、この2つを取り入れると作業がさらに速くなります。ただし最初は使いすぎず、本当に必要なものだけに絞るのがコツです。

プラグインでできること

プラグインは、Figmaに後付けできる便利機能です。ダミーのテキストや画像を一括で流し込む、アイコンを検索して挿入する、配色を自動で提案する、といった作業をワンクリックで済ませられます。手間のかかる単純作業を肩代わりしてくれます。

たとえばデザインに仮の文章を入れたいとき、プラグインを使えば自然な日本語のダミーテキストを一瞬で流し込めます。1つずつ手入力する必要がなく、見栄えの確認に集中できます。まずは定番のものをいくつか試し、相性の良いものを残しましょう。

テンプレートとコミュニティの活用

Figmaのコミュニティには、世界中のデザイナーが公開したテンプレートが大量にあります。LPやアプリ画面、ワイヤーフレーム用の素材などをコピーして、自分のファイルで自由に編集できます。ゼロから作るより、はるかに速く形になります。

初心者のうちは、完成度の高いテンプレートを取り込んで、構造を分解しながら学ぶのもおすすめです。プロの作りを内側から観察でき、コンポーネントやオートレイアウトの実践的な使い方が一気に身につきます。良い手本は、最高の教材です。

制作を仕事につなげるためのFigma活用

Figmaを学ぶ目的が、自社サイトの内製であれ、Webデザイナーとしての仕事であれ、最終的には「成果につながる使い方」が問われます。ここでは、道具の習得から一歩進んで、実務で評価されるための視点を整理します。

「見た目」より「伝わるか」を優先する

デザインの目的は、きれいに見せることではなく、見た人に意図を伝え、行動してもらうことです。問い合わせを増やしたいなら、ボタンの位置や文言、視線の流れを意識した設計が欠かせません。装飾はその次です。

Figmaの機能に習熟するほど、つい凝った表現に走りがちです。しかし発注者やユーザーが求めるのは、分かりやすさと使いやすさ。道具を使いこなすことと、成果を出すことは別物だと、常に意識しておきたいところです。

フィードバックを前提に作る

実務では、一発で完璧なデザインを出すことより、フィードバックを受けて素早く直せることが評価されます。Figmaの共有とコメント機能は、まさにこの「直しやすさ」を支える仕組みです。最初から人の目を入れる前提で進めましょう。

当社の現場でも、早い段階でラフを共有し、方向性のズレを潰してから作り込みます。完成間際で大きな手戻りが出るより、途中で何度も小さく確認するほうが、結果的に速く良いものになります。Figmaはこの進め方と相性抜群です。

制作物をポートフォリオとして残す

作ったデザインは、共有リンクとしてそのままポートフォリオに使えます。閲覧権限を渡せば、相手はアカウントがなくても作品を見られます。Webデザイナーを目指すなら、完成品をこまめに残しておくと、後で大きな財産になります。

当社が内製チームの立ち上げを支援する際も、まずは小さな制作物を数多く作って共有してもらいます。手を動かした分だけ実力は積み上がり、それがそのまま提案資料にもなります。作って、見せて、改善する。この循環が成長を加速させます。

レイヤー管理と命名のルールで迷子を防ぐ

デザインが複雑になるほど、要素の数は増えていきます。何の整理もしないと、左のレイヤーパネルが「四角形12」「グループ7」だらけになり、後から目的の要素を探せなくなります。早い段階で管理の習慣をつけておくと、後がぐっとラクになります。

名前を付けて探しやすくする

レイヤーやフレームには、内容が分かる名前を付けましょう。「ヘッダー」「メインビジュアル」「お問い合わせボタン」のように具体的にしておけば、複数人で見ても一目で構造が伝わります。ダブルクリックで簡単に名前を変えられます。

面倒に感じるかもしれませんが、命名は将来の自分や仲間への配慮です。数か月後にファイルを開いたとき、整理されているかどうかで作業効率がまるで変わります。最低限、主要なセクションだけでも名付けておくと安心です。

ページ機能で役割を分ける

Figmaの1つのファイルは、複数の「ページ」に分けられます。「ワイヤーフレーム」「デザイン本番」「素材置き場」のように役割で分けると、ファイルが散らからず、目的の作業にすぐ移れます。左上のメニューから切り替えます。

1ページに何もかも詰め込むと、スクロールだけで疲れてしまいます。役割ごとに部屋を分ける感覚で整理すると、頭の中も自然と整理されます。チームで共有するファイルほど、この区分けが効いてきます。

よくある質問

Figmaは完全に無料で使えますか

個人で学ぶ範囲なら、無料プランでほぼ問題なく使えます。基本的なデザイン機能はすべて使え、ファイル数などに制限がある程度です。チームで本格的に運用する場合は、有料プランを検討すると快適になります。料金は変動するため、最新は公式サイトでご確認ください。

初心者がまず覚えるべき機能は何ですか

フレーム、オートレイアウト、コンポーネントの3つです。この順番で習得するのが効率的です。図形やテキストは触ればすぐ分かりますが、この3つは少し練習が必要なぶん、使えると一気に作業が速くなります。残りは必要に応じて後から覚えれば十分です。

パソコンのスペックは高くないとダメですか

Figmaはブラウザで動くため、特別に高性能なPCは不要です。一般的な事務用ノートPCでも十分動きます。ただし、要素が非常に多い大規模ファイルでは動作が重くなることもあるため、その場合はアプリ版やメモリに余裕のある環境が快適です。

英語が苦手でも使えますか

問題ありません。設定からインターフェースを日本語に切り替えられます。チュートリアルや解説記事も日本語のものが豊富にあるため、英語が読めなくても学習に困ることはほぼありません。まずは日本語設定にしてから触り始めるとよいでしょう。

IllustratorやPhotoshopとは何が違いますか

Figmaはブラウザで動き、複数人の同時編集とWeb・アプリ画面の設計に特化している点が大きな違いです。写真の高度な加工はPhotoshopが得意ですが、サイトやアプリのデザインと共有のしやすさではFigmaが優れます。Webデザインの現場では、いまFigmaが主流になっています。

作ったデザインはそのままWebサイトになりますか

Figmaはデザインを作る道具で、それ自体がそのまま公開サイトになるわけではありません。完成したデザインをもとに、エンジニアがHTMLやCSSで実装します。ただしオートレイアウトなどで整然と作っておくと、実装が速く正確になります。

スマホ向けのデザインも作れますか

もちろん作れます。フレーム作成時にスマホサイズを選べば、すぐにモバイル用の枠が用意されます。PC版とスマホ版を並べて同時に作り、共通の部品はコンポーネントで管理するのが効率的です。レスポンシブを意識した設計に向いた道具です。

一人で使う場合でも共同編集機能は役立ちますか

役立ちます。発注者やチームに見せるとき、URLを送るだけで最新のデザインを共有でき、コメントで意見をもらえます。一人で作る場合でも、バージョン履歴で過去に戻れるため、安心して試行錯誤できます。共有を前提に作る癖をつけておくと損はありません。

どのくらいで使えるようになりますか

毎日少しずつ触れば、基本操作は数日から1週間ほどで身につきます。簡単なバナーやLPなら、1週間あれば形にできる人が多いです。ただし「きれいに見せる」感覚は、作る数を重ねるほど育ちます。焦らず、作り続けることが上達の鍵です。