Figma（フィグマ）の使い方入門！初心者のための27の基礎スキルマスター方法
Figma（フィグマ）は、デザイン初心者からプロフェッショナルまで幅広く愛用されている、クラウドベースのデザインツールです。Webデザインを学習中、学習してみようという方の多くが「Figmaもやってみたいな」と考えているでしょう。
そこで、本記事では、Figma未経験やデザインツール初心者の方でも、基本的な操作を学び、効率的にデザインを進めるための27のスキルをステップごとに紹介します。Figmaの基本機能をマスターし、素敵なデザインを作り上げるための第一歩を踏み出しましょう！
Figma（フィグマ）をはじめる
Figmaについて知る
01. Figmaとは？
Figma（フィグマ）は、ウェブブラウザ上で動作するクラウドベースのデザインツールです。ソフトをパソコンにインストールしなくてもよく、さまざまなデバイスから、インターネット上のページにアクセスする感覚で作業が可能。また、MacOSまたはWindows用のデスクトップアプリケーションもあり、オフラインでの作業にも対応しています。
FigmaはWebデザインやUI/UXデザイン、ワイヤーフレーム等の作成に用いられているほか、スライド資料作成などにも活用されています。非デザイナーでも使いやすいインターフェイスや、デザインの一貫性をサポートしてくれる機能が多いことが特徴です。また、複数のユーザーが同時にリアルタイムでデザインを共有・共同編集でき、ファイルのバージョン管理もあるなど、チームでの利用に強いこともFigmaの特徴です。
Figmaとは？注目のデザインツールを徹底解説！
https://blog.nijibox.jp/article/figma/
Figmaが手軽に始められる理由としては、無料で多くの機能が使える点も挙げられます。
Adobeなど無料で試せる期間が限られていたり、無料プランは機能制限が多すぎて使えない！というサービスも珍しくありませんが、Figmaは無料だけでも十分仕事ができるくらいの機能が使えます。無料で使える日数（期間）制限もありません。
画像元：プランと料金 | Figma
各プランを見ると、開発モードや、チーム制作に関係する機能が有料版限定になっていますが、個人でデザイン機能を使う・学習する分には十分使えます。少し触ってみて、合わない・必要ないと思ったら解約か放置でOK。本格的に仕事に使おうと思ったら、上位プランにアップグレードも可能です。
ですので、「Figmaってどんな？」「Figma勉強したほうが良い？」と迷っているのなら、とりあえず無料プランで登録して使ってみるのがおすすめです。初期費用ゼロで、解説記事や動画を眺めているよりも効率よくFigmaの基本操作を覚えていきましょう！
Figmaをはじめる
02. アカウント作成と、ファイルブラウザ画面の把握
Figmaを利用するためには、まず公式サイトからアカウントを作成する必要があります。無料の『Starter』プランを選択する点にだけ注意すれば、勝手にアップグレードされたり、料金が発生したりはしないのでご安心を。
そして、アカウント作成ができたらFigmaのファイルブラウザ画面を把握しましょう。ファイルブラウザ画面というのは、アカウントのホーム画面やダッシュボードのような画面で、自分が制作しているファイルの一覧や、参加しているチームなどが確認できます。
以下の記事で、Figmaのアカウント作成（無料登録）方法からファイルブラウザ画面の見方までを、図解たっぷりで解説しています。
Figmaのデスクトップアプリを使用したい方は、下記のページからダウンロードできます。
https://www.figma.com/ja-jp/downloads/
ダウンロードしたアプリを開くとログイン画面になります。アカウント作成済の方は「log in with browser」からログイン。アカウントがまだない方は、ログインボタンの下にある「Create one」からアカウントを作成しましょう。
03. 新規ファイル作成とFigmaデザイン画面の把握
Figmaで新しいデザインを作成するには、「デザインファイル」のボタンから新規ファイルを作成します。新しく作成したファイルはファイル名が「無題」になっているので、なんのファイルかわかるように早い段階で名前をつけておきましょう。
デザインファイルを作成すると、デザイン作業を行う画面（操作画面）が開かれます。メインのキャンバス、レイヤーパネル、ツールバーなどが配置された画面です。最初から全機能を覚える必要はありませんが、大まかな画面構成・基本的なツールの場所を把握しておくと、作業がスムーズになります。
ここから始める！Figmaの基本的な使い方 その１
https://www.isoroot.jp/blog/7507/
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
Figmaの基本操作を習得する
Figmaの基本操作を試す
Figmaを使い始めたら、まずは基本操作を試してみましょう。ページの作成から、図形やテキストの追加、画像の挿入まで、Figmaでよく使われる機能に慣れることが大切です。これらの基本的な操作をマスターすることで、デザインの基礎を築き、よりスムーズに作業を進められるようになります。
04. ページとフレームを追加する
Figmaではじめてデザインを作成する際、まず理解すべき重要な概念が「ページ」と「フレーム」です。ページはデザイン全体を管理する単位であり、フレームは具体的なデザイン作業を行うためのエリア、というイメージです。PhotoshopやIllustratorでの「アートボード」の役割を担っているのはフレームです。ウェブサイトやアプリの各画面を作成する際、フレームを使ってそれぞれの画面を定義します。
ページは新規ファイル作成時に自動でPage1が作られていますが、フレームは初期状態ではキャンバス上にありません。まずはフレームを作成するところから始めてみましょう！
2-2. ページ・フレーム・オブジェクトを作成する
https://chot.design/figma-beginner/b096115d570c/
05. 図形（シェイプ）の描き方と編集
フレームが作成できたら、次は図形（シェイプ）を描いてみましょう。長方形や円、線などの図形を描画し、それを編集してデザインのベースとなるパーツを作ります。例えば、ボタンやアイコン、背景、画像を挿入する場所など、シェイプはさまざまな用途に使われます。
最初から難しいアイテムを作る必要はありません。
シンプルなシェイプの描画方法、塗りや線の設定方法を押さえましょう。
2-2. ページ・フレーム・オブジェクトを作成する
https://opus-plan.com/blog/basicoperation-of-figure-tools/
06. シェイプの結合/切り抜き
Figmaでは、複数の図形を結合したり、部分的に切り抜くことが可能です。
異なる図形を組み合わせたり、切り取ったりすることで、独自のデザインパーツを作成できます。この機能いこなせれば、絵が苦手でも、綺麗なアイコンやロゴのようなデザインをぱぱっと簡単に作ることができるようになりますよ！
Fimaで書いた図形をまとめる方法
https://okalog.info/figma-shapes-object/
07. テキストの追加と設定
デザインに文字を追加する際は、テキストツールを使用します。テキストはボタンラベルや見出し、本文などで使用されます。フォント、サイズ、色、行間などの設定も簡単にでき、読みやすく見栄えの良いデザインが作成できます。
設定したスタイルを登録しておくと、次から2クリックで適用することも可能です。
【Figma】テキストスタイルの使い方 〜設定・登録・解除方法〜 徹底解説！
https://implist.dev/entries/figma-text-style-setting-register-delete
08. 要素をコピー＆ペーストする
デザイン中、要素を複製したいときにはコピー＆ペーストを活用します。
基本的なショートカットキーは、OSで一般的に使われているものと同じ。
| 内容 | ショートカットキー |
|---|---|
| コピー | Windows： Ctrl + C |
| Mac： ⌘ + C | |
| ペースト（貼り付け） | Windows： Ctrl + V |
| Mac： ⌘ + V |
「マルチ貼り付け」や「ここに貼り付け」など便利な貼付け機能も用意されているので、公式の解説もチェックしてみましょう。
09. レイヤーの概念とグループ化
Figmaでは、デザインの各要素がレイヤーとして管理されます。レイヤーは、キャンバス上での要素の順序や構成を管理する重要な仕組みです。関連する要素をグループ化することで、複雑なデザインでも整理しやすくなり、編集がスムーズになります。
レイヤーとグループの管理
https://shiro-design-marke.com/figma-layer-and-group-management/
10. 配置（整列）、回転、位置の調整
要素を正確に配置するためには、整列ツールや位置調整機能を使います。これにより、デザイン内の要素を均等に配置したり、見た目のバランスを保つことができます。回転やズレの調整も簡単にでき、細かいデザインの調整が可能です。
11. 画像を挿入する
デザインに写真やイラストを配置することで、デザインに視覚的な要素を追加したり、プロトタイプにリアリティを持たせることができます。Figmaでの画像挿入の方法はいくつかありますが、基本は自分のパソコン（フォルダ）からドラッグ＆ドロップすればOK。超簡単です。
画像を挿入したい！ #Figma
https://note.com/seika_usa/n/n7599991e652e
12. 画像のトリミングとマスク
挿入した画像を必要な部分だけ表示したい場合は、トリミングやマスクを使用します。マスクを使えば、画像の一部だけを表示し、他の要素と組み合わせた表現が可能です。特定のエリアだけ見せたい、決まったサイズの中に画像を収めたい、という場面で役立ちますよ。
Figmaで画像のトリミングとマスクのやり方と位置調整のやり方
https://designup.jp/figma-image-trimming.html
13.デザインをエクスポートする（PNG, SVG など）
Figmaで作成したデザインは、エクスポート機能を使って画像として書き出すことも出来ます。Figmaで作ったデザイン全体を書き出す方法、Figmaで制作されたデザインから画像素材を書き出す方法は少し違うので、以下の記事をご確認ください。
Skillhubブログ
より高度なFigmaの機能を使ってみよう
基本操作に慣れてきたら、次はFigmaの高度な機能を使ってみましょう。レイアウトグリッドやオートレイアウトなどを活用すると、複雑なデザインでも整然としたレイアウトを作成できます。グラデーションやベクター化など、グラフィック面でのクオリティアップに繋がる方法も紹介します。
14. グルーピングの種類（フレーム、セクション、グループ）を知る
Figmaでは、複数の要素を整理するために「フレーム」「セクション」「グループ」3つの機能があります。この3つの使い分けが、最初はちょっとわかりにくいんですよね。それぞれの特徴を把握しておくと、Figmaの学習・Figmaを使ったデザイン制作を進めやすいです。
【Figma】セクション・フレーム・グループの違いをまとめてみた
https://b-risk.jp/blog/2024/08/figma-section-frame/
15. レイアウトグリッドを設定する
レイアウトグリッドという機能を使用することで、デザインの一貫性や配置の正確さを保つことができます。ウェブやアプリの画面レイアウトを設計する際に、要素の配置がバラバラにならないようにするのに役立ちます。
下記noteではWebで一般的な12カラムのグリッドシステム、8pxグリッドの作り方が解説されています。どうレイアウトグリッドを組むべきか思い浮かばない方は、オーソドックスな設定なのでそのまま真似てみましょう。
Figmaでオブジェクトを規則的に整列する3つの方法
https://note.com/smartcamp_design/n/nabe2b16f322e
16. オートレイアウトと制約を活用する
Figmaの目玉機能の一つと言ってもよいのが「オートレイアウト」。デザイン要素を自動的に整列・配置する機能です。ボタンやカードのような要素を複数使う際に、手動で配置を調整せずとも、要素が自動的にレイアウトされます。制約（Constraints）と組み合わせることで、フレーム内オブジェクトの扱いを設定でき、レスポンシブデザインの作成にも役立ちます。
サイズ変更に役立つ機能(Auto Layout, Constraints)
https://www.wakuwakubank.com/posts/750-figma-auto-layout-constraints/
どんな機能かはわかったけど、活用法が思い浮かばない・使ってみたけど上手くいかない…という方は、下記サイトの設定を真似してみましょう。ボタン、ヘッダー、記事一覧と、使用頻度の高いアイテムでのオートレイアウト活用方法が解説されています。
実践で覚える！Figmaのオートレイアウト機能
https://blog.pentagon.tokyo/2437/
17. グラデーションを設定する
Figmaでは、単色の塗りつぶしだけでなく、グラデーションも簡単に設定できます。これを活用することで、より立体的で魅力的なビジュアルが作成できます。背景やボタンにグラデーションを適用して、デザインに深みを加えることが可能です。
Figmaのグラデーション機能を解説！斜め方向への変え方や便利なプラグインまで
https://noroshi.design/blog/figma-gradation
18. シェイプとベクターツールを使いこなす
冒頭でも紹介した図形（シェイプ）とその調整、ベクターツール（ペンツールなど）を組み合わせると、よりオリジナリティのあるグラフィックの作成が出来ます。基本機能がある程度使えるようになり、自分の“プラス・アルファ”な強みを強化したい場合は、下記のようなイラストなどの作成にチャレンジしてみても良いでしょう。
[Figma入門]シェイプとベクターツールを使いこなして自由に図を作ろう
https://qiita.com/kabechiyo13/items/aa4c79c9e125a44cb207
Figmaではテキストレイヤーをベクターに変換することも出来ます。ロゴやワードマークを作りたい時に活躍してくれる機能です。また、ひと手間加えてオリジナリティを加えることで、ファーストビューなどの画像の雰囲気アップにも役立つでしょう。
Figmaのデザインシステム構築関連機能
Figmaには、デザインを効率的に進めるため「デザインシステム」の構築に役立つ機能も用意されています。デザインシステムを活用することで、統一感のあるデザインを簡単に作成でき、再利用可能なコンポーネントやスタイルを管理することができます。このセクションでは、コンポーネントやバリアント、ライブラリなど、デザインの効率化に役立つ機能を紹介します。
コンポーネント
コンポーネントは、Figmaでデザインの一貫性を保ちつつ、効率よく作業を進めるために役立つ機能です。コンポーネントを使うと、繰り返し使う要素を一元管理でき、変更も簡単に反映できます。また、バリアントを使えば、同じコンポーネントの異なるバージョンを効率よく作成できます。
19. コンポーネントとインスタンスを理解する
コンポーネントは、ボタンやアイコンなど、繰り返し使用する要素を一つにまとめて管理できる機能です。一度作成したコンポーネントは、インスタンスと呼ばれる形で他のデザインにも再利用でき、デザイン変更があった際にはすべての箇所に自動で反映されます。例えば、ボタンのデザインを変更する場合、1つのコンポーネントを編集するだけで、全てのボタンが更新されます。
のんびり学ぶ Figma 〜コンポーネント編〜 (1)
https://knowledge.sakura.ad.jp/32181/
20. バリアント
バリアントは、同じコンポーネントの異なる状態やバリエーションを簡単に管理できる機能です。たとえば、ボタンの通常状態、ホバー状態、押された状態をバリアントとして設定することで、複数のバリエーションを効率よくまとめて扱うことができます。この機能を使うことで、デザインの一貫性を保ちながら、様々な状況に対応したコンポーネントを作成できます。
FigmaのコンポーネントをVariantsで状態管理する
https://note.com/fjkn/n/nfa218f39413e
スタイルとバリアブルの設定
Figmaでは、色や文字のスタイルを一元管理できる「スタイル」や、デザインを変数で管理できる「バリアブル」といった機能があります。これらを活用することで、デザインの一貫性を保ちながら、プロジェクト全体で効率よくデザインを展開できます。特に、大規模なプロジェクトや複数人での作業において大きな効果を発揮します。
21. スタイル（カラー・テキストスタイル）の設定
スタイルは、デザインに使用する色や文字のフォーマットを一元管理するための機能です。例えば、ブランドカラーやフォントの設定をスタイルとして登録しておくと、デザイン全体で統一した色やフォントを簡単に適用できます。これにより、複数の画面にわたるデザインでも、ブレることなく一貫したデザインを保つことができ、変更があった場合もすぐに全体に反映されます。
Figma│ローカルスタイルの使い方
https://motoki-design.co.jp/figma/local-style/
22. バリアブルについて知る
バリアブルは、デザインにおけるパラメータを変数として管理する機能です。例えば、ボタンの余白や角丸の大きさをバリアブルとして設定することで、デザインに一貫したスタイルを適用しつつ、簡単に数値を変更して見た目を調整することができます。無料版では登録に制限がありますが、有料版だとダークモード・ライトモードの切り替えなどもできます。
Figmaのバリアブル機能を使ってみる
https://note.com/undotsushinsha/n/n0fed4c676334
アセットとライブラリ
23. アセットとライブラリを知る
作成したコンポーネントなどは“アセットパネル”で管理することができます。個別のデザインプロジェクトで使用できる、再利用可能なコンポーネント＝アセットです。
また、有料プランで使えるようになる「ライブラリ」はコンポーネント、スタイル、およびバリアブルなどのデザインアセットを一括管理できる機能です。ライブラリに保存したアセットは、チームメンバーと共有でき、異なるプロジェクトでも同じアセットを使い回せるため、デザイン作業を効率化できます。
Figmaでのアセットとライブラリの使い方
https://shiro-design-marke.com/how-to-use-assets-and-libraries-in-figma/
ファイルの共有とプロトタイプの作成
ファイル共有
Figmaでは、ファイルを簡単に共有し、他のユーザーとリアルタイムで協力することができます。また、コメント機能を使ってフィードバックを得たり、ファイルの管理を行うことで、チームでのコラボレーションがスムーズになります。
24. レイヤーを整理する
レイヤーを整理することは、デザインの管理を効率化するために欠かせません。Figmaでは、各オブジェクトがレイヤーとして表示されるため、グループ化や命名をして整理することでと、複雑なデザインの管理がしやすくなります。ぐちゃぐちゃすぎるファイルは扱いにくいだけでなく、心象も良くないので、整理整頓を心がけましょう。
デザインがときめくFigma片付けの魔法
https://note.com/golferdayo/n/n1f0f55cfd9f9
25. 他のユーザーにファイルを共有する
igmaでは、デザインファイルを他のユーザーと簡単に共有できます。共有リンクを発行することで、チームメンバーやクライアントとリアルタイムで共同作業ができるほか、閲覧や編集権限の設定も可能です。
figmaで制作したデザインデータを共有する方法
https://pengi-n.co.jp/column/design/figma-share/26. コメント機能を使ってフィードバックを得る
Figmaのコメント機能を使うと、デザイン上に直接コメントを残してフィードバックを得ることができます。これにより、チーム内でのコミュニケーションが簡単になり、デザインの修正や改善を迅速に行うことが可能です。
下記記事では、Figma標準のコメント機能と、プラグイン「Comment Note」を使った場合の表示を比較されています。学習（個人利用）の時にはほぼ使わないコメント機能ですが、機能の把握はしておくと良いと思います。
【Figma】メンバー間で申し送りやメモを共有するのにおすすめのウィジェット「Comment Note」
https://tech.arms-soft.co.jp/entry/2024/04/10/090000
プロトタイプモード
Figmaのプロトタイプモードを使えば、完成したデザインがどのように動作するかを視覚的に確認でき、クライアントやチームメンバーにもわかりやすく伝えることができます。プロトタイプを使うことで、ユーザー体験をシミュレーションし、より良いデザインを実現することができるでしょう。
27. プロトタイプ機能の基本を把握する
Figmaのプロトタイプ機能は、作成したデザインにインタラクションを追加し、実際のアプリやウェブサイトの動きをシミュレーションできる機能です。例えば、ボタンをクリックした際に別の画面に移動する動作を設定することができます。
プロトタイプ機能は、お仕事によって使う・使わないが結構分かれます。
細かく設定し始めるとかなり大変ですので、まずは以下のページで紹介されている5種類（画面遷移、ページ内リンク、ホバーアニメーション、メニューなどの開閉、横スクロール）から試してみるのがオススメです。
Figmaのプロトタイプ機能｜基本的な使い方
https://www.appleple.com/blog/design/figma-prototype.html
ここまで、Figmaの基本的な操作を中心に、初心者が押さえておきたい27の基礎スキルを紹介しました。これらのスキルを活用すれば、自分が思い描いたデザインを効率よく形にすることができ、チーム制のプロジェクトへの参加も可能なレベルに到達できます！
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
10月27日まで