Figmaの使い方｜初心者が30分で作りながら覚える基礎操作【ノンデザイナーOK】

「Figmaって難しそう」「ノンデザイナーの自分に使いこなせるのかな」——そう感じて一歩を踏み出せずにいる方は多いのではないでしょうか。
Figmaは、今や世界中のデザイナーが使っている無料のデザインツールです。ただ、オートレイアウトやスタイル、コンポーネントといった基礎知識を知らないまま使うとうまく扱えず、本やWebで概念だけ学んでもピンと来ないことが多いのも事実です。
この記事では、そんなFigmaの使い方を手を動かしながら30分で身につける方法を、動画に沿ってステップごとに解説します。自己紹介カード・ボタン・ヒーローセクションの3つを実際に作りながら、最低限の基礎をまるごと押さえられます。
解説は、UIデザイナーとして活躍する現役デザイナーが担当。実際の操作画面に沿って進めるので、読みながら一緒に手を動かせば「繋がってきたかも」という感覚がつかめるはずです。

公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。

【無料】公式LINEに登録して特典を受け取る

Figmaとは？初心者が最初に知っておきたい基礎

Figmaは、世界中のデザイナーが使っているデザインツールです。とても便利な反面、初心者がいきなり使おうとすると、よく分からずに挫折してしまうことがあります。
その理由は、オートレイアウト・スタイル・コンポーネントといった、知っておかなければならない基礎知識がたくさんあるからです。これらを知らないまま使うとうまく扱えませんし、本やWebで概念だけを学んでもなかなかピンと来ません。

こうしたデザインツールは、実際に触りながら身につけるのが一番です。そこでこの動画では、一緒に手を動かしながら、Figmaを使う上で知っておくべき最低限の基礎知識を学んでいきます。
今回作るのは、自己紹介カード・ボタン・ヒーローセクションの3つです。難しそうに見えても、順番に手を動かせば大丈夫です。30分で学べる構成になっているので、一緒に進めていきましょう。

Figmaのアカウント作成とアプリのインストール

まずは、Figmaのアカウントをまだ持っていない方・アプリを入れていない方向けに、準備の手順を説明します。

1. Figmaのダウンロードページ（URLは動画概要欄に掲載）を開きます。
2. アカウントの作成は、右上の「無料で始める」ボタンから進められます。ここからアカウントを作りましょう。
3. Figmaはブラウザでも使えるアプリなので、デスクトップアプリを必ずしも入れる必要はありません。ただしアプリの方が動作がスムーズなので、インストールをおすすめします。
4. 該当するもの（お使いのOS向けのアプリ）をクリックしてダウンロードしてください。

ブラウザ版でも問題なく使えますが、これから本格的に触っていくならデスクトップアプリを入れておくと快適です。

デザインファイルの作成｜Figmaの最初の一歩

準備ができたら、実際にFigmaを触っていきましょう。
Figmaを開いたら、左サイドメニューの「すべてのプロジェクト」をクリックします。するとプロジェクトが表示されるので、それをクリックしてください。

1. プロジェクトを開いたら、新しいデザインファイルを作ります。右上の「作成」ボタンをクリックし、「デザイン」というファイルを作りましょう。
2. すると、真っさらなデザインファイルが作成されます。
3. せっかくなのでファイルに名前をつけましょう。「無題」の部分をクリックすると編集が可能になるので、ここでは「Figmaの使い方」と入力しておきます。

これでデザインファイルができました。ここから、自己紹介カード・ボタン・ヒーローセクションの3つを順番に作っていきます。難しそうに見えても、パーツを組み合わせていくだけなので大丈夫です。

自己紹介カードを作りながらFigmaの基本操作を覚える

ウォーミングアップとして、まずは自己紹介カードを作ってみましょう。ここでフレーム・図形・テキスト・フォント・色・整列といった、Figmaの基本操作をひと通り体験できます。

フレーム（デザインを入れる箱）を作る

まずは、デザインを入れる箱である「フレーム」を作ります。フレームの出し方は次の2通りです。

1. 下のメニューにある「フレーム」をクリックする
2. ショートカットキーの「F」を押す

サイズを選べるので、今回は「Twitter投稿」を選んでください。これでフレームができました。
フレームにも名前をつけておきます。ここでは「自己紹介カード」と入れてみましょう。

長方形（図形）を入れてサイズを調整する

フレームの中に要素を入れていきます。まずは四角（長方形）です。

1. 下のメニューにあるシェイプツールのプルダウンをクリックすると、いろいろな形が出てきます。今回は「長方形」を選びます。
2. フレームの中に長方形を入れます。サイズの変更は、四隅にカーソルを持っていくと自由に変えられます。
3. もしくは、選択した状態で右のレイアウト部分から数値で設定することも可能です。今回は数値で設定します。

「W」が横幅、「H」が高さです。今回は横幅を1200に設定し、この長方形を下の方に置いておきます。

テキストを入れて複製する

続いてテキスト要素を入れます。テキストは、下のメニューの「テキスト」またはショートカットキー「T」で作れます。

文字要素を複製したいときは、次の方法があります。

1. コマンド＋Cでコピー、コマンド＋Vで貼り付け（複製）
2. 選択した状態でオプションキーを押しながらドラッグ＆ドロップすると、その場で増やせる

2つ目の方法は便利なので、解説者もいつも使っているとのことです。この方法で、肩書き・名前・簡単な自己紹介の文字要素を入れていきます。

フォントの種類・太さ・サイズを調整する

入れた文字のフォントを調整します。フォントを選択すると、右側に「タイプグラフィー」というメニューが表示されます。ここでフォントの種類・太さ・文字サイズを選べます。

今回の設定は次の通りです。

• 「About Me」の部分：サイズ240のボールド
• 肩書き：Interのレギュラー、サイズ40
• 名前：強調したいのでサイズ120（テキストの長さに応じて調整してOK）
• 説明文：サイズ32

もう1つのポイントが文字間隔（字間）です。ここもパーセンテージで変えられます。説明文がキュッとして見にくいので、5%ほど開けて読みやすくします。これで文字要素が配置できました。

プロフィール写真（丸い画像）を入れる

続いてプロフィール写真を入れます。丸い形に入れたいので、次の手順で進めます。

1. シェイプツールから円（楕円）を選びます。ショートカットキー「O」でも追加できます。
2. 円を入れたら、四隅の矢印で大きさを調整します。縦横の比率を保ったまま調整したい場合は、シフトを押しながらカーソルを動かすと同じ比率でサイズを変えられます。
3. もしくは右のレイアウトから数値で設定します。アスペクト比を固定するボタンを押しておくと、縦横比を保ったままサイズ調整ができます。今回はサイズを400にします。

次に、この円の中に画像を入れます。

1. 右の「塗り」の色が付いている部分をクリックします。
2. 色の選択肢の中から「画像」というアイコンをクリックします。
3. 「コンピューターからアップロード」ボタンを押し、好きなプロフィール写真やアイコンをアップロードします。

これで丸い枠の中に写真が入りました。この写真を自己紹介カードのフレームの中に配置します。

色をつけて要素を整列させる

モノクロで寂しいので色をつけます。色は自由で、好きな色で構いません（解説者はオレンジを使用）。

色は、カラーパレットで選んだり、色味を細かく調整したりできます。デザインファイル上にすでにある色を「ピックアップ（スポイト）」で抽出することも可能です。今回使ったオレンジのカラーコードはFF5000です。長方形・文字・フレームの背景色にも色を反映させていきます。

最後に配置を整えます。肩書き・名前・紹介文を揃えたいので、次の手順で整列させます。

1. シフトを押しながら3つの要素を選択します。
2. 右のメニューにある「左揃え」をクリックします。
3. すると、左の線に合わせて綺麗に並びます。そのまま好きな位置に配置すれば完成です。

シンプルにパーツを組み合わせて置いただけですが、これで自己紹介カードができました。Xの投稿用サイズで作っているので、作ったものをXに投稿してみるのもおすすめです。

オートレイアウトの使い方｜Figmaで最も重要な機能でボタンを作る

続いてオートレイアウトです。ここが最も大事なパートで、Figmaを使う上でオートレイアウトを使えるかどうかで、作業効率が大きく変わります。

オートレイアウトとは？

オートレイアウトを一言で言うと、自動で整列してくれる箱を作れる機能です。例えば、バラバラに置いていた文字要素を自動で整列してくれます。

使い方は次の通りです。

1. 整列させたい要素を選択します。
2. 「Shift＋A」を押す、または右クリックのメニューから「オートレイアウトを追加」を選びます。

これでオートレイアウトが適用され、要素がピッと並んでフレームになります。要素の間隔を自由に設定したり、どこを基準に並べるか（左・中央・右揃えなど）を切り替えたりできるのが特徴です。

お問い合わせボタンを作る

このオートレイアウトを使って、お問い合わせボタンを作ってみましょう。

1. テキストをクリックで置き、「お問い合わせ」と入力します。
2. フォントサイズを16、太さをボールドに設定します。
3. このテキストにオートレイアウトをかけます（Shift＋A、または右クリックメニュー）。すると見た目が変わり、フレームになります。
4. 分かりやすいように、塗りからフレームに色をつけます（解説者は濃い青を選択）。文字色は白にします。

このボタンのすごいところは、文字要素に合わせてフレームの長さが自動で調整される点です。例えば「詳しく見る」のように文字を変えると、その長さに応じてフレームの長さも自動で変わります。これがオートレイアウトです。

パディング・角丸を数値で設定する

オートレイアウトのもう1つのすごいところは、文字とフレームの間の余白（パディング）を数値でコントロールできることです。

1. オートレイアウトのメニューで、横のパディングを80、縦のパディングを24に設定します。
2. 丸いボタンにしたいので、「角の半径」メニューから角丸をつけます。8にするとやや丸いボタンになります。
3. 今回はまん丸にしたいので、40ほどに設定します。
4. このフレームにも「ボタン」という名前をつけておきます。

これでオートレイアウトの効いたボタンが完成です。

アイコンを追加する（Iconifyプラグイン）

せっかくなのでボタンにアイコンをつけます。アイコン素材を取得できる便利なプラグイン（拡張機能）として「Iconify」を紹介します。

1. 下のメニューにある「アクション」をクリックします。
2. 「プラグインとウィジェット」タブを選びます。
3. 検索欄に「Iconify」と入れ、Iconifyプラグインを選びます。
4. いろいろなアイコンが出てくるので、今回はメールのアイコンを使うため「メール」で検索します。
5. 好きなメールのアイコンをクリックし、「As Frame」を選びます。するとアイコンのデータが入ってきます。
6. 入れたアイコンを選択し、こちらも白にします。

アイコンをボタンの中に置こうとすると青い線が出てきます。その状態でピッと離すと、自動でボタンの中に要素が入ります。オートレイアウトが自動で要素を整列してくれるためです。

並び方向・ギャップ・サイズモードを調整する

オートレイアウトでは、整列の縦横も調整できます。

• 並び方向：デフォルトは「水平」。直列（垂直）にすると縦に要素を並べます。今回は横並びのままにします。
• ギャップ（要素の間）：要素と要素の間隔も数値で設定できます。この間隔は「ギャップ」という名前になっています。

もう1つ重要なのがサイズのモードです。今このボタンは「コンテンツを内包する」モードになっていて、中身の内容に応じてサイズを変えてくれます。ボタンなどの要素ではこのモードをよく使います。

逆に、外の箱の大きさに合わせて中身のコンテンツを変えることもできます。文字要素を「コンテナに合わせて拡大」モードに設定しておくと、外の枠に応じて説明文の折り返しが生まれます。最初は難しく感じるかもしれませんが、「そういう機能があるんだ」と知っておくだけでも大きな違いになります。

スタイルとコンポーネントの使い方｜デザインを一括変更する

次はスタイルとコンポーネントです。ここは少し抽象的ですが、非常に便利なので軽く触れておきます。
スタイルとコンポーネントは、デザインのルールを決めて一括で変更するための機能です。コンポーネント機能は、何度も使うアイテムをテンプレート化して使いやすくする機能と考えると分かりやすいでしょう。

カラースタイルを登録する

まず、ボタンの青の色をカラースタイルとして登録してみます。

1. 右の「スタイル」の隣にあるプラスボタンを押します。
2. いろいろ選べますが、今回は色を登録します。色の部分をクリックすると、カラーパレットが出てきます。
3. スポイトでボタンの青を抽出し、「ブルー」と名前をつけます。
4. 下の「スタイルの作成」を押すと、スタイルが追加されます。

同じように、よく使う色を追加していきます。

• 白：「ホワイト」として登録
• 黒：カラーコード333333で「ブラック」として登録

これで3つの色のスタイル（ブルー・ホワイト・ブラック）を登録できました。

コンポーネントを登録する（メインコンポーネントとインスタンス）

次にコンポーネントを登録します。ボタンは何度も使うので、コンポーネント化します。

1. コンポーネント化したいパーツ（ボタン）を選択します。
2. 「コンポーネントを作成」ボタンを押します。すると要素が紫色になり、コンポーネント化ができます。

これが「メインコンポーネント」と呼ばれるテンプレートの大元です。試しにこれをコピーすると、コピーされた側は「インスタンス」と呼ばれます。インスタンスは、文言などを個別に変更できます。

ここで、メインコンポーネントのボタンの色を別の色（例：ピンク）に変えてみます。すると、コピーしたインスタンス側も同様に変更されます。つまり、コンポーネント化しておけば、後で一気に変えたいときにメインのコンポーネントを変更するだけで全てを変えられるということです。
このコンポーネント機能は実務で必ずと言っていいほど使うので、軽く触れておくのがおすすめです。

ヒーローセクションを作る｜学んだ機能でWebサイト画面を実践

最後に、ここまで学んだことを使って、実際のWebサイトっぽい画面を作っていきます。今回作るのは、AIのサービスを展開している会社のヒーローセクションです。

フレームを作って画像を入れる（Unsplashプラグイン）

1. フレームを作ります（下のフレームアイコン、またはショートカット「F」）。横幅1440・縦800に設定します。
2. フレームに「ヒーローセクション」と名前をつけます。
3. フレームの中に画像を入れます。「塗り」の部分をクリックし、画像のアイコンをクリックして、AIっぽい画像をはめ込みます。

手元に素材がない場合は、「Unsplash」プラグインがおすすめです。アクション → プラグイン → 「Unsplash」で検索して追加します。Unsplashはフリー素材をダウンロードできる便利なプラグインで、「AI」などで検索するとAIっぽい画像素材が出てきます。

ヘッダーを作る（テキスト・スタイル適用）

次にヘッダーを作ります。ヘッダーとは、いろいろなメニューが入っているパーツのことです。

1. テキストで、まずロゴ、次にメニュー（好きなメニューでOK）を入れます。
2. ロゴのフォントサイズは24、エクストラボールドにします。色は、先ほど登録した青を使います。
3. スタイルに登録した色を使うときは、丸が4つ並んだアイコン「スタイルとバリアブルを適用」を押します。すると登録した色が出てくるので、「ブルー」を選びます。
4. メニューのフォントサイズは14、ミディアムを選択します。

オートレイアウトでメニューを整える

1. 各メニューをシフトを押しながら選択し、オートレイアウト（Shift＋A、または右クリックメニュー）を追加します。4つのメニューが並びます。
2. オートレイアウトのギャップを40に設定します。
3. 次に、ロゴとメニューをさらにまとめてオートレイアウトをかけます（Shift＋A）。これで1つのフレームになります。
4. 中央揃えにして、ロゴとメニューの高さを揃えます。
5. 横幅を1280に設定し、横の隙間を64、縦の隙間を24に設定します。

透明度・角丸・位置を調整する

1. フレームを選択した状態で塗り（プラスボタン）を追加すると、ヘッダーの背景が見えてきます。
2. 抜け感を出すため、塗りを白の70%に設定します。このパーセントは透明度を設定できる数値で、少し透けたヘッダーメニューになります。
3. 外見の「角の半径」を20に設定して角丸をつけます。
4. これを画面の中央に配置したいので、「水平方向の中央揃え」ボタンを押します。これで画面の真ん中に置けます。

キャッチコピー・説明文・ボタンを配置する

続いて、キャッチコピー・説明文・ボタンを置いていきます。

1. テキストでキャッチコピーなどを打ちます。
2. ボタンは、先ほど作ったコンポーネントのボタンを使います。コピーしてきて配置します。メインコンポーネントの色を青に戻したいので、塗りの「丸4つのアイコン」から「ブルー」にすると、コピー先のインスタンスも青に戻ります。
3. フォントサイズを調整します。キャッチコピーは60のエクストラボールド、字間5%。説明文は20のミディアム、字間5%にします。
4. 文字の色を白にしたいので、選択して塗りのスタイルから登録済みの「ホワイト」を選びます。

3つの要素（キャッチコピー・説明文・ボタン）を、シフトを押しながら選択してオートレイアウト（Shift＋A）で整列させます。ギャップは40に設定します。

配置の際、オプションキーを押すと赤い文字で距離（数値）が表示される便利なショートカットが使えます。今回は横からの距離を80、上からの距離を310ほどに置きます。

画像に黒のオーバーレイを追加して仕上げる

最後の仕上げです。文字の白色が見にくいので、画像に薄い黒を追加します。

1. フレームを選択し、塗りのプラスボタンを押して塗りを追加します。
2. すると自動で、黒の不透明度20%の塗りが上に追加されます。

これで画像に対して暗さを追加でき、白い文字が読みやすくなりました。ヒーローセクションの完成です。今日学んだオートレイアウト・スタイル・コンポーネントを組み合わせることで、Webページのファーストビュー（ヒーローセクション）を作ることができました。

Figmaは「パーツの組み合わせ」で作る｜今日のまとめ

Figmaでのデザインは、パーツを組み合わせて構築していくものです。今回は、自己紹介カード・ボタン・ヒーローセクションの3つを作りながら、フレーム・オートレイアウト・スタイル・コンポーネントという基礎を体験しました。
「繋がってきたかも」と思えたら、今日はそれでOKです。これでFigmaの第一歩を踏み出せました。

今日作ったように、手を動かしながら学ぶのが一番の近道です。忘れないうちに、ぜひご自身でもう1度作ってみてください。新しいことを学ぶのは少し勇気がいりますが、ここまでやり切った時点で大きな一歩を踏み出しています。その一歩を無駄にせず、少しずつ積み重ねていきましょう。

Figmaの使い方に関するよくある質問

Q. Figmaはノンデザイナーでも使えますか？

はい、使えます。この動画はデザイン初心者・ノンデザイナー向けに作られており、フレーム・オートレイアウト・スタイル・コンポーネントといった最低限の基礎を、手を動かしながら30分で学べる構成になっています。

Q. Figmaを使うにはアプリのインストールが必要ですか？

必須ではありません。Figmaはブラウザでも使えるアプリです。ただし、デスクトップアプリの方が動作がスムーズなので、本格的に使うならインストールをおすすめします。

Q. オートレイアウトとは何ですか？

一言で言うと、自動で整列してくれる箱を作れる機能です。要素の間隔や揃え方（左・中央・右）を数値で管理でき、文字の長さに応じてフレームの大きさも自動で調整されます。Figmaを使う上で最も重要な機能です。

Q. スタイルとコンポーネントは何が違いますか？

スタイルは色などのデザインルールを登録して一括適用する機能、コンポーネントは何度も使うパーツをテンプレート化する機能です。コンポーネントは、メイン（大元）を変更すると、そこから複製したインスタンス（コピー）にも変更が反映されます。

Q. アイコンやフリー画像はどうやって用意しますか？

プラグイン（拡張機能）を使うと便利です。動画では、アイコン素材を取得できる「Iconify」と、フリー画像をダウンロードできる「Unsplash」が紹介されています。どちらもアクション → プラグインから検索して追加できます。

Figmaをさらに深く学ぶならデイトラ「Webデザインコース」

本記事で解説したFigmaの使い方は、独学でも基礎を押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。

デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。Figmaはもちろん、STUDIOやPhotoshopといった実務で必要なツールも学べ、プロのデザイナーに添削してもらう機会もあります。定期的にデザインコンペも開催されており、実践経験を積めるのも魅力です。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界最安値クラスの低価格で学べます。未経験からでも成長しやすい環境を探している方は、ぜひ一度カリキュラムをチェックしてみてください。

▶︎デイトラWebデザインコースの詳細を見てみる

「自分に合うか不安…」という方は公式LINEへ

「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」

そんな方は、デイトラ公式LINEに登録してみてください。自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。

▶︎デイトラ公式LINEで無料相談してみる